Размеры заголовков на сайте: как выстроить адаптивную шкалу

Размеры заголовков на сайте лучше выстраивать как единую адаптивную шкалу, а не подбирать для каждого блока отдельно. Начните с базового размера текста, задайте несколько последовательных ступеней для H1–H6, проверьте контраст и длину строк, затем уменьшите крупные уровни на узких экранах без разрушения иерархии страницы.

Типографическая шкала показывает читателю структуру материала ещё до полного чтения. Самый крупный заголовок обозначает тему страницы, следующие уровни делят её на разделы и подразделы. Если H2 почти не отличается от основного текста, структура становится незаметной. Если каждый заголовок оформлен случайно, интерфейс выглядит непоследовательным, а пользователь хуже понимает приоритеты информации.

Единая система также упрощает работу дизайнера и разработчика. Вместо десятков уникальных значений команда использует ограниченный набор текстовых стилей. Это ускоряет сборку новых страниц, делает макеты предсказуемыми и помогает сохранять визуальный язык сайта при добавлении новых разделов, карточек, форм и рекламных блоков.

Размер шрифта — только один параметр заголовка. На восприятие влияют также насыщенность, межстрочный интервал, длина строки, расстояние до соседних элементов и гарнитура. Одинаковое значение в пикселях может выглядеть совершенно по-разному в геометрическом гротеске, гуманистическом шрифте или контрастной антикве.

Поэтому проверять нужно не абстрактную цифру, а готовый текстовый блок. Заголовок из двух коротких слов может хорошо выглядеть при крупном размере, тогда как длинная фраза на русском языке быстро превращается в четыре строки. В адаптивной типографике важен не только размер H1 или H2, но и то, как этот размер работает вместе с конкретным контентом.

Сначала определите базовый размер основного текста. Для большинства сайтов разумной отправной точкой может быть диапазон 16–18 пикселей на компьютере и смартфоне, но итог зависит от гарнитуры, высоты строчных знаков и сценария чтения. Новостная статья, интерфейс сервиса и промо-страница могут использовать разные настройки при одинаковой ширине экрана.

После этого назначьте роль каждому уровню. H1 должен встречаться как главный заголовок страницы и объяснять её содержание. H2 делит материал на крупные смысловые части. H3 раскрывает отдельный вопрос внутри раздела. H4–H6 нужны только при действительно глубокой вложенности; использовать их ради визуального уменьшения текста не стоит.

Удобнее всего строить шкалу от базового текста вверх с помощью постоянного коэффициента. Например, если основной текст равен 16 пикселям, можно последовательно умножать значения примерно на 1,2–1,3. Такая модульная шкала создаёт заметную, но не резкую разницу между уровнями. Это не обязательный математический закон, а способ избежать случайного набора размеров.

Диапазоны намеренно пересекаются: подходящий размер зависит от гарнитуры и назначения блока. На сайте с плотным интерфейсом H2 может быть ближе к 28–32 пикселям, а на обложке лендинга H1 может быть значительно крупнее. Главное — сохранить визуальное различие уровней и не создавать слишком много почти одинаковых стилей.

Маленький коэффициент подходит для интерфейсов, где на экране много элементов и важна экономия пространства. Более заметный шаг уместен в редакционных материалах и презентационных блоках, где заголовки должны быстро сканироваться. Если H1, H2 и H3 отличаются только на несколько пикселей, иерархия будет слабой. Если каждый переход почти удваивает размер, композиция станет неустойчивой.

Набор вроде 48, 43, 37, 31, 27 и 22 пикселя может выглядеть аккуратно в одном макете, но плохо масштабироваться при изменении шрифта или контента. Системная шкала задаёт логику, которую легче пересмотреть целиком. Если базовый текст изменился с 16 до 17 пикселей, связанные уровни можно скорректировать последовательно, а не искать десятки независимых значений.

На мобильном экране крупный заголовок занимает больше строк, поэтому его размер обычно уменьшают. Это особенно важно для H1, который часто содержит длинное название страницы. При этом не нужно превращать все уровни в один почти одинаковый размер: мобильная шкала должна быть компактнее, но сохранять ту же последовательность приоритетов.

Практичный способ — задать отдельные значения для широкого и узкого экрана, а промежуточные размеры сделать плавными. В CSS для этого часто используют функцию clamp: она позволяет определить минимальный, предпочтительный и максимальный размер. Такой подход уменьшает резкие скачки между брейкпоинтами и помогает заголовку постепенно подстраиваться под ширину viewport.

Универсальной шкалы для всех сайтов не существует. Контентный блог требует комфортного чтения и спокойной иерархии, продуктовый интерфейс — компактности, а лендинг — выразительного первого экрана. Ниже приведены стартовые сценарии, которые можно адаптировать под выбранную гарнитуру и длину текстов.

Эти значения не следует переносить в проект механически. Например, шрифт с высокой высотой строчных знаков будет казаться крупнее при том же кегле. Если заголовок занимает слишком много места, сначала попробуйте изменить ширину текстового контейнера, насыщенность или формулировку. Уменьшение размера — не всегда лучший первый шаг.

Для однострочных заголовков межстрочный интервал почти незаметен, но для двух и более строк он определяет ритм всего блока. Чем крупнее заголовок, тем меньше относительный интервал обычно требуется, однако слишком плотные строки начинают визуально сливаться. У многострочного H1 нужно проверять не только первую строку, но и расстояние между последней строкой и следующим элементом.

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

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

Определите размер и межстрочный интервал основного текста для главного сценария чтения. Не ориентируйтесь только на привычное значение: проверьте, как выглядят кириллица, цифры, знаки препинания и ссылки именно в выбранной гарнитуре.

Сформируйте ограниченное число стилей и опишите их назначение. Для большинства страниц достаточно H1, H2 и H3, а дополнительные уровни подключаются только при необходимости. Не используйте заголовочный тег исключительно ради визуального размера: семантика должна соответствовать структуре документа.

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

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

Отдельная ошибка — пытаться решить проблему плохого заголовка только настройкой шрифта. Иногда причиной служит неудачная формулировка, лишнее слово или слишком узкий контейнер. Сначала определите, что именно мешает: масштаб, перенос, отступ, насыщенность или композиция. Такой порядок помогает не разрушить всю типографическую систему ради одного проблемного блока.

Фиксированного универсального размера H1 нет. На широком экране часто начинают с диапазона 40–56 пикселей, а на мобильном уменьшают его примерно до 32–40 пикселей. Итоговое значение выбирают по гарнитуре, длине заголовка, ширине контейнера и роли первого экрана.

Да, крупные уровни обычно адаптируют для узких экранов. Уменьшение помогает контролировать переносы и высоту страницы, но пропорции и различия между уровнями нужно сохранять. Если мобильные H1, H2 и H3 становятся одинаковыми, пользователь теряет ориентиры в структуре контента.

Можно, если различие между уровнями выражено другими средствами, например отступами, насыщенностью или композицией, но это усложняет восприятие. В большинстве материалов лучше оставить заметную разницу хотя бы в размере или визуальном весе, чтобы H3 воспринимался как подраздел H2.

Для заголовков обычно используют более плотный интервал, чем для основного текста, но точное значение зависит от гарнитуры и количества строк. Начните с умеренного интервала, затем проверьте многострочные заголовки в реальном макете. Строки должны оставаться различимыми, а блок — визуально собранным.

Оба параметра связаны. Крупный шрифт усиливает акцент, но длинная фраза при этом может занять слишком много места. Если заголовок перегружает композицию, сократите формулировку или расширьте контейнер, а затем уже корректируйте размер и межстрочный интервал.

Нет. H1–H6 — это доступные уровни структуры, а не обязательный набор. Для обычной статьи часто достаточно H1, H2 и H3. H4–H6 оправданы в документации, справочных материалах и больших руководствах, где действительно есть несколько вложенных уровней содержания.

Хорошая шкала заголовков начинается с базового текста, строится по понятному принципу и проверяется на реальных фразах в разных ширинах экрана. Учитывайте не только кегль, но и гарнитуру, насыщенность, переносы, межстрочный интервал и расстояния между блоками. Создайте собственную типографическую систему, а затем протестируйте её на всём сайте.

Если вы подбираете гарнитуру для сайта или хотите проверить, как кириллица выглядит в разных начертаниях, создайте шрифт на fontgenerator.ru и используйте его в своей адаптивной типографике.