Типографическая иерархия — не декоративный приём, а функциональный инструмент управления вниманием. Она основана на принципе контраста: элементы разных уровней значимости должны отличаться по визуальному весу настолько, чтобы различие воспринималось мгновенно, без сознательного анализа.
Семь инструментов построения иерархии
Дизайнер располагает несколькими взаимозависимыми параметрами. Профессиональная работа с иерархией предполагает осознанное комбинирование всех семи — без опоры на один-два приёма.
1. Кегль (размер шрифта)
Наиболее очевидный инструмент иерархии. Разница между уровнями должна быть достаточной, чтобы воспринималась сразу — как правило, не менее 25–30% по размеру.
2. Насыщенность (вес)
Bold, SemiBold, Regular, Light. Переход между уровнями насыщенности даёт иерархию даже при одинаковом кегле. Шрифтовые семьи с расширенным набором начертаний открывают больше возможностей.
3. Гарнитура
Контраст между антиквой и гротеском — мощный иерархический сигнал. Классический приём: заголовки набираются антиквой, текст — гротеском (или наоборот).
4. Цвет и тон
Тёмный текст читается как приоритетный. Серый воспринимается как вспомогательный. Акцентный цвет (синий, красный) выделяет важное или интерактивное.
5. Пространство (отступы)
Белое пространство вокруг элемента сигнализирует о его важности. Заголовок с большим нижним отступом воспринимается как самостоятельная единица — не продолжение предыдущего блока.
6. Верхний регистр и трекинг
CAPS + расширенный трекинг создают эффект «рубрики» или «надписи». Этот приём традиционно используется для малых заголовков, подписей, категорийных меток.
Уровни типографической иерархии
В профессиональной практике принято выделять от трёх до шести уровней иерархии. Избыточная детализация (более шести) создаёт визуальный шум; недостаточная (менее трёх) — монотонность.
| Уровень | Роль | Типичный кегль (печать) | Типичный кегль (экран) |
|---|---|---|---|
| H1 — Главный заголовок | Привлечение внимания, определение темы | 36–72 pt | 32–64 px |
| H2 — Заголовок раздела | Структурирование крупных блоков | 24–36 pt | 22–32 px |
| H3 — Подзаголовок | Детализация структуры внутри раздела | 18–24 pt | 18–24 px |
| Основной текст | Ключевое содержательное сообщение | 9–12 pt | 15–18 px |
| Вспомогательный текст | Подписи, даты, метаданные | 7–9 pt | 12–14 px |
| Микрокопи | Дисклеймеры, сноски, юридические данные | 6–7 pt | 10–12 px |
Принцип масштабируемости
Профессиональная иерархическая система должна сохранять читаемость при любых размерах отображения. Для этого рекомендуется использовать модульные шкалы — математически связанные ряды размеров. Популярные коэффициенты:
- Major Third (1.25) — умеренная иерархия, подходит для информационных порталов и деловых изданий
- Perfect Fourth (1.333) — отчётливая иерархия, стандарт для большинства веб-проектов
- Golden Ratio (1.618) — выраженный контраст, используется в издательском дизайне и плакатном искусстве
- Major Second (1.125) — плавная, почти монотонная шкала для нишевых проектов с минималистичным подходом
«Хорошая иерархия — это предсказуемость. Когда читатель заранее знает, где искать заголовок, где — основной текст, а где — вспомогательные данные, он читает быстрее и с большим удовольствием.»
— Тимоти Самара, «Типографика для дизайнеров»Распространённые ошибки
- Недостаточный контраст между уровнями — H1 и H2 различаются всего на 2–3 px, и читатель не воспринимает их как разные уровни структуры
- Слишком много уровней — шесть и более размеров без чёткой логической системы создают визуальный хаос
- Применение Bold к целым абзацам — насыщенность как инструмент иерархии работает только при дозированном использовании
- Конкурирующие акценты — когда одновременно выделено несколько элементов одного уровня, иерархия разрушается
- Игнорирование белого пространства — без достаточных отступов даже правильно выстроенная шрифтовая иерархия теряет воздействие