🔤 Типографика в дизайн системе ломается не на выборе шрифта, а на токенах
Пока у команды нет общей структуры, каждый экран собирается заново: где-то основной текст 14 px, где-то 16 px, где-то межстрочный интервал выставлен руками, где-то тот же жирный стиль выглядит иначе. В макетах это еще терпимо, а в разработке быстро превращается в хаос.
Олуватосин Обалана показывает практичный подход, как собрать типографику через примитивные и семантические токены и масштабировать ее на веб, планшет и мобильный в Фигме. Ценность статьи в том, что это не просто теория про читаемость, а пошаговая схема: как назвать токены, как разложить роли текста, как связать стили с переменными и переключать режимы без дублей.
Внутри:
– Какие принципы держат типографику в порядке: удобство, ясность, иерархия;
– Какие базовые требования по доступности стоит заложить сразу: размер текста, контраст, межстрочный интервал, масштабирование;
– Что такое примитивные токены и какие свойства туда выносить: семейство, вес, размер, межстрочный и межбуквенный интервалы;
– Зачем нужны семантические токены и почему они снимают ручные правки по всему продукту;
– Как назвать токены по иерархии, чтобы дизайнеры и разработчики говорили на одном языке;
– Как разложить роли текста: Display, Heading, Subheading, Body, Caption, Label;
– Как считать межстрочный интервал через коэффициенты для крупных и мелких размеров;
– Как настроить в Фигме режимы для разных экранов и не плодить отдельные стили под каждый размер.
➡️
Читать статью
———
💻
Курс по поиску работы 😍
Про дизайн
🔥
Вакансии дизайнерам
🎨
Референсы