Типографическая шкала для интерфейса: размеры, интерлиньяж, трекинг

Зачем интерфейсу шкала, а не просто размеры

В любом продукте, который прожил больше года, рано или поздно появляется зоопарк кеглей: 13, 14, 15, 16, 17, 18 и 22 пикселя, причём 15 и 16 отличаются только тем, что их ставили разные люди в разное время. Пользователь не различает такие соседние размеры как разные уровни иерархии, он видит их как небрежность. Шкала решает именно эту проблему: она ограничивает выбор и делает каждую ступень заметно отличной от соседней.

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

Важно разделять размер и роль. Токен text-lg говорит о размере, токен heading-section — о назначении. На практике удобно иметь оба слоя: примитивы шкалы и семантические стили поверх них. Тогда смена размера заголовка секции не требует поиска по всему коду.

Базовый кегль и модульное соотношение

Отправная точка — размер основного текста. Для веба де-факто стандартом стали 16 px: это значение по умолчанию в браузерах, и именно на нём iOS Safari перестаёт автоматически увеличивать масштаб при фокусе в поле ввода. Для плотных рабочих интерфейсов — таблиц, админок, IDE — часто берут 14 px, но тогда стоит проверить читаемость длинных описаний и не опускать вспомогательный текст ниже 12 px.

Дальше выбирается соотношение, на которое умножается каждая следующая ступень. Классические варианты: 1,125 (большая секунда), 1,2 (малая терция), 1,25 (большая терция), 1,333 (кварта), 1,5 (квинта). Чем больше соотношение, тем драматичнее контраст между заголовком и текстом и тем быстрее размеры уходят в огромные значения.

Для интерфейсов обычно хорошо работают 1,2–1,25: при базе 16 px и соотношении 1,25 получаем 16, 20, 25, 31, 39, 49. Для редакционных страниц и лендингов уместны 1,333 и выше, потому что там заголовок должен держать композицию. Для мобильной версии соотношение часто делают меньше, чем для десктопа, — об этом ниже.

Модульная шкала — отправная точка, а не закон. Значения после расчёта стоит округлить до целых пикселей или до кратных 2 и 4, чтобы они дружили с сеткой отступов. 31,25 px никому не нужны; 32 px — нормально. Если какая-то ступень визуально не работает, её можно поправить вручную: шкала служит дизайну, а не наоборот.

• База: 16 px для контентных продуктов, 14 px — для плотных рабочих интерфейсов.
• Соотношение: 1,2–1,25 для UI, 1,333+ для редакционных страниц.
• Округление: до целых, лучше до кратных 2 или 4.
• Количество ступеней: обычно 6–8 хватает с запасом.

Интерлиньяж: разный для текста и заголовков

Межстрочный интервал зависит от размера кегля и длины строки. Для основного текста комфортный диапазон — 1,4–1,6 от кегля. WCAG 2.1 в критерии 1.4.12 «Text Spacing» требует, чтобы интерфейс не ломался, когда пользователь поднимает интерлиньяж до 1,5, — это хороший ориентир и для значения по умолчанию.

С ростом кегля относительный интерлиньяж нужно уменьшать. Заголовок 48 px с интерлиньяжем 1,5 разваливается на отдельные строки с огромными просветами. Для крупных заголовков обычно хватает 1,1–1,25, для дисплейных размеров иногда и 1,0. Простое правило: чем крупнее текст, тем меньше множитель.

Удобно задавать интерлиньяж не множителем, а абсолютной величиной, кратной шагу сетки: 16/24, 20/28, 24/32, 32/40. Тогда высота строки всегда попадает в ритм 4 или 8 px, а блоки текста легко выравниваются с иконками и компонентами. В CSS при этом можно оставить безразмерное значение — например, line-height: 1.5 — для наследования, а в токенах хранить пару «кегль/строка».

Длина строки влияет на интерлиньяж не меньше кегля. Широкая колонка требует большего интервала, иначе глазу трудно найти начало следующей строки. Ориентир для основного текста — 45–75 символов в строке; в CSS это удобно ограничить через max-width: 65ch.

Трекинг: когда его трогать

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

Первая — крупные заголовки. На больших кеглях стандартные интервалы выглядят разреженными, поэтому заголовкам от 32 px часто дают небольшой отрицательный трекинг: от −0,01 до −0,02 em. Вторая — мелкий текст и подписи: на 11–12 px буквы слипаются, и лёгкий положительный трекинг, около +0,01 em, улучшает различимость. Третья — текст в верхнем регистре: кнопки, оверлайны, метки. Заглавные буквы рассчитаны на соседство со строчными, и в сплошном капсе им нужен заметная разрядка, порядка +0,05–0,1 em.

Некоторые современные шрифты, например Inter, поставляются с рекомендациями по динамическому трекингу или с оптической осью в вариативной версии. Если шрифт поддерживает ось opsz, браузер может сам подстраивать рисунок под кегль через font-optical-sizing: auto — это эффективнее, чем ручная правка интервалов.

Задавайте трекинг в em, а не в пикселях: так он масштабируется вместе с кеглем. Фиксированные 0,5 px на 12 px и на 48 px дают совершенно разный визуальный эффект.

Адаптивность: шкала для разных экранов

Одна и та же шкала редко подходит и для 375 px, и для 1440 px. На мобильном экране заголовок 49 px съедает половину первого экрана и рвёт слова на переносы. Типовое решение — две шкалы с разными соотношениями: например, 1,2 для мобильных и 1,25 для десктопа при одинаковой базе 16 px. Основной текст при этом не меняется, растут только верхние ступени.

В CSS это удобно делать через clamp(): font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem) плавно увеличивает заголовок между двумя граничными значениями. Есть онлайн-калькуляторы fluid-типографики, которые считают такие выражения по двум точкам — минимальной и максимальной ширине вьюпорта.

У fluid-подхода есть важная оговорка: если размер завязан только на vw, пользовательское увеличение текста в браузере перестаёт работать, а это нарушение WCAG 1.4.4 «Resize Text». Поэтому в выражении всегда должна быть составляющая в rem, а граничные значения — тоже в rem, а не в пикселях. Тогда настройки шрифта по умолчанию у пользователя продолжают влиять на результат.

• Основной текст — фиксированный, в rem.
• Заголовки — через clamp() с rem-составляющей.
• Мобильное соотношение меньше десктопного.
• Проверка: увеличение до 200% в браузере не ломает вёрстку.

Как оформить шкалу в дизайн-системе

В макетах шкала живёт как набор текстовых стилей, в коде — как токены. Минимальный набор полей для каждого стиля: семейство, начертание, кегль, высота строки, трекинг. Иногда добавляют регистр и вариант цифр — например, font-variant-numeric: tabular-nums для таблиц и счётчиков, где цифры должны стоять ровными колонками.

Названия стилей лучше давать по роли: display, h1–h4, body, body-sm, caption, overline, code. Названия вроде «Заголовок 24 жирный» быстро врут: через полгода в стиле уже 26 px, а имя осталось прежним. Если стиль нужен с двумя начертаниями, заведите отдельный вариант, а не ставьте жирность вручную поверх.

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

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

Редакция Флагштока

Пишем об UX/UI-дизайне: исследования, интерфейсы, дизайн-системы и доступность.