Как выстроить типографическую систему интерфейса

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

С чего начать выбор шрифта?

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

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

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

Как собрать шкалу размеров и ролей?

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

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

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

Как закрепить правила в дизайн-системе?

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

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

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

Как проверить систему на реальном экране?

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

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

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

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