x
 
Артём
16 июня 2014

Расскажите о вёрстке заголовков.



Заголовок — базовый элемент вёрстки.

Мы неслучайно рассматриваем заголовки сразу в трёх дисциплинах Школы стажёров: в «Типографике и вёрстке», «Интерфейсе и информации» и, конечно, «Тексте и редактуре». Заголовок задаёт конструкцию страницы, помогает воспринять смысл и решает информационные задачи автора.

Заголовок — не просто формальное резюме текста, иначе от него стоило бы избавиться как от лишнего повтора.

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

Заголовок мгновенно ориентирует в смысле — как навигационная табличка на двери. Это первый ключ к пониманию: «где я, куда я попал?». Эффективность инструкции, сложной схемы или интерфейсного экрана может зависеть от ясности и информативности заголовка.

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

Простейший заголовок — это крупная однородная надпись строчными буквами с прописной в начале и без точки в конце:

Жизнь и удивительные приключения Робинзона Крузо

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

  • Робинзон Крузо

    Роман Даниэля Дефо, впервые опубликованный в апреле 1719 года, названный по имени главного героя.

Если заголовок занимает несколько строк, необходимо избегать висячих союзов и предлогов и нелогичных переносов. Плохо:

Жизнь и удивительные
приключения Робинзона
Крузо

Хорошо:

Жизнь и удивительные приключения
Робинзона Крузо

Заголовок — синтаксически самостоятельный цельный элемент. Сегодня плохой тон визуально дробить его на части стилями:

Жизнь
и удивительные приключения
Робинзона Крузо

Этот приём подходит в редких случаях вроде книжного титула или плаката. Даже «безобидное» выделение жирным части заголовка в декоративных целях часто выдаёт любительскую вёрстку:

Жизнь и удивительные приключения Робинзона Крузо

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

Путешествия

Жизнь и приключения Робинзона Крузо

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

Бирка
Робинзон Крузо

История моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки

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

Подзаголовок

Путешествия: жизнь и приключения Робинзона Крузо

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

Двойной заголовок

Робинзон Крузо

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

Графика, маркер или знак

Заголовок обычно «накрывает» текстовый модуль, к которому относится, и принимает его форму. Это помогает отделить соседние модули и подсказать направление чтения. Горизонтальный блок с широким заголовком:

Жизнь и удивительные приключения Робинзона Крузо

Структура просветляет диалогический контекст, и это придает ему свое звучание, свой характер.

Генеративная поэтика основывается на совмещении взаимоисключающих принципов характерности и поэтичности.

Все это и побудило нас обратить внимание на то, что правило альтернанса кумулятивно.


Если длины заголовка не хватает, чтобы накрыть модуль, соседние модули по вертикали могут вступить в незапланированные связи и нарушить порядок чтения:

Структура просветляет диалогический контекст, и это придает ему свое звучание, свой характер. Генеративная поэтика основывается на совмещении взаимоисключающих принципов характерности и поэтичности.

Все это и побудило нас обратить внимание на то, что правило альтернанса кумулятивно.

Робинзон Крузо

↕︎

Структура просветляет диалогический контекст, и это придает ему свое звучание, свой характер.

Генеративная поэтика основывается на совмещении взаимоисключающих принципов характерности и поэтичности.

Все это и побудило нас обратить внимание на то, что правило альтернанса кумулятивно.


В таких случаях приходится дополнительно отделять модули, например линейками:

Структура просветляет диалогический контекст, и это придает ему свое звучание, свой характер. Генеративная поэтика основывается на совмещении взаимоисключающих принципов характерности и поэтичности.

Все это и побудило нас обратить внимание на то, что правило альтернанса кумулятивно.

Робинзон Крузо

Структура просветляет диалогический контекст, и это придает ему свое звучание, свой характер.

Генеративная поэтика основывается на совмещении взаимоисключающих принципов характерности и поэтичности.

Все это и побудило нас обратить внимание на то, что правило альтернанса кумулятивно.


Заголовок узкого вертикального модуля обычно переносится на несколько строк:

Жизнь и приключения Робинзона Крузо

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


При этом важно соблюдать правила переносов и не допускать чрезмерного количества строк в заголовке — это выглядит уродливо и ломает сетку любого сайта или издания:

Путешествия: жизнь, необыкновенные и удивительные приключения Робинзона Крузо, моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове

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


Спасают положение составные заголовки, выбор подходящего кегля и, конечно, редакционная политика:

Путешествия

Робинзон Крузо

История моряка из Йорка, прожившего 28 лет в полном одиночестве на необитаемом острове у берегов Америки

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


Способы сокращения заголовков
P. S.

Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.


Поделиться
Отправить

Комментарии

Эдуард Сафронский
7 октября 2016

Помогите разобраться. Из «Типографики и вёрстки» я не понял однозначно, что такое подзаголовок. Вроде бы можно сказать, что это подпись к заголовку 1-го уровня, но также можно сказать, что подзаголовки — это все заголовки начиная со 2-го.

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

Как вы справляетесь со связкой теории иерархии заголовков, иерархией HTML-заголовков и SEO-оптимизацией?

Илья Лившиц
24 июня 2018

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

Например, в этой статье Ильи Бирмана заголовок уже говорит всё, а текст используется только для уточнения и пояснения.

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

4 3 Как описать путешествие в рекламной статье?




Недавно всплыло

Защититься от случайного нажатия «Сдаться» 1 Поделитесь соображениями, как работать, путешествуя 8 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Это какие‑то другие пиксели? Как они соотносятся? 2