Иерархия заголовков H1-H5. Как создавать навигацию размером

Почему мозг читает макет, а не текст

Исследования показывают: человеческий мозг распознаёт визуальную сцену задолго до того, как ты прочитал хоть слово и ты уже понял структуру страницы.

Мозг ищет якоря: что здесь самое большое? Самое тёмное? Самое тяжёлое по весу? Именно так работает иерархия заголовков. Не через смысл слов, а через размер и вес шрифта. Если иерархии нет, то мозг не знает, с чего начать.

Что такое типографическая иерархия на практике

Это система уровней, где каждый заголовок имеет свою роль, размер и вес. Как армейские звания, все знают, кто главный.

Стандартная система для лендинга или статьи:

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

Ещё один уровень иерархии: цвет

Размер и вес это не всё. Цвет усиливает иерархию.

Рабочая формула:

1. H1 #111111 (почти чёрный, максимальный контраст)
2. H2 #222222 (чуть мягче)
3. H3 #333333
4. H4#888888 (серый, приглушённый)
5. Body#555555

Один и тот же шрифт, одни и те же размеры, но цвет создаёт ощущение глубины. H1 буквально «выпрыгивает» с экрана, H4 уходит в тень.

Итог

Хорошая иерархия заголовков это не про красоту. Это про навигацию. Пользователь не должен думать, куда смотреть. Дизайн обязан вести его сам.

Большой → средний → маленький. Тёмный → серый → мягкий. Жирный → нормальный → лёгкий.

Это система. И как любая система она либо работает, либо нет. Середины не бывает

Подписывайся, каждую неделю такие же разборы про дизайн и инструменты, которые реально работают. А если хочешь качественный дизайн, то пиши в личку, мы реализуем его для твоего бизнеса.