Заголовки придают тексту дополнительную структуру и помогают создавать типографическую иерархию. Без заголовков пользователи видят большие блоки текста, которые трудно воспринимать и понимать. Более того, такие массивы текста крайне сложно сканировать для быстрого поиска нужной информации.
Правильное оформление заголовков помогает разбить текст на логические разделы и улучшает пользовательский опыт. Это позволяет читателям быстро и легко находить информацию, которая им важна, а также пропускать менее актуальные части.
Заголовки (Headings)
Заголовки имеют несколько важных функций в дизайне, выходящих далеко за рамки эстетики. Основная функция заголовков — разделять содержимое на отдельные секции. Когда вводится новая важная идея или тема, заголовок показывает читателю, что тема меняется.
Визуальное указание на смену темы облегчает чтение и сканирование текста. Пользователи часто просматривают длинные тексты в поисках необходимой информации. Заголовки помогают им быстро определить нужные разделы, а также положительно влияют на SEO и доступность контента.
И наконец, заголовки вместе с подзаголовками формируют визуальную иерархию текста. Если читатель открывает страницу и видит только сплошной массив текста (особенно в цифровых продуктах), маловероятно, что он будет читать долго. Заголовки разбивают текст на части, делая контент менее устрашающим для пользователей.
Подзаголовки (Subheadings)
Подзаголовки используются двумя основными способами. Первый — непосредственно под основным заголовком или названием (в этом случае они называются подзаголовками статьи или субтитрами) для того, чтобы добавить больше контекста. Это часто встречается на платформах вроде Medium, где подзаголовок идёт сразу под заголовком статьи.
Второй вариант — когда подзаголовок используется отдельно, внутри текста, чтобы выделить важную подтему в разделе, который уже обозначен заголовком. Задача такого подзаголовка — облегчить сканирование текста и позволить читателю быстрее найти нужную информацию.
Не весь длинный контент обязательно содержит подзаголовки. Некоторые тексты используют несколько уровней подзаголовков (подзаголовки внутри подзаголовков). Решение о том, использовать ли подзаголовки и в каком количестве, следует принимать исходя из структуры контента. Если это улучшает восприятие материала — добавляйте их. Если нет — лучше оставить их вне текста.
Надзаголовки (Eyebrow headings)
Надзаголовок (также известный как kicker или бровь) — это короткая фраза, размещённая над основным заголовком или названием. Его задача — обеспечить дополнительный контекст и часто указать на то, что материал принадлежит определённой категории или серии статей.
Как правило, надзаголовки следует использовать только над основным заголовком текста. Не используйте их над обычными заголовками разделов внутри статьи, если у вас нет веской причины делать это.
Также помните, что с точки зрения типографической иерархии, пользователи, скорее всего, прочтут надзаголовок уже после основного заголовка и подзаголовка, если все три элемента хорошо оформлены. Обычно надзаголовки форматируются таким образом, чтобы не конкурировать за внимание с основным заголовком и подзаголовком, так как они содержат менее важную, третьестепенную информацию.
Масштаб (Scale)
Типографический масштаб имеет большое значение для визуальной иерархии дизайна. Не спешите и уделите время созданию гармоничного и функционального типографического масштаба для заголовков.
В HTML предусмотрено 6 уровней заголовков по умолчанию (от H1 до H6), однако на практике редко используются все 6. Самый большой заголовок (H1) обычно зарезервирован для названия статьи или страницы и на одной странице должен использоваться только один раз. Заголовок H2 подходит для обозначения разделов внутри текста, а H3 и, возможно, H4 — для подзаголовков этих разделов. Уровни H5 и H6 используются крайне редко в основном контенте, хотя могут применяться в боковых меню, сайдбарах или других специфических случаях.
Начинайте создавать масштаб от размера основного текста (body font size). Даже если вы не будете использовать все 6 уровней заголовков, стоит заранее продумать их размер, особенно если хотите добиться большей типографической контрастности. Сначала выберите коэффициент масштабирования, а затем рассчитайте размеры заголовков на основе этого коэффициента относительно размера основного текста.
Заглавный регистр (Title case)
Заглавный регистр часто используется для оформления заголовков во многих редакционных руководствах по стилю. В этом регистре каждое слово в заголовке начинается с заглавной буквы, за исключением служебных и второстепенных слов, которые пишутся строчными буквами. Однако определения того, какие именно слова считать «второстепенными», могут отличаться в разных руководствах по стилю.
Некоторые стилистические руководства рекомендуют разные типы регистра для разных уровней заголовков. Например, руководство APA рекомендует использовать заглавный регистр (title case) для заголовков первого и второго уровня и предложный регистр (sentence case) для третьего, четвёртого и пятого уровней.
Главное правило при работе с типографикой текста — сохранять согласованность. Если на одних страницах вы используете заглавный регистр, а на других нет, ваш продукт будет выглядеть неорганизованным и даже непрофессиональным.
В русском языке заголовочный регистр используется редко, так как противоречит правилам орфографии. В отличие от английского, где это норма для заголовков, в русском тексты традиционно оформляются с заглавной буквы только у первого слова (если нет имён собственных). Поэтому такой стиль встречается в основном в рекламе и неформальных текстах.
Предложный регистр (Sentence case)
В предложном регистре первая буква заголовка пишется заглавной, а все остальные слова, кроме имён собственных, остаются строчными. В результате заголовок выглядит как обычное предложение в тексте.
Использование предложного регистра в заголовках сильно варьируется в цифровых продуктах. Как правило, выбор регистра зависит от длины заголовков. Если ваши заголовки обычно длинные, предложный регистр может улучшить читаемость по сравнению с заглавным регистром, так как текст выглядит более естественно.