Открой любой сайт, который тебе нравится. Твой взгляд сразу упал в одно место. Потом переместился в другое. Потом в третье.
Ты не решал, куда смотреть. Дизайн решил за тебя. Это и есть визуальная иерархия. И заголовки её главный инструмент.
Почему мозг читает макет, а не текст
Исследования показывают: человеческий мозг распознаёт визуальную сцену задолго до того, как ты прочитал хоть слово и ты уже понял структуру страницы.
Мозг ищет якоря: что здесь самое большое? Самое тёмное? Самое тяжёлое по весу? Именно так работает иерархия заголовков. Не через смысл слов, а через размер и вес шрифта. Если иерархии нет, то мозг не знает, с чего начать.
Что такое типографическая иерархия на практике
Это система уровней, где каждый заголовок имеет свою роль, размер и вес. Как армейские звания, все знают, кто главный.
Стандартная система для лендинга или статьи:
H1 заголовок страницы. 28–40px. Один на весь экран. Это первое, что видит пользователь. Отвечает на вопрос: «Куда я попал?»
H2 разделы. 20–24px. Делит контент на логические блоки. Пользователь сканирует H2, чтобы понять стоит ли читать дальше.
H3 подразделы и карточки. 15–17px. Детализация внутри блока. Часто это заголовки карточек, шагов, пунктов.
H4 метки и категории. 11–12px, ALL CAPS или увеличенный межбуквенный интервал. Лейблы, теги, подписи к секциям. Не бросается в глаза, но помогает ориентироваться.
Body основной текст. 14–16px. Читабельный, чуть приглушённый цвет. Никогда не конкурирует с заголовками.
Правило контраста: разрыв должен быть ощутимым
Между H1 и H2 должна быть пропасть, а не ступенька.
Хорошее соотношение это коэффициент 1.25–1.5 между каждым уровнем.
Вот рабочая система:
H1: 36px / weight 600
H2: 24px / weight 500
H3: 18px / weight 500
H4: 12px / weight 500, letter-spacing: 0.08em, uppercase
Body: 16px / weight 400
Ещё один уровень иерархии: цвет
Размер и вес это не всё. Цвет усиливает иерархию.
Рабочая формула:
- H1 #111111 (почти чёрный, максимальный контраст)
- H2 #222222 (чуть мягче)
- H3 #333333
- H4#888888 (серый, приглушённый)
- Body#555555
Один и тот же шрифт, одни и те же размеры, но цвет создаёт ощущение глубины. H1 буквально «выпрыгивает» с экрана, H4 уходит в тень.
Итог
Хорошая иерархия заголовков это не про красоту. Это про навигацию. Пользователь не должен думать, куда смотреть. Дизайн обязан вести его сам.
Большой → средний → маленький. Тёмный → серый → мягкий. Жирный → нормальный → лёгкий.
Это система. И как любая система она либо работает, либо нет. Середины не бывает