Типографика в интерфейсах

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

Основы типографики в UI

Единая система заголовков и текста

У каждого уровня текста должно быть своё назначение: заголовок, подзаголовок, текст, подпись. У каждого уровня — свой размер, жирность, межстрочный интервал.

Контраст

Заголовок должен отличаться от основного текста (размер, насыщенность, цвет). Если всё выглядит одинаково — иерархия не считывается.

Читаемость

Используй шрифты без засечек, разумную длину строк (до 60 символов), достаточные межстрочные интервалы (в базовых шрифтах из Google Fonts межстрочку рекомендуется не изменять)

Размеры

Шкала размеров шрифта должна быть предсказуемой: например, 32 → 24 → 20 → 16 → 14 → 12.

Единый ритм

Выравнивай текст по базовой сетке. Следи, чтобы между строками, абзацами и блоками были равные и логичные отступы.

Чек-лист для проверки своего макета

• Заголовки отличаются о текста (по размеру, цвету, насыщенности)

• Есть единая шкала шрифтов

• Используется не более 2 гарнитур

• Текст легко читается (размер, межстрочный интервал, цвет)

• Внутренние и внешние отступы логичны и одинаковы между схожими блоками

• Все тексты выровнены по сетке и между ними нет визуального шума

• Цвета текста используются осознанно (например серый=второстепенный, а не просто “дизайнерский” выбор)