Термины типографики в веб-дизайне — краткий глоссарий

Зачем разбираться в типографике

Шрифты влияют на читаемость, доверие и конверсию не меньше, чем цвета и фото. Если текст «режет глаз» или плохо читается с телефона, пользователь не дочитает до кнопки заявки.

Основные термины

Кегль (размер шрифта). Для основного текста на сайте обычно 16–18 px на мобильных. Заголовки строят по иерархии: H1 заметно крупнее подзаголовков.

Интерлиньяж (межстрочный интервал). Слишком плотный текст утомляет; для абзацев часто используют 1,4–1,6 от размера шрифта.

Контраст. Соотношение цвета текста и фона должно соответствовать нормам доступности — иначе страдают и люди с ослабленным зрением, и восприятие бренда.

Начертания. Regular для текста, Bold для акцентов. Не стоит использовать больше 2–3 начертаний одного семейства без необходимости.

Пара шрифтов. Часто комбинируют гротеск для интерфейса и акцентный шрифт для заголовков. Главное — единый стиль на всех страницах.

Веб-специфика

В браузере подключают веб-шрифты (Google Fonts, self-hosted). Каждое начертание увеличивает вес страницы — это влияет на скорость. Поэтому типографику согласуют с ускорением сайта.

Практический совет

Перед запуском проверьте текст на реальном телефоне: длинные абзацы, списки, формы. При редизайне типографику обновляют вместе с сеткой и цветами — так сайт выглядит цельно, а не «новый шрифт на старой вёрстке».