Типографическая иерархия в дизайн-системе: от страницы до строки

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

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

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

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

Для каждой роли полезно зафиксировать не только визуальный стиль, но и смысловое назначение. Например, Page title используется один раз для названия экрана, Section heading обозначает крупный раздел, Card title описывает самостоятельный объект, Body отвечает за чтение, а Caption поясняет контекст. Такое именование лучше, чем наборы вроде «текст 1», «текст 2» и «текст 3»: оно помогает дизайнерам и разработчикам принимать одинаковые решения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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