Роли текста в дизайн-системе: заголовки, подписи, метки и числа

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

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

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

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

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

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

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

Практический пример: экран аналитики может содержать заголовок «Продажи», подзаголовок «Динамика за текущий период» и названия виджетов «Выручка», «Заказы», «Средний чек». Для каждого уровня достаточно одного устойчивого текстового стиля. Не стоит создавать отдельный размер для каждого виджета, если его смысловая роль совпадает с другими.

Подпись сопровождает другой элемент и отвечает на вопрос «что это означает?» или «что нужно ввести?». К этой роли относятся названия полей, пояснения под формой, подписи к изображениям и короткие инструкции. Подпись должна быть короче основного текста, но не настолько компактной, чтобы пользователь был вынужден угадывать смысл.

Для формы адреса подпись «Индекс» понятна не всем сценариям, если рядом нет пояснения о формате. Более полезный вариант — «Почтовый индекс, например 620000». При этом пример не должен подменять название поля: подпись идентифицирует данные, а placeholder показывает возможный формат ввода.

Метка, или label, — короткий текстовый идентификатор объекта или состояния. Это может быть статус «В обработке», категория «Новинка», фильтр «Для команды» или обозначение уровня доступа. Метки читают быстрее абзацев, поэтому в них важны краткость, однозначность и согласованный словарь.

Цвет метки усиливает смысл, но не должен быть единственным способом его передать. Статус «Оплачено» должен оставаться понятным и без зелёного фона, например при слабом зрении или монохромной печати. Для одинаковых состояний используйте одинаковые формулировки: не смешивайте «Завершено», «Готово» и «Выполнено» без смысловой причины.

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

В карточках тарифов крупная цена может быть главным акцентом, а подпись «в месяц» — второстепенным пояснением. В таблице сравнения, наоборот, одинаковое выравнивание чисел помогает сопоставлять строки. Если значения имеют разное количество знаков, используйте единый формат: например, не смешивайте «5», «5,0» и «5,00» без функциональной необходимости.

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

Рассмотрим карточку заказа в интернет-магазине. Название товара выполняет роль заголовка карточки, строка с артикулом — роль вторичной подписи, статус «Доставляется» — роль метки, цена — роль основного числа, а кнопка «Подробнее» — роль интерактивного текста. Такое распределение позволяет менять содержимое карточки, не разрушая её визуальную структуру.

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

Чеклист помогает проверить систему целиком, а не отдельный красивый экран. Его полезно применять при запуске нового продукта, редизайне и передаче макетов в разработку. Если на один из пунктов нет однозначного ответа, роль ещё недостаточно описана или требует отдельного компонента.

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

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

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

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

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

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

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