Типографская иерархия

01 Уровни текста #

Иерархия — это порядок, в котором глаз пользователя двигается по странице. Если её нет, человек не понимает, что главное, что второстепенное, и в итоге закрывает сайт.

• H1 — главный заголовок страницы. Один на странице. Самый крупный.
• H2 — раздел. Делит текст на большие блоки.
• H3 — подраздел. Внутри H2.
• Body — основной текст. Средний размер, читаемый интерлиньяж.
• Caption — подписи, сноски, мелкие пояснения.

Если убрать стили и посмотреть на текст — ты всё ещё должен понимать, что главное. Это и есть работающая иерархия.

02 Как построить иерархию #

• Разница размеров: H1 в 2–3 раза больше body. H2 — в 1.5 раза.
• Жирность: заголовки жирнее тела текста.
• Цвет: заголовки ярче, тело текста — нейтральнее.
• Пространство: вокруг заголовков больше воздуха, чем между строками.