Типографическая шкала в интерфейсе: как выбрать уровни

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

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

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

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

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

Базовый размер — отправная точка шкалы, а не универсальное правило для всего интерфейса. Для основного текста на веб-странице часто начинают с 16 пикселей, но итоговое значение зависит от гарнитуры, x-height, ширины колонки, контраста и расстояния до экрана. В мобильном интерфейсе тот же кегль может восприниматься иначе из-за плотности пикселей и сценария использования.

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

Шаг шкалы — это отношение соседних размеров. Если базовый размер равен 16 пикселям, коэффициент 1,25 даст последовательность примерно 16, 20, 25, 31, 39 и 49 пикселей. Коэффициент 1,125 создаст более плотный ряд: 16, 18, 20, 23, 26 и 29 пикселей. Это не готовые обязательные значения, а удобная математическая отправная точка.

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

Предположим, что интерфейс использует основной текст 16 пикселей. Для панели управления можно задать вспомогательный текст 14, основной текст 16, подзаголовок 18, заголовок блока 24 и заголовок страницы 32 пикселя. Такой ряд не обязан быть идеально математическим: функциональные требования иногда важнее строгого отношения между соседними значениями.

Для посадочной страницы можно использовать базовый текст 18 пикселей, подзаголовок 22, заголовок секции 32, крупный заголовок 48 и hero-уровень 64 пикселя. Но крупные значения нужно проверять по длине заголовка: строка из нескольких слов должна сохранять понятный перенос и не вытеснять главный призыв к действию.

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

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

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

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

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

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

После визуальной проверки назовите стили по смыслу, а не по числу. Название «heading-page» полезнее, чем «font-32», потому что роль сохраняется даже после изменения конкретного значения. Для каждого токена укажите семейство шрифта, размер, насыщенность, межстрочный интервал, межбуквенное расстояние и допустимые контексты использования.

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

Для плотных продуктовых интерфейсов обычно удобен небольшой шаг, например около 1,125–1,2. Для лендингов и редакционных страниц можно взять более выразительное отношение, например около 1,25–1,333. Коэффициент следует проверять на реальных заголовках и основном тексте: формула задаёт направление, но не заменяет визуальную настройку.

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

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

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

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

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

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

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