Первые макеты почти всегда выглядят аккуратно: крупный заголовок, спокойный абзац, пара подписей. Проблемы начинаются на третьем экране — когда появляются карточки с метаданными, таблицы, пустые состояния и мелкие подсказки рядом с полями. Если к этому моменту шкала кеглей не зафиксирована, дизайнер начинает «подкручивать» размеры на глаз. Через две недели в файле живут девять почти одинаковых размеров, и команда уже не понимает, какой из них канонический.
Выбираем отношение, а не абсолюты
Мы в So1omon чаще всего начинаем с модульной шкалы с отношением 1.25. Она даёт заметный, но не драматичный шаг: тело текста, подзаголовок и заголовок страницы различимы, при этом промежуточные ступени не спорят друг с другом. Отношение 1.2 мягче и подходит для плотных кабинетов; 1.333 — выразительнее для маркетинговых лендингов. Важно выбрать одно отношение на продукт и не смешивать шкалы «по настроению экрана».
Базовый кегль привязываем к условиям чтения. Для длинных текстов на светлом фоне комфортны 17–18 пикселей при интерлиньяже около 1.6. Для плотных таблиц допустимо опуститься на одну ступень, но тогда увеличиваем межстрочный интервал и контраст заголовков колонок. Мобильная версия редко требует отдельной шкалы: обычно хватает уменьшения верхних двух ступеней и сохранения тела текста.
Именование важнее магии чисел
Числа вроде 13.7 или 22.5 плохо живут в передаче. Лучше дать ступеням имена: caption, body, title-sm, title-md, display. В спецификации указываем и имя, и вычисленный размер, и допустимые начертания. Исключения — отдельным списком: например, «цена в карточке может использовать display только на витрине». Когда исключение описано, оно перестаёт размножаться по файлу.
Проверка на «третьем экране»
Перед тем как утвердить шкалу, собираем стресс-макет: список с фильтрами, карточку с тремя уровнями текста, форму с ошибками и пустое состояние. Если на этом экране хочется ввести новый кегль — шкала ещё сырая. Если всё читается за счёт веса, цвета и отступов — можно замораживать токены и идти дальше. Типографика должна выдерживать скуку реального продукта, а не только красоту первого экрана.
Отдельный совет: не решайте контраст заголовка только кеглем. Часто достаточно чуть увеличить вес или уменьшить ширину строки. Шкала остаётся короткой, а иерархия — ясной. Именно короткая шкала переживает рост продукта.