Заголовки в типографике
Узнайте, как установить иерархию в тексте с помощью заголовков.
Заголовки придают тексту дополнительную структуру и помогают создавать типографическую иерархию. Без заголовков пользователи видят большие блоки текста, которые трудно воспринимать и понимать. Более того, такие массивы текста крайне сложно сканировать для быстрого поиска нужной информации.
Правильное оформление заголовков помогает разбить текст на логические разделы и улучшает пользовательский опыт. Это позволяет читателям быстро и легко находить информацию, которая им важна, а также пропускать менее актуальные части.
Заголовки (Headings)
Заголовки в тексте — это не просто украшение. У них как минимум четыре важные функции.
Разделение на смысловые блоки. Заголовок сигнализирует: тема закончилась, начинается новая. Читатель без усилий следит за структурой текста и понимает, где заканчивается одна мысль и начинается другая.
Навигация. Большинство пользователей не читают страницу целиком — они сканируют её в поисках нужного раздела. Заголовки становятся точками опоры, по которым легко ориентироваться и решать, стоит ли здесь задержаться.
Доступность и SEO. Экранные читалки используют заголовки, чтобы озвучить структуру страницы и позволить переключаться между разделами. Поисковые системы тоже учитывают заголовки, лучше понимая, о чём текст.
Визуальная иерархия. Сплошная стена текста пугает и утомляет. Заголовки разбивают массив на части, делая его дружелюбным и лёгким для восприятия. А связка заголовков разного уровня создаёт порядок, в котором интуитивно хочется читать.
Подзаголовки (Subheadings)
У подзаголовков две основные роли, и их легко перепутать.
Первый вариант — подзаголовок как уточнение заголовка. Он стоит сразу после основного заголовка статьи и добавляет контекст: уточняет тему, задаёт тон или раскрывает детали. Так часто оформляют статьи на Medium или в блогах — короткая строка под заголовком, которая отвечает на вопрос «о чём именно этот текст».
Второй вариант — подзаголовки внутри текста. Они работают как внутренние разделы: разбивают большую тему на подтемы, помогают читателю сканировать материал и быстро находить нужное. По сути, это заголовки следующего уровня, которые организуют пространство внутри раздела.
Не каждый длинный текст требует подзаголовков. Если структура простая и материал читается линейно, они могут быть лишними. А иногда нужны два-три уровня вложенности. Главный критерий — удобство восприятия. Если подзаголовки помогают читателю не потеряться — они уместны. Если текст и так прозрачен — не стоит добавлять их только «для красоты».
Надзаголовки (бровь, kicker)
Надзаголовок — это короткая фраза, которая стоит над основным заголовком. В газетах и на новостных сайтах его часто называют «бровью» за характерное положение «над» основным текстом. Его задача — дать дополнительный контекст: указать рубрику, серию статей или тему выпуска.
Например, если основной заголовок звучит как «15 способов увеличить конверсию», надзаголовок может уточнять: «Маркетинг» или «Гайды для начинающих». Это помогает читателю сразу понять, в каком разделе он находится и стоит ли вообще вчитываться.
Важно помнить о иерархии. Как бы красиво ни была оформлена «бровь», опытный глаз сначала выхватит основной заголовок, потом подзаголовок, и только затем — надзаголовок. Поэтому его не стоит делать слишком ярким или кричащим: это вспомогательный элемент, он не должен перетягивать внимание.
Где уместно. Только над главным заголовком статьи или раздела. Использовать «бровь» над каждым внутренним подзаголовком — плохая идея, если только у вас нет очень убедительного обоснования.
Типографическая иерархия и масштаб заголовков
Типографический масштаб — это продуманная система размеров заголовков, которая выстраивает визуальную иерархию и помогает читателю ориентироваться в тексте. Чем понятнее эта система, тем легче пользователю сканировать материал.
В HTML предусмотрено шесть уровней заголовков — от H1 до H6. Но в реальных проектах редко используют все шесть:
- H1 — самый главный заголовок страницы или статьи. На одной странице он должен быть только один.
- H2 — заголовки крупных разделов внутри текста.
- H3 и H4 — подзаголовки внутри разделов, если структура требует детализации.
- H5 и H6 в основном контенте почти не встречаются. Иногда они могут понадобиться в боковых панелях, футерах или сложных интерфейсах, но для рядовой статьи это избыточно.
Как строить масштаб. Лучше всего отталкиваться от размера основного текста (body text). Выберите коэффициент, в котором будут расти заголовки, — например, 1.25 или 1.333 (так называемые модульные масштабы). Умножая базовый размер на этот коэффициент, вы получите следующий уровень, и так далее. Это даёт неслучайные, ритмичные размеры, которые хорошо сочетаются друг с другом.
Даже если вы не планируете использовать все уровни, полезно заранее просчитать возможные значения — это пригодится, когда проект начнёт развиваться и потребует большей гибкости.
Заглавный регистр (Title case)
В англоязычной типографике существует практика оформлять заголовки в заглавном регистре (Title Case), когда каждое значимое слово начинается с прописной буквы. Служебные слова — предлоги, союзы, артикли — обычно остаются строчными, хотя конкретные правила могут отличаться в зависимости от выбранного стиля (APA, Chicago и другие).
Некоторые руководства рекомендуют использовать разные регистры для разных уровней заголовков. Например, APA предлагает заглавный регистр для заголовков первого и второго уровня, а для более глубоких уровней — другой подход.
Но для русского языка это неактуально. Наша орфография не предусматривает написание каждого слова в заголовке с большой буквы — это противоречит правилам. В русской типографике заголовки оформляются по обычному принципу: первое слово с заглавной, остальные со строчной (если среди них нет имён собственных). Title Case в русскоязычных текстах встречается крайне редко, в основном в рекламе или стилизациях под западный стиль.
Главное правило — единообразие. Если вы всё же решили использовать заглавный регистр в русскоязычном проекте (например, в брендинге), делайте это последовательно на всех страницах и уровнях заголовков. Непоследовательность разрушает типографическую систему и выглядит непрофессионально.
Предложный регистр (Sentence case)
В предложном регистре заголовок оформляется как обычное предложение: первое слово пишется с заглавной буквы, а остальные — строчными (за исключением имён собственных, которые сохраняют заглавные буквы по правилам орфографии). Это наиболее естественный для чтения вариант, особенно когда заголовки получаются длинными.
В цифровых продуктах выбор между предложным и заглавным регистром часто диктуется именно длиной заголовков. Если заголовки короткие — допустимы оба варианта. Но чем длиннее заголовок, тем сложнее воспринимать его в верхнем регистре: текст теряет привычный ритм, глаз спотыкается. В таких случаях предложный регистр работает лучше, потому что сохраняет естественное чередование прописных и строчных букв, к которому мы привыкли при чтении.
