Как выбрать набор начертаний для большой дизайн-системы

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

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

Избыточный набор начертаний увеличивает число решений для дизайнеров и разработчиков. Если в библиотеке есть Light, ExtraLight, Book, Regular, Medium, Semibold, Bold, ExtraBold и Black, команда начинает использовать их непоследовательно. В результате один и тот же уровень интерфейса выглядит по-разному в разных продуктах. Хорошая система ограничивает выбор, объясняет назначение каждого начертания и оставляет возможность масштабирования.

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

Вес определяет плотность штрихов и визуальную иерархию. Regular обычно используется для основного текста, Medium или Semibold — для кнопок, коротких заголовков и выделений, Bold — для сильного акцента. Лёгкие начертания полезны в крупных заголовках на подходящем фоне, но часто теряют читаемость в небольших размерах, на слабом экране или при плохом освещении. Поэтому Light не должен становиться обязательной частью интерфейсной системы без проверки.

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

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

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

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

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

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

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

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

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

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

После тестирования переведите решения в типографические токены: например, Body Default, Label Strong, Heading Medium или Data Tabular. Токен должен описывать назначение, а не только числовой вес. В документации укажите допустимое начертание, размер, межстрочный интервал, пример использования и запрет на самостоятельное изменение. Так набор становится частью дизайн-системы, а не коллекцией файлов.

Представим сервис с веб-кабинетом, мобильным приложением, аналитическими отчётами и справочным разделом. Для него можно начать с Regular для основного текста, Medium для меток и элементов управления и Semibold для заголовков и ключевых действий. Если в таблицах много числовых данных, добавьте табличные цифры или отдельную настройку цифр. Курсив понадобится только при наличии редакционных материалов или специальных терминов.

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

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

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

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

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

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

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

Опишите начертания через семантические токены и примеры компонентов. Название «Body Strong» лучше связывает решение с задачей, чем просто «600», потому что команда понимает назначение. Ограничьте свободный выбор в библиотеке компонентов, добавьте правила для локализации и регулярно проверяйте, не появились ли новые веса без согласованной роли.

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

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