Типографика
Типографика — оформление текста для удобного чтения и восприятия. Включает выбор шрифта, кегль, интерлиньяж, длину строки и модульную шкалу. Хорошая типографика делает интерфейс читаемым и формирует визуальную иерархию страницы.
Определение типографики
Типографика — искусство и набор правил оформления текста: выбор шрифта (гарнитуры), размера букв (кегля), расстояния между строками (интерлиньяжа) и расположения текста на странице. Цель — сделать чтение быстрым и комфортным, а смысл — считываемым с первого взгляда. В вебе типографика отвечает за 90-95% контента: пользователь приходит за информацией, и именно текст он читает. Грамотная иерархия заголовков, абзацев и подписей ведёт взгляд по странице и снижает когнитивную нагрузку. По исследованиям читаемости, оптимальная длина строки — 50-75 символов с пробелами.
Как работает и из чего складывается
Читаемость зависит от связки параметров. Кегль основного текста в вебе — 16-18px, интерлиньяж — 1,4-1,6 от кегля, чтобы строки не слипались. Контраст шрифта с фоном должен соответствовать стандарту доступности WCAG: минимум 4,5:1 для обычного текста. Модульная шкала задаёт размеры заголовков по коэффициенту (например, 1,25), и H1, H2, H3 строятся не на глаз, а по пропорции. Эти значения хранят как токены в дизайн-системе. Типографика — основа брендинга и любой разработки сайта, где текст несёт смысл.
| Параметр | Рекомендуемое значение |
|---|---|
| Кегль основного текста | 16-18px на вебе |
| Интерлиньяж | 1,4-1,6 от размера шрифта |
| Длина строки | 50-75 символов |
| Контраст к фону | от 4,5:1 (WCAG AA) |
Виды шрифтов и подходы
Шрифты делят на группы. Антиквы с засечками (serif) уместны в длинных текстах и придают солидность. Гротески без засечек (sans-serif) — стандарт интерфейсов за счёт чёткости на экране. Моноширинные применяют для кода и цифр. Акцидентные нужны для заголовков и логотипов, но не для абзацев. На практике берут 1-2 гарнитуры: одну для заголовков, одну для текста, иначе страница выглядит разнородно. Шкалу размеров строят по модульному принципу, чтобы переходы между уровнями заголовков были пропорциональными, а не случайными.
Метрики и пример
Качество типографики меряют скоростью чтения, доступностью и поведением: время на странице и глубину прокрутки. Мини-кейс: на странице блога кегль был 13px, интерлиньяж — 1,2, строка тянулась на всю ширину экрана в 1100px. После правки до 18px, интерлиньяжа 1,55 и ограничения колонки 680px среднее время чтения статьи выросло на 22%, а показатель отказов снизился на 9%. Текст стало физически легче читать. Хорошая типографика напрямую влияет на UX и удержание.
Связанные концепции
- UX — удобство продукта, на которое читаемость текста влияет напрямую.
- Дизайн-система — где шкала шрифтов и кегли хранятся как токены.
- UI — визуальный слой, частью которого является типографическая иерархия.
- Брендбук — фиксирует фирменные шрифты и правила их применения.
- Модульная шкала — система размеров заголовков по единому коэффициенту.
Частые ошибки
- Ставят мелкий кегль 12-13px на основной текст — пользователь щурится и уходит со страницы.
- Тянут строку на всю ширину экрана: при длине больше 90 символов глаз теряет начало следующей строки.
- Смешивают 4-5 разных шрифтов, и страница теряет цельность и выглядит непрофессионально.
- Берут серый текст #999 на белом фоне — контраст ниже нормы WCAG, и текст плохо читается.
Частые вопросы
Какой размер шрифта выбрать для сайта?
Для основного текста на вебе берут 16-18px — это комфортный минимум для чтения с экрана. Подписи и сноски — 13-14px, заголовки строят по модульной шкале от базового кегля. На мобильных размер не уменьшают: мелкий текст на телефоне читать ещё сложнее, чем на десктопе. Кегль 14px и меньше для абзацев — частая причина отказов.
Что такое интерлиньяж и каким он должен быть?
Интерлиньяж — это расстояние между строками текста. Для веба оптимальное значение — 1,4-1,6 от размера шрифта: при 16px это примерно 24px между строками. Слишком плотный интерлиньяж (1,1-1,2) сливает строки, слишком большой (выше 1,8) разрывает абзац визуально. Правильный интервал заметно ускоряет чтение длинных текстов.
Сколько шрифтов можно использовать на сайте?
Оптимально один-два: одна гарнитура для заголовков, одна для основного текста. Иногда добавляют третий моноширинный для цифр или кода. Больше трёх шрифтов делают страницу разнородной и замедляют загрузку, так как каждый шрифт — дополнительный файл. Разнообразие лучше создавать начертаниями одной гарнитуры: regular, medium, bold.
Что такое модульная шкала?
Модульная шкала — система размеров текста, построенная по единому коэффициенту, например 1,25. Базовый кегль 16px умножается на коэффициент, давая 20px, 25px, 31px для заголовков разного уровня. Так размеры связаны пропорцией, а не подобраны случайно, и иерархия выглядит гармонично. Шкалу удобно хранить как токены в дизайн-системе.
Влияет ли типографика на SEO?
Косвенно — через поведенческие факторы. Читаемый текст с правильным кеглем и интерлиньяжем удерживает пользователя дольше, снижает отказы и увеличивает глубину просмотра, а это сигналы для поисковика. Прямого фактора ранжирования по шрифту нет, но удобство чтения улучшает метрики, которые учитываются. Заказать дизайн с проработанной типографикой можно в BigPanda.