Как выстроить иерархию UI-текста по размеру и насыщенности

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

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

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

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

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

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

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

Для стартовой шкалы можно взять условные значения 32, 24, 20, 16, 14 и 12 пикселей. Это не универсальный стандарт, а рабочая отправная точка для макета. На мобильном экране крупный заголовок может быть уменьшен, а в аналитической панели — сохранен крупнее за счет свободного пространства. Проверяйте не только числа, но и реальную высоту строки, переносы и плотность соседних элементов.

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

Соседние уровни должны различаться, иначе система не считывается, но чрезмерный разрыв ломает цельность. Например, заголовок карточки можно сделать 20 пикселей с насыщенностью 600, описание — 14 пикселей с насыщенностью 400, а метку — 12 пикселей с насыщенностью 500. Их роль поддерживается не только размером, но и расстояниями.

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

Насыщенность шрифта, или weight, определяет толщину штрихов и визуальный вес текста. В интерфейсах часто встречается связка 400 для обычного текста, 500 для меток и второстепенных акцентов, 600 для заголовков компонентов и 700 для особо сильного выделения. Эти значения следует воспринимать как роли, а не как обязательную шкалу для каждой гарнитуры.

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

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

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

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

Используйте для заголовка 24 пикселя и насыщенность 600, для пояснения 14 пикселей и 400, для подписи поля 14 пикселей и 500, для введенного значения 16 пикселей и 400. Текст ошибки оставьте не обязательно самым жирным: его можно выделить цветом, расположением под полем и конкретной формулировкой. Например, сообщение Пароль должен содержать не менее одного специального символа полезнее, чем короткое Неверно.

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

Для кнопок и ссылок вес помогает показать интерактивность, но не должен скрывать различия между основным и вторичным действием. Основная кнопка может использовать 600, вторичная — 500 или 400 в зависимости от контраста и оформления. Отключенное состояние лучше обозначать сочетанием сниженного контраста и невозможности взаимодействия, а не только уменьшением размера текста.

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

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

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

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

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

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

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

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

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

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

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

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

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

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