Настройка подзаголовков с помощью CSS

От автора: Подзаголовки – это типографские компоненты, которые организуют для читателя структуру содержимого, обеспечивая краткий обзор последующего содержимого. Мы можем пользоваться ими как точками привлечения визуального внимания или просто как вспомогательной навигацией, постепенно раскрывающей содержимое. Однако представляемые браузером стили подзаголовков по умолчанию могут казаться слишком общими. Если вам хочется некоторого разнообразия, то интересных эффектов можно добиться при помощи CSS.

Для начала сведем вместе несколько основных способов, которые можно скомбинировать и расширить:

По мере рассмотрения каждого приема можно переходить на эту демо-страницу и смотреть эти—и дополнительные—варианты в действии.

Задание размеров по типографской шкале

При создании иерархии сети безопасным подходом является задание размеров подзаголовков при помощи типографской шкалы—пользовательской или общепринятой, такой как традиционная шкала (16, 18, 21, 24, 36, 48, 60, 72), разработанная типографами Ренессанса еще в 16-ом веке.

Начните с установки размера шрифта для body, а затем упорядочьте размеры подзаголовков от наименее значительных до самых важных. По моему опыту, заголовки h5 и h6 редко нужны в Сети, поэтому мы начнем с h4 и будем двигаться к h1, применяя типографскую шкалу по умолчанию (16, 18, 21, 24, 36, 48, 60, 72).[1]

Вы видите, что значения подзаголовков слишком близки друг другу, чтобы их можно было четко различить, особенно если страница просматривается быстро. Вот где может оказаться предпочтительной другая шакала, как та, которая основана на соотношении 2:3 (чистая квинта), которую можно использовать для увеличения размеров подзаголовков на 50% приращение.[2]

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

Разные стили при одном размере букв

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

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

Как во всем, связанном в веб-дизайне с CSS, есть несколько методов, которые можно применять для стилей с маленькими заглавными буквами. Одна из возможностей – применение правила свойства CSS3 OpenType.

Еще одна опция– загрузка отдельного шрифта с маленькими заглавными буквами. У нее есть дополнительное преимущество – гарантия того, что маленькие заглавные буквы будут присутствовать даже в тех браузерах, которые не поддерживают свойства CSS OpenType посредством свойства font-feature-settings.

Подвесные подзаголовки

Чтобы расширить применение предыдущего метода, особенно когда требуется подчеркнуть структуру документа, можно использовать подвесные подзаголовки. Это не было биномом Ньютона, когда мы создавали дизайны с фиксированной разметкой, но с нашествием адаптивного веб-дизайна относительные единицы, такие как проценты, могут оказаться сложными в применении.[3]

Для подсчета ширины подвесного заголовка можно применить следующую формулу:

Для пущей важности можно сделать элегантную простую горизонтальную линию. Для прогрессивного улучшения общего дизайна идеальны псевдоэлементы :before и :after. Назначить им стили можно, применив рамки или фоны (или и то, и другое). Помните о том, что унаследованная ширина псевдоэлемента равна ширине подзаголовка. Чтобы растянуть псевдоэлемент на всю ширину статьи, нужно увеличить его размер. Просчитайте процентное отношение этого расширения, начав со значения отступа элемента статьи на основе процентов. (В виде формулы это выглядит так: (100 / отступ статьи в %) * 100 = ширина псевдоэлемента в %)

Или можно просто применить к абзацу рамку, которая следует за подзаголовком с помощью смежных селекторов CSS:

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

Вставленные подзаголовки

Вставленные подзаголовки можно получить с помощью простых плавающих элементов. В этом приеме важно подобрать и сохранить x- и line-height как подзаголовка, так и прилегающего абзаца.

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

Неалфавитные символы

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

Кроме того, можно добавить под подзаголовок серию звездочек или обычный штрих. Просто установите правило display: block к псевдоэлементу :after и увеличьте размер его шрифта, таким образом выделив самые красивые детали. Даже самые простые глифы, которые есть почти в каждом шрифте, будучи увеличенными, смотрятся очень интересно.[4]

Код довольно прост:

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

Поперечные полоски

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

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

Вперед!

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

Примечания и ресурсы

1. Убедитесь, что сбросили в своем CSS все межстрочные интервалы по умолчанию, или рискуете получить неожиданный результат. Вот этот код творит чудеса:

2. Для пущего вдохновения и быстрого тестирования нескольких разных шкал, обратите внимание на калькулятор модульных шкал Тима Брауна (Tim Brown).

3. Поддержка гибких подвешенных подзаголовков довольно проста, и подробно описана в моей статье «Перемещение элемента HTML в гибком контейнере».

4. Если требуются идеи глифов, просто посмотрите таблицу знаков UTF.

Автор: Sally Kerrigan

Источник: //blog.typekit.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: