Что такое типографическая иерархия
Типографическая иерархия — это система визуальных отношений между текстовыми элементами, которая сообщает читателю, что важно, что второстепенно и в каком порядке следует воспринимать информацию. Она работает по тем же законам, что и любая визуальная иерархия: бо́льшее воспринимается раньше меньшего, насыщенное — раньше лёгкого, контрастное — раньше нейтрального.
Хорошо выстроенная иерархия не требует от читателя сознательных усилий: он инстинктивно движется по странице в «правильном» направлении — от самого важного к деталям. Плохая иерархия заставляет глаз блуждать, создаёт когнитивную нагрузку и снижает эффективность коммуникации.
Шесть инструментов построения иерархии
1. Размер шрифта. Самый очевидный и мощный инструмент. Разница в 2–4 шага на типографической шкале создаёт чёткое разграничение уровней. Для трёхуровневой иерархии (заголовок / подзаголовок / основной текст) типичные отношения: 2rem / 1.25rem / 1rem или, в пикселях на десктопе, 40px / 24px / 16px.
2. Насыщенность (weight). Жирное начертание привлекает взгляд сильнее, чем лёгкое. Комбинация «крупный + светлый» может быть равна по воздействию «среднему + жирному», что даёт дизайнеру дополнительную степень свободы.
3. Цвет и тон. Насыщенный чёрный (#111 или #0a0a0a) для заголовков, средне-серый (#555 или #666) для подписей и мета-информации, светло-серый (#999) для вспомогательных элементов. Цветовой акцент — спарингли, только для самого важного CTA или ключевого термина.
4. Прописные и строчные. КАПС с трекингом +0.1em для рубрик, подписей к изображениям, меток категорий. Это создаёт визуальный уровень, который не конкурирует ни с заголовками, ни с основным текстом.
5. Позиция и отступы. Элемент, окружённый большим белым пространством, получает высокий визуальный вес — даже если его кегль невелик. Цитата в широком отступе с большим верхним и нижним полем «кричит» громче, чем рядовой абзац, набранный крупнее.
6. Шрифтовое семейство. Смена гарнитуры — самый «дорогой» иерархический сигнал: он немедленно маркирует элемент как принадлежащий другой категории. Используйте его осторожно и только при хорошо выстроенном паринге.
«Иерархия — это не украшение. Это инфраструктура. Читатель не должен думать, откуда начать читать.»
— Елена Дорошенко, главный редактор MireviaТипографическая шкала: математика иерархии
Профессиональные типографы используют музыкальные интервалы для построения шкал. Наиболее популярные: Major Third (1.25), Perfect Fourth (1.333), Perfect Fifth (1.5), Golden Ratio (1.618), Major Second (1.125) — для плотных информационных интерфейсов.
Пример: шкала Perfect Fourth от базового 16px даёт: 16 / 21.3 / 28.4 / 37.9 / 50.5 / 67.3. Каждый уровень в 1.333 раза крупнее предыдущего. Это создаёт ощутимый, но не чрезмерный контраст между уровнями — идеально для контентных сайтов и редакционного дизайна.
Уровни иерархии и их назначение
| Уровень | Элемент | Типичный кегль (desktop) | Функция |
|---|---|---|---|
| 1 | Display / Hero heading | 56–96px | Первое впечатление, брендинг, эмоциональный захват |
| 2 | H1 страницы | 36–48px | Определяет тему страницы / раздела |
| 3 | H2 раздела | 24–32px | Структурирует длинный материал |
| 4 | H3 подраздела | 18–22px | Детализирует структуру внутри раздела |
| 5 | Основной текст (body) | 15–18px | Основная передача информации |
| 6 | Подписи, мета, footnotes | 12–14px | Вспомогательный контекст |
| 7 | Метки, теги, CAPS-рубрики | 10–12px (CAPS) | Навигационная навигация по категориям |
Иерархия в UI: карточки, формы и навигация
В интерфейсном дизайне иерархия усложняется: у каждого компонента (карточка, форма, модальное окно, список) своя внутренняя иерархия, которая при этом должна быть согласована с глобальной иерархией страницы.
Правило трёх уровней для компонентов: заголовок компонента → основной контент → мета-информация/подпись. Это минимальная функциональная иерархия. Четвёртый уровень (например, тег категории) добавляется только при необходимости навигационного разграничения.
В формах иерархия решает задачу «ведения» пользователя через поля. Label > Input > Helper text > Error message — четыре уровня, каждый из которых должен быть мгновенно распознаваем. Label: 14px medium. Input: 16px regular. Helper: 13px regular, muted color. Error: 13px medium, error color.
Частые ошибки в построении иерархии
- Слишком много уровней. Более 4–5 чётких иерархических уровней на одной странице создают путаницу. Решение: объединить похожие уровни.
- Слабый контраст между уровнями. Разница в 2px между H2 и H3 неощутима. Минимальный шаг — 20% по шкале или смена weight.
- Иерархия цветом без размерного подкрепления. Цвет — слабый иерархический сигнал в сравнении с размером. Используйте цвет как дополнительный, а не основной инструмент.
- Игнорирование мобильного контекста. На мобильных устройствах дисплейные заголовки теряют власть. Для мобайла используйте clamp() и проверяйте контраст на реальных устройствах.
- Механическое применение CSS-умолчаний. Браузерный H1 (2em) и H2 (1.5em) — это не дизайн. Задавайте все размеры явно.
Тест иерархии: метод прищуренного взгляда
Профессиональный приём проверки иерархии: откройте страницу и прищурьтесь так, чтобы текст превратился в размытые блоки разного тона. Самый тёмный и крупный блок — это то, что читатель заметит первым. Если этот элемент — действительно наиболее важный, иерархия работает. Если первым бросается в глаза что-то второстепенное — вернитесь к пересмотру весов и размеров.