Перед нами полное название книги об Уленшпигеле — «Легенда о Тиле Уленшпигеле и Ламме Гудзаке, их приключениях — забавных, отважных и достославных во Фландрии и иных странах»:
Начнём с того, в чём функция заголовка. Заголовок — это один из самых важных элементов и на странице, и в интерфейсе, и в печатном издании. Заголовок обязательно должен быть. У вас не может быть страницы без заголовка. Заголовок призван помочь читателю мгновенно понять, где он оказался, зачем сюда попал и что здесь можно сделать. Отчасти это касается формулировки заголовка, а с точки зрения вёрстки из этого следует, что заголовок должен быть заметным, должен быть достаточно большим и массивным, чтобы было понятно, что он относится в целом ко всей странице.
Заголовок обычно крупный, поэтому с ним начинаются всякие проблемы с вёрсткой. Заголовок о Тиле Уленшпигеле очень многострочный. Если представить, что я попаду на страницу с таким заголовком, он займёт половину первого экрана, а то и весь первый экран страницы. Так делать не стоит, это неэкономно и вряд ли будет полезно для бизнеса.
Поэтому можно пробовать разные ухищрения, чтобы сделать супердлинный заголовок более компактным и удобным для использования.
Заголовку можно добавлять бирки.
Например, мы хотим сказать, что это книга. Если бы мы просто набирали заголовок, мы бы написали что‑то в духе: «Исторический роман „Легенда о Тиле Уленшпигеле и Ламме Гудзаке“». И опять получился бы очень большой длинный заголовок:
Вместо этого делаем слова «исторический роман» аккуратной биркой — получился составной заголовок:
Бирка помогает понять, что это такое, но при этом выглядит гораздо компактнее.
Бирка всегда стремится быть контрастной по отношению к заголовку. Если заголовок набран жирным, бирка не жирная.
Можно сделать с точностью до наоборот, и тоже будет хорошо. Правда, в этой ситуации хочется посмотреть, может быть, бирку сделать помощнее:
Иногда, для поддержки стиля бирку можно набрать какой‑нибудь капителью, правда, тогда неуместна жирность, на мой взгляд:
Вопрос из зала: «Что такое капитель?»
Капитель — это капительные буквы.
Во многих качественных шрифтах есть капительные буквы, они по скелету очень похожи на прописные, но более компактные и используются для бирок, или, например, для набора аббревиатур в тексте.
Они более приплюснутые, чем заглавные, по вертикали и более удобные для некоторых целей, при этом сохраняют читаемость.
Бирку можно поставить на плашку:
Бирка не обязана быть абсолютно одна, это могут быть какие‑то теги:
Если нам почему‑нибудь позволительно так сделать и места хватает, мы можем сделать двойной заголовок:
Мы взяли два словосочетания, условно, которые не составляют единое предложение, и поставили их рядом. Получилась такая конструкция.
Если вы вдруг хотите сделать жирным или выделить что‑то внутри заголовка, так делать не надо. Я убрал «исторический роман» и сделал «легенду» жирным — это отстой:
Мы уже проговорили, что в нормальном куске текста делать выделение не стоит. Различайте, пожалуйста. Двойной заголовок — это два отдельных словосочетания, которые мы поставили рядом и выделили по‑разному.
Выделять части двойного заголовка можно самыми разными способами. Можно сделать жирно, дополнительно выделить цветом, использовать другой шрифт. Главное — помнить о том, что это два отдельных словосочетания.
Следующая история — это подзаголовок.
Помните длиннющее полное название книжки? Это тот случай, когда нам на помощь придёт подзаголовок. Превращаем его в подзаголовок и следим за переносами и за тем, чтобы ничто не влезло в интерлиньяж друг друга:
Где это очень хорошо применять? Если вы знаете, как обычно устроены наши названия юридических законов, то там эта история очень пригодится. Мы идём в правовую базу, где куча всяких законов. Найдём монструозный пример:
У этого закона длинное полное название, а по сути это просто закон о рекламе. В заголовок выносим «О рекламе», а остальное можно засовывать или в подзаголовок, или в бирку, или ещё как‑то по‑хитрому разделять. Но оставляя на поверхности самое главное.
Способы, которые я вам перечислил, можно комбинировать. Я добавил бирки — получился мегасоставной заголовок:
В некоторых случаях можно использовать маркеры. Маркеры — это графический объект, элемент, который призван или донести дополнительную информацию, или привлечь внимание к заголовку:
Это может быть картинка, иконка, фотография автора.
Давайте посмотрим примеры заголовков из реальности.
Вот пример мегасоставного заголовка — в одну строчку налили название самой статьи, подзаголовок и автора статьи:
Получилось довольно компактно. Может быть, местами шумно, но терпимо. Классный способ донести сразу кучу информации. Кстати, в дополнение внизу линейка с метаинформацией — считай, часть заголовка.
Вот шапка статьи из «Блумберга»:
Здесь в роли бирки выступает название раздела, в котором находится статья. Оно же является ссылкой: могу нажать и перейти в раздел. Дальше есть заголовок, подзаголовок и всякая метаинформация. Тоже очень хорошо разложено по полочкам. Зайдя в статью, я это всё могу прочитать и сразу понять, где я оказался и зачем мне эту статью читать.
Вот пример заголовка:
Здесь в плане конструкции всё очень легко. Мы просто говорим: вот заголовок, а вот подзаголовок. Но обратите внимание, как заголовок и подзаголовок работают в паре с точки зрения смысла. Мы в заголовке задаём вопрос, ещё не объясняем читателю, куда он попал, мы немножко интригуем его, чтобы заинтересовался. А в подзаголовке уже объясняем: «Вы уверены, что у вас всё хорошо? Вот вам сервис, чтобы это всё проверить». Дальше идёт промостраница, на которой всё это объясняется.
Вот пример статьи на «Гардиана»:
Здесь сложная составная бирка: и основная рубрика, и что это посвящено Дональду Трампу. Ниже — заголовок, автор. Подзаголовок со своей подписью стоят ещё ниже. Тоже может быть.
Кстати, в том же «Гардиане» на самой передовице эти конструкции объединяют в сплошной текст и разделяют слешами:
Жирным выделяют какую‑то одну часть составного заголовка, дальше дообъясняют, что тут такое. Меняют только цвет.
Ещё какой‑то заголовок с биркой. Здесь, правда, ребята выделили курсивом название фильма, не знаю зачем. Такое ощущение, что заставила редакционная политика, потому что другого объяснения я придумать не могу.
Вот пример составного заголовка на «Медузе»:
Здесь есть бирка, которая задаёт раздел, в котором мы находимся. Дальше есть первая часть заголовка, интригующая: смотрите, что мы тут собрали. А второй частью заголовка объясняют, что вообще такое происходит.
Обратите внимание, что две части заголовка не представляют собой связанные словосочетания. Они не связаны, как раз поэтому и набраны разными стилями.
Ещё один пример заголовка с биркой:
Здесь бирка очень сложная, составная. Здесь и автор, и дата, и просмотры, и комментарии. Всё вместе. В результате выглядит прикольно и аккуратно. Прямо тоже конструкция на вооружение — используйте.