Типографическая иерархия — это организация текстового содержания по уровням значимости с помощью визуальных атрибутов шрифта: размера, насыщенности, начертания, межбуквенного расстояния, цвета и пространственного положения. Хорошо выстроенная иерархия работает бессознательно: читатель следует её логике, не замечая механизма.
Инструменты создания иерархии
Типограф располагает несколькими группами инструментов для создания иерархических различий между текстовыми элементами:
| Инструмент | Применение | Интенсивность сигнала |
|---|---|---|
| Размер кегля | Основное разграничение уровней | Высокая |
| Насыщенность (Bold/Regular) | Выделение внутри уровня | Средняя |
| Гарнитура | Разграничение семантических зон | Высокая |
| Межбуквенный интервал | Тонкая настройка воспринимаемого ритма | Низкая |
| Цвет | Акцент и категоризация | Средняя–Высокая |
| Пространство (отступы) | Группировка и разрыв | Высокая |
| Регистр (КАПС) | Маркировка служебных элементов | Низкая–Средняя |
Система уровней заголовков
Стандартная редакционная типографика работает с четырьмя уровнями заголовков. Каждый уровень должен быть однозначно различим от соседних. Ниже представлена практическая шкала кеглей для основного текста 16–18 пунктов:
H1 — Playfair Display 48px
Главный заголовок страницы. Используется один раз.
H2 — Roboto Slab 36px
Заголовки крупных разделов материала.
H3 — Roboto Bold 24px
Подразделы внутри секций, поддерживают H2.
H4 — Roboto Bold 18px
Локальные заголовки: подписи к таблицам, карточки.
Типографическая шкала
Типографическая шкала — это упорядоченный набор кеглей, связанных математическим соотношением. Исторически сложившиеся шкалы основаны на системе музыкальных интервалов. Современные дизайн-системы чаще используют модульные шкалы с фиксированным коэффициентом:
- Minor Second (1.067): Очень тонкие шаги, подходит для плотных интерфейсов
- Major Second (1.125): Умеренный ритм, используется в корпоративных системах
- Minor Third (1.2): Выразительный, хорошо работает для редакционного контента
- Major Third (1.25): Баланс контраста и связности, популярен в digital-издательствах
- Perfect Fourth (1.333): Четко выраженный ритм, характерен для дизайн-системных документов
- Golden Ratio (1.618): Максимальный контраст, используется в editorial с крупным кеглем
Пространство как элемент иерархии
Закон Гештальта о близости (proximity) гласит: элементы, расположенные близко друг к другу, воспринимаются как принадлежащие одной группе. В типографике это означает, что отступ между заголовком и последующим текстом должен быть значительно меньше, чем между этим же заголовком и предыдущим блоком. Эта асимметрия пространства — один из ключевых механизмов типографической иерархии.
"Пространство в типографике — не отсутствие содержания. Это активный элемент дизайна, управляющий вниманием, ритмом и воспринимаемым весом текста."
— Ян Чихольд, «Асимметричная типографика», 1935Модульная сетка и вертикальный ритм
Профессиональная полиграфическая и редакционная верстка строится на модульной сетке. Основная единица вертикального ритма — базовый интерлиньяж основного текста. Все вертикальные отступы: пространство над и под заголовками, отступы в списках, паддинги карточек — кратны этой единице.
Для основного текста 18px с интерлиньяжем 1.6 базовый модуль равен 28.8px (примерно 29px). Заголовок H2 размером 36px для сохранения ритма должен занимать высоту, кратную 29px: 58px (2 модуля), 87px (3 модуля) и так далее, с соответствующей корректировкой интерлиньяжа.
Иерархия в цифровых интерфейсах
В веб-типографике иерархия работает в дополнительном измерении: адаптивность. Кегли, оптимальные для десктопа (H1 48–52px), на мобильных устройствах (ширина ~375px) должны уменьшаться до 32–36px, иначе заголовок займёт несколько строк и нарушит баланс страницы. CSS Custom Properties и функции clamp() позволяют создавать плавно адаптирующиеся типографические шкалы без использования многочисленных медиазапросов.