Налаштування підзаголовків з допомогою CSS

22

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

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

завдання розмірів за друкарською шкалою

зміни стилів

підвісні підзаголовки

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

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

поперечні смужки

По мірі розгляду кожного прийому можна переходити на цю демо-сторінку і дивитися ці й додаткові—варіанти в дії.

Завдання розмірів за друкарською шкалою

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

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

p { font-size: 100%; } /* 16px */
h4 { font-size: 1.125 em; } /* 18px */
h3 { font-size: 1.3125 em; } /* 21px */
h2 { font-size: 1.5 em; } /* 24px */

Налаштування підзаголовків з допомогою CSS

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

p { font-size: 100%; } /* 16px */
h4 { font-size: 1.5 em; } /* 24px */
h3 { font-size: 2.25 em; } /* 36px */
h2 { font-size: 3.375 em; } /* 54px */

Налаштування підзаголовків з допомогою CSS

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

Різні стилі при одному розмірі літер

Для підзаголовків веб-дизайнери звикли за замовчуванням застосовувати жирні шрифти, але так як зараз екрани сильно покращилися, а шрифти розширили свої можливості, для підкреслення важливості елементу нам не обов’язково застосовувати жирний шрифт. Замість цього можна поекспериментувати з різними стилями, такими як застосування всіх великих літер, маленьких заголовних букв та курсиву.

Для цих тестів нам знадобиться сімейство шрифтів з безліччю стилів, і я вибрав Proxima Nova через доступного супутнього стилю з маленьких прописних букв, а також гарного вибору ширини. Чи користуєтеся ви Proxima Nova або іншим улюбленим шрифтом за вибором, завжди пам’ятайте про їх універсальності—особливо тому, що не у всіх шрифтів є маленькі заголовні літери.

Налаштування підзаголовків з допомогою CSS

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

h3 {
font-family: proxima-nova, sans-serif;
-moz-font-feature-settings: «smcp»;
-ms-font-feature-settings: «smcp»;
-webkit-font-feature-settings: «smcp»;
-o-font-feature-settings: «smcp»;
font-feature-settings: «smcp»;
text-transform: lowercase;
}

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

h3 {
font-family: proxima-nova-sc-osf, sans-serif;
text-transform: lowercase;
}

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

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

Налаштування підзаголовків з допомогою CSS

Для підрахунку ширини підвісної заголовка можна застосувати наступну формулу:

x = лівий відступ статті в %

ширина підзаголовку у % = (x / (100 – x)) * 100

article {
padding-left: 33.33333333%;
}
h2 {
float: left;
margin-left: -50%;
width: 50%;
}

Для більшої важливості можна зробити елегантну просту горизонтальну лінію. Для прогресивного поліпшення загального дизайну ідеальні псевдоелементи :before :after. Призначити їм стилі, застосувавши рамки або фони (або і те, і інше). Пам’ятайте про те, що успадкована ширина псевдоэлемента дорівнює ширині підзаголовка. Щоб розтягнути псевдоэлемент на всю ширину статті, потрібно збільшити його розмір. Прорахуйте процентне відношення цього розширення, почавши зі значення відступу елемента статті на основі відсотків. (У вигляді формули це виглядає так: (100 / відступ статті у %) * 100 = ширина псевдоэлемента у %)

h2:before {
content: «»;
float: none;
display: block;
width: 300%;
height: .7em;
border-top: .0625em solid #ccc;
}

Або можна просто застосувати до абзацу рамку, яка слідує за підзаголовком з допомогою суміжних CSS селекторів:

article {
padding-left: 33.33333333%;
}
h2 {
float: left;
margin-left: -50%;
margin-top: 1.5 em;
width: 50%;
text-align: right;
}
h2 + p {
border-top: .0625em solid #ccc;
padding-top: 1.4375 em;
}

Налаштування підзаголовків з допомогою CSS

Нарешті, можна легко зробити підвісну першу букву, яка створить певний відтінок елегантності. Для створення зорової цілісності постарайтеся поєднати підвісну букву з основним рядком—наприклад, встановіть її так, щоб вона займала два рядки суміжного з нею тексту.

h2 {
margin: 0;
font-weight: bold;
}
h2:first-letter {
float: left;
width: 1em;
margin-left: -1.1 em;
font-size: 3.4 em;
line-height: .9em;
text-align: right;
}

Налаштування підзаголовків з допомогою CSS

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

Вставлені підзаголовки можна отримати за допомогою простих плаваючих елементів. У цьому прийомі важливо підібрати і зберегти x — line-height як підзаголовка, так і прилеглого абзацу.

h2 {
float: left;
font-size: 1em;
line-height: 1.5;
padding-right: .5em;
margin: 0;
}

Налаштування підзаголовків з допомогою CSS

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

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

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

h2:before {
content: «{«;
}
h2:after {
content: «}»;
}

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

Налаштування підзаголовків з допомогою CSS

Код досить простий:

h2:after {
content: «—»;
display: block;
font-size: 2em;
}

Псевдоелементи розміщені всередині елемента, але передують і завершують рядок тексту або дочірні елементи. Ось чому їх легко розташувати відносно самого елемента.

Поперечні смужки

Якщо ви вирішили поекспериментувати з вирівнюванням абзацу своїх підзаголовків, продумайте, як це вплине на загальну сітку сторінки. Самі по собі вирівняні по правій стороні підзаголовки легко упустити з виду, і вони не можуть служити документом придатними орієнтирами. Поєднання абзаців, вирівняних по лівій стороні і підзаголовків посередині або по правій стороні, виглядає на сторінці хаотично.

Налаштування підзаголовків з допомогою CSS

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

h2 {
display: table;
width: auto;
padding: 0 .5em 0 0;
position: relative;
}
h2:after {
content: «»;
display: block;
height: .5em;
width: 9999%;
overflow: hidden;
position: absolute;
top: .6em;
background: #ccc;
}

Вперед!

Не соромтеся взяти ці приклади за відправну точку і поекспериментувати, додаючи різні стилі і відтінки, комбінуючи гарнітури і модулируя контраст. У поєднанні з ретельно підібраним гарнітурою основних шрифтів підзаголовки здатні скласти чітку, міцну ієрархію, яка супроводить ваших читачів до останнього рядка тексту.

Примітки та ресурси

1. Переконайтеся, що скинули в своєму CSS всі міжрядкові інтервали за замовчуванням, або ризикуєте отримати несподіваний результат. Ось цей код творить чудеса:

* {
margin: 0;
padding: 0;
font-weight: normal;
}
html {
font-size: 100%;
line-height: 1.5;
}

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

3. Підтримка гнучких підвішених підзаголовків досить проста, і докладно описана в моїй статті «Переміщення елемента HTML в гнучкому контейнері».

4. Якщо потрібні ідеї гліфів, просто подивіться таблицю символів UTF.