Типографика в UI kit

Первая из серии заметок для веб-дизайнеров о том, каким должен быть UI kit. Решил собрать накопленный с 2000 года опыт. Слишком часто получается так:

Главное: должны быть ясны параметры текста и отступы между элементами (можно подписать сбоку) и некоторые состояния.

Учтите, отступы задаются от гaбарита элемента с учётом интерлиньяжа, а не от гaбарита букв. Ниже показан пример нижнего отступа в 16px, на котором видно, что отсчёт отступа начинается не от гaбарита букв:

Отступы и размеры текста можно задавать в разных единицах (см. ниже про сохранение пропорций). В большинстве случаев стоит использовать px.

Адаптивность типографики

Хотите, что бы на мобильных размерах вьюпорта текст и заголовки имели другой размер? Покажите в UI kit как это выглядит для определённых ширин. Вы ведь уже думаете о том, как интерфейс перестраивается от малых вьюпортов к большим и уже выбрали «точки перехода» (к примеру, 576, 768, 992, 1200)? Не обязательно показывать размерность для всех брейкпоинтов, часто хватает двух или трех.

Сохранение пропорций

Mожно использовать единицу измерения, зависящую от размера шрифта на теге html — rem:

• на узких вьюпортах (до 767px) считать, что на теге html размер шрифта 10px и, если где-то нужен размер 20px, указать там 2rem (10 × 2),
• для вьюпортов 768px более, считать, что на html будет размер шрифта 14px и эти же самые 2rem станут 28px (14 × 2).

Вокруг этого можно построить вообще всю систему отступов и получить пропорциональную адаптивность не только типографики, но других (почти всех) элементов.

Безусловно, это требует договоренности с верстальщиком.

Пример типографики

Пример очередности типографических элементов в UI kit в самом простом случае:

• заголовок 1-го уровня (сбоку можно подписать верхний и нижний отступы),
• парагрaф,
• парагрaф (должен быть ясен отступ между парагрaфами),
• маркированный список (ради отступа и буллитов (если отличаются от умолчания), можно с вложенными списками, если вы ультрапедантичны),
• парагрaф,
• нумерованный список (ради отступа),
• парагрaф,
• заголовок 2-го уровня (нужно знать отступ),
• парагрaф,
• заголовок 3-го уровня (нужно знать отступ, далее так же до 6-го уровня),
• парагрaф,
• любые варианты акцентного/малозначимого текста: лиды, вставки/врезки и всё прочее (опять-таки, с видимыми/измеримыми/указанными отступами).

Если проект требует, можно дополнить следующим:

• вставка таблицы (может иметь поясняющую подпись, см. тег caption),
• вставка картинки/видео (может иметь подпись, см. теги figure и figcaption),
• блочная цитата (с указанием автора или без, см. тег blockquote),
• список определений (см. тег dl),
• вставка блока кода (см. тег pre),
• маркерное выделение в строке (см. тег mark).

В контентном тексте стоит показать ссылку в состоянии покоя, а рядом сбоку — её состояния:

• наведение курсора,
• фокус (выделение ссылки при управлении с клавиатуры),
• ссылка активна (клик/тап/enter, но переход еще не произошел),
• ссылка посещалась ранее.

Проблемы в типографической части UI kit

Печально видеть несоответствия стайлгайда и контентных страниц. Чаще всего, это:

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

Следующая статья

Элементы форм в UI kit