Как оформить текст: 11 главных CSS-свойств

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

Каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Давайте посмотрим, как это сделать.

Сменить шрифт

Чтобы изменить шрифт элемента, используйте CSS-свойство font-family:

body {
  font-family: 'Roboto', Arial, sans-serif;
}

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

Как подключить шрифт на страницу

Изменить цвет и размер текста

Цвет текста задаётся с помощью свойства color. Оно принимает значения в различных форматах: можно написать название цвета (red, blue), шестнадцатеричное значение (#ff0000, #00f) или функцию rgb(), чтобы задать цвет с помощью трёх чисел.

p {
  color: red; /* Красный с помощью слов */
  color: #ff0000; /* Красный с помощью HEX */
  color: rgb(1.0,0.0,0.0); /* Красный с помощью rgb() */
}

Размер текста меняется свойством font-size. Оно принимает значения в пикселях (px), процентах (%) и других единицах измерения.

h1 {
  font-size: 24px;
}

See the Pen Как поменять цвет и размер шрифта by Feizerr (@feizerr) on CodePen.

Добавить жирность

Свойство font-weight задаёт жирность текста. Оно принимает два вида значений.

Численные: от 100 до 900. Например, 400 — обычный шрифт, а 700 — полужирный.

Ключевые слова: normal — обычный шрифт, bold — полужирный, bolder — жирнее, чем текущий, lighter — менее жирный шрифт по сравнению с текущим.

p {
  font-weight: bold; /* Полужирный с помощью ключевого слова */
  font-weight: 700; /* Полужирный с помощью численного значения */
}

See the Pen Untitled by Feizerr on CodePen.

Сделать текст курсивным

Для этого есть свойство font-style. По умолчанию у него стоит значение normal, то есть текст обычный, без курсива. Чтобы поменять начертание, используйте:

• italic — делает текст курсивным;
• oblique — делает текст наклонным.

p {
  font-style: italic;
}

Оба значения создают похожий эффект — текст выглядит курсивным, но есть и разница. Если очень упростить, то italic и oblique немного отличаются в начертании. А ещё не у всех шрифтов есть специальная курсивная версия. В таких случаях oblique делает текст похожим на курсив.

See the Pen Как сделать курсивный текст by Feizerr on CodePen.

Преобразовать текст

Свойство text-transform меняет регистр текста. Оно принимает значения:

• none — без изменений, значение по умолчанию;
• uppercase — все буквы становятся прописными;
• lowercase — все буквы становятся строчными;
• capitalize — первая буква каждого слова находится в верхнем регистре.

p {
  text-transform: uppercase;
}

See the Pen Как изменить text-decoration by Feizerr on CodePen.

Добавить подчёркивание

Свойство text-decoration добавляет тексту декоративные эффекты:

• overline создаёт линию над текстом,
• line-through делает текст зачёркнутым,
• underline добавляет подчёркивание.

p {
  text-decoration: overline;
}

По умолчанию у свойства стоит значение none — без оформления.

See the Pen Как добавить подчёркивание by Feizerr on CodePen.

Создать тень

Свойство text-shadowдобавляет тексту тень. Оно принимает значение в таком формате:

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
/*смещение по горизонтали, смещение по вертикали, радиус размытия, цвет тени */

See the Pen Как добавить тень тексту by Feizerr on CodePen.

Выровнять текст

Свойство text-align выравнивает текст по горизонтали. Оно принимает значения:

• left — влево;
• right — вправо;
• center — по центру;
• justify — выравнивание по ширине.

See the Pen Как выровнять текст by Feizerr on CodePen.

Изменить высоту строки и межбуквенное расстояние

Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. Свойство letter-spacing управляет расстоянием между символами.

p {
  line-height: 1.5;
  letter-spacing: 2px;
}

See the Pen Как изменить высоту строки by Feizerr on CodePen.

Нюансы

• У некоторых шрифтов нет жирного и курсивного варианта.
• Свойство text-shadow делает текст эффектным, но слишком насыщенные тени могут усложнить чтение текста или создать плохой контраст.
• Слишком большое или маленькое значение line-height и letter-spacing может нарушить интервалы между буквами и строками.
• При изменении размера шрифта (font-size) следует учитывать, что очень мелкий и крупный текст может плохо отображаться или стать нечитабельным.

Рекомендации

Тестируйте вёрстку. Проверяйте, как шрифты отображаются на разных устройствах и браузерах. Некоторые шрифты могут отображаться по-разному на разных платформах.

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

Помните о доступности. Используйте подходящие значения font-weight — слишком мелкий или крупный текст плохо читается. Подбирайте контрастные цвета для текстов.

Используйте несколько шрифтов. Некоторые шрифты могут быть недоступны, поэтому важно указывать альтернативные варианты.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.