В прошлых советах мы рассказывали, как подключать и задавать шрифт тексту. Сегодня расскажу о типографике в ЦСС: как управлять кеглем и интерлиньяжем, менять выключку и регистр, задавать межбуквенный и межсловный пробел.
Кегль и интерлиньяж
В ЦСС кегль задаётся свойством font-size, а интерлиньяж — свойством line-height. Их значения могут быть фиксированными, например, в пикселях или относительными, например, в процентах или em:
article p {
font-size: 16px;
/* Высота строки посчитается от кегля:
16px * 1.25 = 20px */
line-height: 1.25;
}
article .caption p {
/* Кегль посчитается от кегля родителя (страницы):
16px * 0.75 = 12px */
font-size: .75em;
line-height: 125%;
}В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.
Кегль экранного текста обычно лежит в диапазоне 12…16 пунктов, а интерлиньяж — 1,2…1,4 от значения кегля
Проще и удобнее задавать кегль в пикселях, а интерлиньяж — коэффициентом:
Обычно кегль основного текста задают на самом высоком уровне в :root или body, а для остальных текстовых элементов используют rem или em:
:root {
font-size: 16px;
line-height: 1.4;
}
h1 {
font-size: 2rem; /* 32 пк */
line-height: 1.025;
}
h2 {
font-size: 1.5rem; /* 24 пк */
line-height: 1.25;
}
h3 {
font-size: 1rem; /* 16 пк */
line-height: 1.4;
}
small {
font-size: .75rem; /* 12 пк */
line-height: 1.2;
}Выключка
Выключка задаётся свойством text-align с ключевыми словами left (левый флаг), center (по центру), right (правый флаг) и justify (по формату):
text‑align: left
В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.
text‑align: right
В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.
text‑align: center
В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.
text‑align: justify
В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.
Регистр
Регистр задаётся свойством text-transform с ключевыми словами uppercase (все прописные), lowercase (все строчные) и capitalize (первые буквые каждого слова прописными):
article h1 {
/* «Капитализируем» заголовок статьи */
text-transform: capitalize;
}
article h1 + p::first-line {
/* Первую строку набираем прописными,
как это принято в художественной литературе */
text-transform: uppercase;
}
article abbr {
/* Аббревиатуры делаем строчными */
text-transform: lowercase;
/* И набираем капителью */
font-variant: small-caps;
}Text is a basic element of layout
In “responsive” layout of a web page, designer specifies not only the shape of the text container but also the rules by which that shape changes depending on window and screen size.
In CSS type size of the screen text usually lies in the range of 12 to 16 points and line spacing is 120–140 % of the type size.
В примере выше я использовал font-variant — странное свойство, которое раньше могло только включать‑выключать капитель, а теперь отвечает за все вариации в шрифте: от капители до лигатур.
Межбуквенный и межсловный пробел
Чтобы изменить межбуквенное или межсловное расстояние, используют letter-spacing и word-spacing. Расстояние можно указывать, как в пикселях, так и в относительных единицах, например, в em или rem:
.metro {
/* Уменьшаем межбуквенное расстояние на -5.5 пк */
letter-spacing: -5.5px;
}
.metropoliten {
/* Разряжаем буквые на .25em */
letter-spacing: .25em;
}
.moscow-metro {
/* Увеличиваем расстояние между словами на .3em */
word-spacing: .3em;
}
.metro,
.metropoliten,
.moscow-metro {
/* Приводим к заглавным и выравниваем по центру */
text-transform: uppercase;
text-align: center;
}Метро
Метрополитен
Московский Метрополитен
имени Владимира Ильича Ленина
Интересный момент: и letter-spacing, и word-spacing задают не ширину пробела, а приращение к его ширине по умолчанию в шрифте. Соответственно, letter-spacing: 0 не схлопнет растояние между буквами, а сделает его стандартным.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.