Типографика в UI: как построить систему текстовых стилей

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

Почему типографика влияет на работу с продуктом

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

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

Сначала соберите образец с реальным текстом

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

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

1. Назначьте тексту роли

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

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

2. Выберите шкалу размеров под иерархию экрана

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

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

Начальная шкала для страницы проекта

Возьмём страницу проекта «Редизайн сайта весенней кампании». На ней есть описание, раздел «Сведения о проекте», бюджет 2 450 USD, поле «Название проекта» и кнопка «Сохранить изменения». Таблица задаёт стартовые размеры и высоту строки для такого экрана; окончательные значения зависят от выбранной гарнитуры.

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

3. Оценивайте читаемость в рабочем размере

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

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

4. Проверьте контраст, увеличение и перестроение текста

Критерий минимального контраста WCAG 2.2 на английском устанавливает отношение не менее 4,5:1 для обычного текста и 3:1 для крупного. Крупным считается текст от 18 pt или от 14 pt при жирном начертании — примерно 24 CSS px или 18,7 CSS px соответственно. Заметная подпись размером 16 px сама по себе не относится к крупному тексту. Тонкие штрихи могут оставаться трудными для чтения и при формально достаточном отношении.

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

В работающем интерфейсе проверьте увеличение текста до 200% без потери содержимого и функций, а также перестроение содержимого при ширине, эквивалентной 320 CSS px. Оба пояснения W3C доступны на английском. На нашей странице остаются доступны название, бюджет, поле, ошибка и сохранение. Обычный текст не должен требовать горизонтальной прокрутки. Для содержимого, которому действительно нужны два измерения, например таблиц данных, предусмотрены отдельные исключения; карточка с фиксированной высотой не становится таким исключением.

5. Сохраните стили и правила их применения в Pixso

Для повторяющихся ролей создайте текстовые стили с понятными именами. Примените их к характерным экранам, компонентам и состояниям. Базовые значения — гарнитуры, насыщенность, размеры и интервалы — отделяйте от смысловых ролей вроде body/default или field/error. Тогда в описании системы видно не только число, но и его назначение.

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

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

Собрать типографику своего экрана в Pixso →

6. Продумайте веб-шрифты, резервную гарнитуру и загрузку

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

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

Справочник @font-face на MDN на английском описывает подключение шрифтов в CSS. Проверьте реальные файлы и наборы символов в поддерживаемых браузерах. Согласуйте с разработчиком допустимый объём загрузки и измерьте его на характерном для аудитории соединении, включая ситуацию, когда основной файл недоступен.

7. Выбирайте параметры вариативных шрифтов осознанно

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

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

8. Включите локализацию в работу над типографикой

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

Если эти языки поддерживаются, включите длинное немецкое слово, короткую китайскую подпись и строку справа налево. Для русского сравните «1 файл», «2 файла» и «5 файлов», а также подпись с меняющимся числом. Решите, где кнопка растёт или переносится, а где нужен другой способ показать содержимое. Для длинных названий, переноса и многоточия задайте отдельные правила: полный текст должен оставаться доступным пользователю и вспомогательным технологиям. Не компенсируйте расширение перевода незаметным уменьшением всех букв.

9. Сочетайте гарнитуры через реальные роли

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

Иерархия нужна не ради украшения. Заголовок объясняет, какой раздел или решение следует дальше; вспомогательный текст даёт контекст, не споря с главным действием. Используйте свободное пространство и группировку, а не только увеличение кегля. Посмотрите, сохраняется ли порядок чтения на небольшом экране и при масштабе 200%.

10. Передайте разработчику воспроизводимую систему

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

Исправляйте компоновку, прежде чем уменьшать текст

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

На странице проекта сохраните размер основного текста, когда описание занимает больше строк. Раздел «Сведения о проекте» должен оставаться под ним; сумму 2 450 USD держите вместе. Под полем оставьте место для «Введите название проекта». Кнопка «Сохранить изменения» сдвигается вслед за содержимым, а не перекрывает ошибку. Именно эти правила позволяют одному экрану работать на разной ширине.

Материалы для дальнейшей работы

При разработке ориентируйтесь на WCAG 2.2 на английском. Чтобы связать текстовые роли с компонентами и командными правилами, используйте руководство по созданию и поддержке дизайн-системы. Дополнительные материалы на английском: примеры дизайн-систем, руководство по дизайн-токенам и процесс UI-дизайна.