Типографика в дизайн-системах: семантические токены и отзывчивое масштабирование. Часть 2

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

В статье пошагово разбираем, как:

• настроить переменные под разные брейкпоинты;
• связать стили с ролями (заголовки, текст, подписи);
• организовать масштабируемую типографическую шкалу.

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

Создание семантических типографических токенов в Figma

1. Создайте коллекцию семантических переменных 

Начните с создания коллекции семантических переменных (Semantic Type), в которой будут храниться все переменные, связанные с типографикой. Эта коллекция должна включать режимы Desktop, Tablet, Mobile — заранее определенные контрольные точки (брейкпоинты) для компьютеров, планшетов и мобильных, что обеспечит плавное масштабирование текстового контента на разных устройствах.

2. Определите переменную семейства шрифтов

Внутри коллекции Semantic Type добавьте строковую переменную для семейства шрифтов. Эта переменная должна ссылаться на соответствующий примитивный токен и применяться во всех контрольных точках.

3. Упорядочьте по ролям

Классифицируйте стили текста по их назначению, например:

• Display (для крупного, привлекающего внимание текста)
• Heading (для заголовков разделов)
• Subheading (для второстепенных заголовков)
• Body (для основного текстового контента)
• Caption & Label (для небольших текстовых элементов, таких как сноски и подписи полей форм)

4. Определите размеры шрифтов в рамках каждой роли

Внутри каждой роли создайте подгруппу для разных размеров шрифта, например:

• XL (самый крупный)
• L (крупный)
• M (средний)
• S (мелкий)

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

5. Настройте переменные для типографических свойств

Для каждого размера (XL, L, M, S) определите следующие ключевые типографические переменные при помощи примитивных токенов:

• Font Weight (начертание): Присвойте переменным заранее определенные значения, такие как Regular, Medium, Bold.
• Font Size (размер): Установите размеры шрифта, соответствующие каждой типографической роли.
• Line Height (высота строки): Определите высоту строк, оптимизированную для удобства чтения в зависимости от размера шрифта.
• Letter Spacing (трекинг): Настройте интервалы для повышения разборчивости в зависимости от размера и регистра шрифта.

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

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

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

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

Начните с создания шкалы, которая описывает все вариации шрифта определенного размера. Здесь мы будем использовать XL. (Примечание: начальные размеры и значения могут быть произвольными, так как они будут обновляться позже.)

Обновите названия текстовых слоев, чтобы они соответствовали семантическим токенам, определенным в Figma, например, Heading/XL/Bold. Такое семантическое именование связывает текст с его функцией (заголовок, подзаголовок и т.д.), размером и начертанием шрифта.

Используйте плагин, например, Styler, чтобы сгенерировать текстовые стили на основе переименованных слоев.

Выбрав слои и запустив плагин, мы сгенерируем начальные текстовые стили для Heading XL.

Сейчас размер, начертание шрифта, трекинг и высота строк в стиле Heading XL определены неправильно. Чтобы исправить это, я изменил порядок, сделав приоритетным вариант Bold, а затем нажал на кнопку «Редактировать стиль», чтобы обновить настройки.

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

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

Закончив с начертанием, вы можете аналогичным образом настроить размер шрифта, высоту строки и межбуквенное расстояние, выбрав соответствующие семантические токены.

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

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

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

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

Заключение

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

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