Очень частой ошибкой у начинающих дизайнеров является неверное оформление системы типографики в проекте. Блок с типографикой очень важный, ведь текст – это половина дизайна.
Как часто выглядит блок с типографикой в UI kit 😭 :
Казалось бы, собраны все стили, они аккуратно сгруппированы, но что здесь не так?
Необходимо помнить, что в реальной жизни и в больших проектах очень важна организация. Разработчикам будет проще работать с блоком типографики, если указать все основные параметры. Например, для заголовков, подзаголовков, основного текста и других текстовых элементов стоит указать их размер и контекст использования – написать "Заголовок h1, 64px", а при создании мобильных макетов нужно вынести подраздел со всеми шрифтовыми стилями для мобильной версии.
Высота динамического текстового блока в вебе определяется интерлиньяжем. Поэтому в дизайн-системе важно помимо прочего отобразить высоты строк.
Итого, получается несколько наиболее важных параметров: шрифт, контекст, размер, межстрочный интервал, начертание. Помимо этих параметров может также добавиться цвет или межбуквенное расстояние.
Вот как этот блок должен выглядеть в оптимальном случае:
Конечно, не во всех проектах может понадобиться такая развернутая система, т.к. иногда шрифтовых стилей не очень много или сам проект достаточно маленький (лендинг). Тогда блок с типографикой может принять и такой минималистичный вид:
Где искать вдохновение
В Figma есть целый раздел, где можно подсмотреть организацию чужих дизайн-систем: https://www.figma.com/community/category/design-systems
Figma Design System – в проекте наглядно отображен каждый блок дизайн-системы, можно позаимствовать организацию, методы описания стилей и их применение.
Text Styles Creator – плагин позволяет выделить все шрифты в проекте и автоматически создать шрифтовые стили в Figma. Очень удобно и экономит время.
Typography Style Guide – на десерт =) отличный плагин, который позволяет из созданных шрифтовых стилей автоматически сгенерировать блок с типографикой, где будут прописаны все характеристики:
Вот и все базовые знания, которые помогут организовать блок с типографикой просто, аккуратно и удобно для использования всеми членами команды.