Масштаб заголовков в лонгриде: баланс выразительности и ритма

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

Актуально на 28 августа 2026 года.

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

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

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

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

Для начала задайте размер основного текста, а затем стройте заголовки относительно него. На экране рабочий текст часто находится в диапазоне примерно 16–20 пикселей, но точное значение зависит от гарнитуры, длины строки и плотности интерфейса. Заголовок H2 может быть заметно крупнее основного текста, а H3 — лишь умеренно превосходить его. Универсальной шкалы нет: важнее последовательное соотношение.

Практичная стартовая схема для десктопного макета может выглядеть так: основной текст — 18 пикселей, H3 — 24 пикселя, H2 — 36 пикселей, H1 — 56 пикселей. Это не готовый стандарт, а точка для проверки. Если заголовок переносится на четыре строки, его размер или ширину колонки нужно пересмотреть. Если уровни различаются только на два-три пикселя, иерархия, скорее всего, будет слабой.

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

Представим лонгрид о создании фирменной гарнитуры. H1 может быть крупным и коротким: «Как разработать шрифт для бренда». H2 — «Исследование характера бренда», «Конструирование знаков», «Тестирование в макетах». H3 — «Выбор контраста», «Настройка пропорций», «Проверка кириллицы». В этой системе размеры поддерживают смысл: H2 открывает новый этап, H3 объясняет конкретное действие.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Можно, если крупный размер обозначает важный смысловой переход и используется редко. Такой приём уместен в журнальном, брендовом или визуально насыщенном лонгриде. Если крупными становятся все разделы, читатель теряет ориентиры, а статья начинает выглядеть как последовательность рекламных экранов.

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

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

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

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

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

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