Как сделать типографику адаптивной

Адаптивная типографика помогает заголовку оставаться читаемым и сохранять нужную заметность при изменении окружающего пространства. При плавном масштабировании размер шрифта непрерывно меняется в заданном диапазоне; при настройке по контрольным точкам он меняется на определённых ширинах экрана. Оба подхода требуют ограничений и текстовой колонки, подходящей для содержания. Уменьшение шрифта на телефоне — лишь часть этой работы. Заголовок может помещаться в контейнер и при этом выглядеть тесным, неудачно переноситься или подавлять поясняющий абзац.

Рассмотрим вымышленный заголовок: «Более спокойный способ управлять сложными проектами». На широкой странице он может выглядеть собранно в двух строках. На узком экране он способен превратиться в пять плотных строк, причём слово «проектами» окажется одиноко внизу. Это не означает, что шрифт обязательно нужно уменьшить. Возможно, колонка неоправданно узкая, у шрифта широкие пропорции или перенос, заданный для настольной версии, навязывает тексту неподходящую форму.

GOV.UK изменила мелкий текст, а не только крупные заголовки

Полезный контрпример к совету «на мобильном всё должно быть меньше» предлагает GOV.UK. В её действующей типографической шкале основной текст размером 19px сохраняет этот размер на небольших экранах, а самый крупный заголовок уменьшается с 48px до 32px. Разные роли реагируют по-разному, поскольку решают разные задачи чтения.

В объяснении пересмотра типографики команда рассказывает об обеспокоенности сообщества уменьшением мелкого текста и его последствиями для людей с нарушениями зрения. Для приведённых ниже значений следует ориентироваться на текущую реализацию; более ранняя статья объясняет причины изменений.

Для продуктовой страницы из этого следует, что стоит разделять два решения, которые часто принимают вместе. Акцидентному заголовку может требоваться меньший визуальный вес при сужении экрана. Инструкции, условия участия и абзацы основного текста по-прежнему должны читаться с комфортом. Если масштабировать все роли с одним коэффициентом, можно решить проблему заголовка ценой новой проблемы с основным текстом.

CSS-правило плавного масштабирования, которое можно проверить

Для крупного заголовка отправной точкой может стать такое иллюстративное правило:

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

При стандартном корневом размере 16px оно даёт около 32px при ширине области просмотра 390px, около 43px при 768px и 63px при 1440px. Полезное свойство здесь — наличие нижней и верхней границ размера текста.

В расчёте есть два перехода, которые стоит проверить. При ширине области просмотра менее 400px действует минимальный размер 32px. При ширине более примерно 1467px — максимальный размер 64px. Между этими границами каждые дополнительные 100px ширины увеличивают заголовок на 3px. Так правило легче понять: если около 900px в заголовке появляется неудачная дополнительная строка, можно сопоставить доступную ширину колонки с этой скоростью роста, а не наугад подбирать другой мобильный размер.

Рассматривайте формулу как вариант для проверки. На промежуточной ширине заголовок может расти быстрее своей колонки и получать лишнюю строку даже при расширении экрана. Прежде чем принять такую кривую, поставьте самый длинный настоящий заголовок рядом с настоящим изображением. Если промежуточное состояние не работает, уменьшите скорость роста или измените распределение ширины между колонками. Ручные переносы в каждом заголовке лишь создадут проблему дальнейшего сопровождения.

Наличие слагаемого в rem само по себе не гарантирует, что плавное правило пройдёт проверку увеличением текста. Масштабирование браузера меняет и доступное пространство области просмотра, и размер текста, а слагаемое, зависящее от ширины окна, может частично компенсировать увеличение. Проверяйте реальный результат при масштабировании и увеличенном размере текста по умолчанию. Требование состоит в том, чтобы содержание оставалось читаемым и доступным, а не просто в наличии относительной единицы в таблице стилей.

Сначала опишите неудобство, затем меняйте шрифт

Если заголовок кажется неудачным, определите, что именно вы видите. «Слишком крупный» и «слишком много строк» — разные проблемы. «Слишком тесный» может означать соприкасающиеся буквы, сближенные строки или весь текстовый блок, прижатый к изображению. Каждое наблюдение предполагает свою корректировку.

Прочитайте заголовок вслух, затем посмотрите, как строки делят фразу. Окончание строки на коротком связующем слове может нарушать естественный ритм чтения. Очень короткая последняя строка может выглядеть случайной. Ни то ни другое само по себе не означает проблему удобства использования, но оба обстоятельства помогают понять, почему аккуратная в остальном страница кажется незавершённой.

Затем на мгновение закройте окружающую графику. Если без неё заголовок воспринимается комфортно, проблема может быть в композиции, а не только в типографике. Край изображения способен зрительно сузить текстовую колонку. Насыщенная деталями иллюстрация может спорить с теми же словами, которые хорошо читались на пустом фоне.

Определите роль каждого уровня заголовков

Заголовок страницы, заголовок раздела и заголовок карточки выполняют разную работу. Первый обозначает основную тему. Заголовки разделов помогают ориентироваться в аргументации или предложении. Заголовки карточек позволяют различать повторяющиеся элементы. Они не должны масштабироваться одинаково интенсивно лишь потому, что набраны одной гарнитурой.

В примере с управлением проектами главный заголовок может быть выразительным. Раздел «Храните решения вместе с работой» должен оставаться заметным, не борясь за первоочередное внимание. Название карточки «История проекта» должно удобно сочетаться с её описанием. Если каждый уровень становится чрезмерно крупным на настольном экране, страница может напоминать набор рекламных баннеров.

Определите отношения между уровнями до выбора точных значений. Решите, какой уровень читатель должен увидеть первым, сколько текста он обычно содержит и появляется ли рядом с изображением. Затем проверьте самый длинный реалистичный пример каждого уровня. Типографическая система, работающая только с самым коротким заголовком, — демонстрация, а не надёжное правило для страницы.

Не пытайтесь размером компенсировать неясную формулировку. Фразу «Всё, что вам нужно» можно красиво набрать, но она всё равно не объяснит, чему посвящён раздел. Если читателю приходится просматривать каждый абзац, чтобы понять содержание страницы, для улучшения заголовков могут потребоваться более точные слова наряду с правильными интервалами.

Выделяйте текстовой колонке оправданную ширину

Переносы в заголовке зависят от выделенного ему пространства. Прежде чем уменьшать шрифт, проверьте контейнер. Боковые отступы, промежуток сетки, пустая колонка или неоправданно крупное изображение могут отнимать место у слов. Возможно, на большой ширине эти решения были уместны, но сохранились дольше, чем следовало.

Для вымышленного заголовка сравните два узких макета с одинаковой типографикой. В первом широкие боковые поля сжимают текст в тонкую колонку. Во втором поля скромнее, но согласуются с остальной страницей. Второй вариант может сделать заголовок спокойнее, вообще не меняя его размер или насыщенность.

На широком экране возникает обратная проблема. Если растянуть название на всю страницу, оно может превратиться в длинную горизонтальную полосу, ослабив связь с содержанием ниже. Максимальная ширина помогает сохранить выразительную форму текстового блока. Подбирайте её по настоящим заголовкам, а не считайте число символов гарантией определённой длины строки.

Помните, что буквы одного шрифта имеют разную ширину. Колонка, вмещающая двенадцать узких букв, необязательно вместит двенадцать широких. Значения в типографических единицах полезны как отправная точка, но основанием для оценки остаются отображённые слова. Это особенно важно, когда название бренда или технический термин нельзя разрывать.

Выбирайте диапазон масштабирования, а не бесконечный рост

Можно использовать несколько ступенчатых изменений размера или плавную шкалу. Оба подхода работают при разумных нижней и верхней границах. Важнее то, как ведёт себя заголовок между видами, которые вы специально спроектировали.

В уроке web.dev о типографике объясняется плавное изменение размера и даётся предостережение против использования одних только единиц области просмотра для текста. Здесь полезна и более широкая мысль: чтение зависит не только от выбора шрифта. Сохраняйте в размере относительную составляющую и проверяйте, что происходит, когда читатель меняет масштаб или настройки текста.

Проверьте середину диапазона. Заголовок может хорошо выглядеть при минимальном и максимальном размере, но между ними складываться в неудачный трёхстрочный блок. Корректировка колонки или скорости роста иногда эффективнее ещё одного резкого скачка размера. Правило должно оставаться достаточно понятным, чтобы его можно было поддерживать при изменении текста.

Уточняйте интервалы внутри текста и вокруг него

Межстрочный интервал: сохраняйте целостность фразы

Расстояние между строками помогает многострочному заголовку восприниматься как единое читаемое целое. Слишком малое расстояние может вызывать зрительное столкновение соседних строк, особенно в местах с высокими прописными буквами и нижними выносными элементами. Слишком большое способно так разъединить строки, что фраза станет похожа на несколько несвязанных подписей.

Сравнивайте настоящую форму букв, а не только цифры на панели стилей. Гарнитура с большой высотой строчных букв может выглядеть тесно при настройке, подходящей другому шрифту. В насыщенных начертаниях промежутки кажутся меньше из-за большего количества тёмного на странице. Знаки с диакритикой также могут выявить, что высоты строки, достаточной для исходного примера, на самом деле мало.

Для проверки используйте заголовок с прописными и строчными буквами и знаками препинания. «WORK BETTER» плохо заменяет фразу со смешанным регистром, которая действительно появится на странице: такой образец скрывает несколько важных особенностей букв. Если страница поддерживает несколько языков, со временем проверка заголовков должна охватить и соответствующие системы письма.

Отдельно оценивайте расстояние под заголовком. Увеличивая межстрочный интервал ради большего отступа перед абзацем, вы меняете внутреннее устройство заголовка и можете получить неверный эффект. Задайте собственное значение промежутку между заголовком и абзацем и проверьте, сохраняется ли ощущение связи между ними.

Межбуквенный интервал: сохраняйте узнаваемую форму слов

Межбуквенный интервал требует внимания, если заголовок кажется сжатым, хотя строкам хватает места. Сильный отрицательный интервал может эффектно смотреться в крупной статичной композиции, а при уменьшении делать чтение неудобным. Одна и та же настройка также может выглядеть по-разному в более лёгком и более насыщенном начертании.

Начните с обычных интервалов гарнитуры и сравните небольшие изменения. Посмотрите на сочетания округлых букв, диагональных штрихов и повторяющихся вертикалей. Не оценивайте только первое слово. Корректировка, которая делает слово «спокойный» свободнее и удобнее для чтения, может сделать другую часть фразы слишком рыхлой.

Сохраняйте зрительную целостность слов. Чрезмерный положительный интервал способен замедлить узнавание и превратить предложение в последовательность изолированных символов. Он также увеличивает общую ширину, потенциально создавая тот самый перенос, который вы хотели убрать. Если заголовок уже длинный, интервал и ширину колонки нужно оценивать вместе.

Не обращайтесь одинаково с заголовками, набранными прописными буквами и обычным регистром. Короткой надзаголовочной метке из прописных может подойти немного большее расстояние между буквами, а длинному заголовку с обычным регистром часто нужна более сдержанная настройка. Задача — поддержать роль текста. Стиль, скопированный с крошечной метки, редко становится удачным правилом для главного заголовка.

Переносы: избегайте хрупких решений

Намеренный перенос строки может улучшить одну композицию, но сделать её негибкой. Если в заголовке об управлении проектами вставить перенос после слова «управлять», оставшиеся слова могут прекрасно смотреться на широком экране. На более узком первая часть уже может переноситься сама, создавая неожиданную дополнительную строку.

Прежде чем вставлять ручные переносы, попробуйте изменить ширину и масштаб. Если ручной перенос по-прежнему важен для дизайна, опишите условия его применения и проверьте поведение за их пределами. Не предполагайте, что перенос, выбранный для английского, должен сохраняться во всех переводах.

Не удерживайте длинную фразу на одной строке только ради предпочитаемой формы. Запрет любых переносов может вытолкнуть текст за пределы контейнера или потребовать нечитаемо мелкого размера. Ограничьте неразрывные сочетания случаями, когда разделение действительно вредит смыслу, например коротким значением с единицей измерения, и затем оцените оставшееся пространство.

Если последняя строка выглядит слишком короткой, подумайте, можно ли отредактировать сам текст без потери смысла. Удаление ненужного оборота способно улучшить и предложение, и его расположение. Но типографика не должна вынуждать удалять ограничение продукта, значимую оговорку или термин, необходимый читателю для понимания предложения.

Поддерживайте иерархию цветом и насыщенностью

Крупному заголовку не нужны одновременно все остальные способы выделения. Жирное начертание, плотные интервалы, яркий градиент и сильная тень могут конкурировать внутри одного текстового блока. Решите, какой приём обеспечивает заметность, и сдержанно используйте остальные.

На странице с красочной иллюстрацией чётче всего порядок чтения может задавать однотонный тёмный заголовок. Если дизайн предполагает мягкий градиент, проверьте, остаётся ли его светлая часть читаемой на фоне. Заголовок, ясный в полном размере, может потерять контраст при уменьшении или рядом с яркой графикой.

Прежде чем делать второстепенную информацию очень бледной, отделите её сочетанием размера, насыщенности и расположения. Более спокойный подзаголовок всё равно должен легко читаться. То же касается подписей и меток: почти невидимый текст не создаёт полезную иерархию, а лишает читателя информации.

Сравните страницу при беглом взгляде и внимательном чтении. Первый должен позволять определить главную тему. Второе — без усилий раскрывать вспомогательные подробности. Если все заголовки одинаково кричащие, уменьшение размера или насыщенности некоторых из них может помочь больше, чем добавление ещё одного акцентного цвета.

Проверяйте шрифт, который действительно загружается

Дизайн может измениться, когда нужный шрифт станет доступен или, наоборот, не загрузится. Из-за другой ширины букв могут поменяться переносы и сместиться соседнее содержимое. Состояние с резервным шрифтом должно входить в проверку: не следует считать, что все посетители сразу видят одинаковую типографику.

При проверке реализации выясните, какой шрифт фактически отображается и существует ли ожидаемое начертание. Запрос насыщенности, которой нет в файле, может дать непредусмотренный результат. Если заголовок выглядит необычно жирным или узким, проверьте файл шрифта, прежде чем компенсировать это изменением интервалов.

Ищите последствия изменения формы текста для макета. Скачет ли абзац вниз? Не накладывается ли бейдж на заголовок? Не обрезает ли первый экран фиксированной высоты последнюю строку? Такие наблюдения полезнее простого сообщения, что шрифт «выглядит иначе»: они указывают условия, к которым должен быть готов макет.

Резервный шрифт необязательно должен быть визуально идентичен фирменному, но страница с ним должна оставаться пригодной для использования. Оставляйте достаточно гибкости, чтобы иное число строк в заголовке не ломало раздел. Даже если точное воспроизведение фирменного шрифта важно, его приходится сочетать с реальными различиями в условиях загрузки.

Проведите компактную проверку заголовков

Выберите три заголовка: главный, длинный заголовок раздела и самое длинное типичное название карточки. Проверяйте их с окружающим содержимым, а не в изолированном образце. Посмотрите узкий, средний и широкий варианты, затем изменяйте ширину между ними, отслеживая резкие изменения.

В каждом варианте прочитайте фразу целиком. Проверьте, сохраняют ли переносы смысл, комфортны ли внутренние интервалы и остаётся ли заголовок отличимым от абзаца. Затем увеличьте масштаб браузера и повторите основную задачу чтения. Наблюдайте реальный результат, не считая, что конкретная техника задания размера гарантирует правильное поведение.

Используйте более длинный альтернативный заголовок как проверку пригодности к дальнейшим изменениям. Для вымышленной страницы замените название на «Более спокойный способ управлять проектами в распределённых командах». Вы не утверждаете этот текст, а выясняете, выдержит ли компонент разумную редакционную правку без индивидуальных исправлений.

Опишите решение обычными словами: «На узких экранах заголовок может занимать дополнительную строку; сохраняйте предложение целиком и позволяйте разделу расти». Это долговечнее попытки сохранить точное число строк с одного скриншота при любом размере. Такое описание объясняет следующему редактору, что важно для дизайна и что разрешено менять.

Формулируйте конкретную правку в OpenDesign

HTML-предпросмотр OpenDesign и виды для настольного компьютера, планшета и телефона помогают сравнивать один заголовок в разных макетах. Для точечной правки укажите заголовок и замеченное неудобство. Если проблема касается только интервалов или поддерживаемого стилевого свойства, может хватить ручного редактирования. Структурное изменение можно описать в чате вместе с ограничениями, которые нужно сохранить.

Например, попросите сохранить формулировку и гарнитуру, ослабить тесный межбуквенный интервал и разрешить заголовку дополнительную строку в узком варианте. Так правка останется посвящённой типографике. Расплывчатая просьба сделать весь первый экран «премиальнее» может изменить иллюстрацию, цвета и текст, оставив исходную проблему чтения нерешённой.

После изменения вернитесь ко всем трём заголовкам из проверочного набора. Общий стиль может затронуть больше элементов, чем тот заголовок, который вы рассматривали. Сравните соответствующие виды и убедитесь, что вспомогательный текст по-прежнему выполняет предназначенную ему роль.