UI-типографика

Особенности экранной типографики

Экран — принципиально иная среда для типографики по сравнению с печатью. Разрешение матрицы, субпиксельный рендеринг, вариативность экранного размера от 4 до 100 дюймов, динамический контент и пользовательская прокрутка — всё это меняет правила работы со шрифтом.

В UI-типографике «физической» единицей является пиксель, но уже с внедрением технологии Retina (2x, 3x плотность) и переменных шрифтов (variable fonts) традиционное мышление в пикселях устарело. Современный UI-типограф работает в единицах rem, px и vw — относительных величинах, позволяющих создавать гибкие, масштабируемые системы.

Type scale в дизайн-системах

Дизайн-система без типографической шкалы — это хаос. Большинство крупных компаний используют ограниченный набор из 6–9 размеров с математическим соотношением между ними. Google Material Design оперирует шкалой от 12 до 96 sp. Apple Human Interface Guidelines определяет 11 стилей от Caption до Large Title.

При самостоятельном построении шкалы рекомендуется коэффициент Major Third (1.25) или Perfect Fourth (1.333) — они дают достаточный, но не избыточный контраст между уровнями иерархии.

Шрифтовая пара для UI

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

Наиболее надёжные системные шрифты для UI: Inter, SF Pro (Apple), Roboto (Google), Segoe UI (Microsoft). Для заголовочных уровней при высоком кегле уместны шрифты с выраженным характером — DM Serif Display, Playfair Display, Fraunces.

Доступность: минимальные требования

WCAG 2.1 уровня AA устанавливает минимальный коэффициент контраста 4.5:1 для основного текста и 3:1 для крупного текста (от 18 pt / 14 pt Bold). Не менее важен минимальный размер кегля: 16 px для основного контента на мобильных устройствах, 14 px — для вспомогательных меток.