Текст и шрифты

Большая часть любого сайта — текст, и от его оформления зависит, приятно ли его читать. CSS управляет шрифтом, размером букв, расстоянием между строками и выравниванием. Свойства текста наследуются: заданные для body, они действуют на всю страницу.

Шрифт

font-family перечисляет шрифты через запятую. Браузер берёт первый, который есть на устройстве, а последним указывают общее семейство — запасной вариант, который есть всегда:

<p style="font-family: Georgia, serif;">Georgia — шрифт с засечками</p>
<p style="font-family: Arial, sans-serif;">Arial — шрифт без засечек</p>
<p style="font-family: Consolas, monospace;">Consolas — моноширинный</p>

Название из нескольких слов берут в кавычки: "Times New Roman".

Размер и жирность

font-size задаёт размер букв, font-weight — толщину. Толщину пишут числом от 100 до 900: 400 — обычный текст, 700 — жирный:

<style>
  .big { font-size: 24px; }
  .light { font-weight: 300; }
  .bold { font-weight: 700; }
</style>
 
<p class="big">Крупный текст</p>
<p class="light">Тонкий текст</p>
<p class="bold">Жирный текст</p>

Тонкое начертание видно, только если у шрифта есть такой вариант; иначе браузер возьмёт ближайший.

Курсив и высота строки

font-style: italic включает курсив. line-height задаёт расстояние между строками; число без единиц — множитель размера шрифта:

<style>
  .text {
    font-style: italic;
    line-height: 1.8;
  }
</style>
 
<p class="text">Длинный текст читается легче, когда между строками есть воздух. Для обычного текста выбирают значение от 1.4 до 1.8.</p>

Выравнивание

text-align выравнивает строки внутри блока: left, center, right или justify — по ширине:

<p style="text-align: left;">По левому краю</p>
<p style="text-align: center;">По центру</p>
<p style="text-align: right;">По правому краю</p>

text-align двигает текст внутри блока, а не сам блок.

Оформление текста

text-decoration добавляет или убирает линии — так снимают подчёркивание со ссылок. text-transform меняет регистр, letter-spacing — расстояние между буквами:

<style>
  .plain { text-decoration: none; }
  .caps { text-transform: uppercase; letter-spacing: 2px; }
</style>
 
<p><a class="plain" href="#">Ссылка без подчёркивания</a></p>
<p class="caps">заглавные буквы</p>

В разметке слово написано строчными буквами — заглавными его сделал CSS.

Свой шрифт

Чтобы шрифт выглядел одинаково у всех, файл шрифта подключают правилом @font-face и дальше используют его имя как обычно:

@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
}
 
body {
  font-family: "Inter", sans-serif;
}

Формат woff2 сжат и подходит для сайтов. Готовые шрифты с такими файлами есть в библиотеках вроде Google Fonts. Подробнее о @font-face, font-display и вариативных шрифтах — в уроке «Веб-шрифты».

Частая ошибка

Без общего семейства в конце списка браузер при отсутствии шрифта возьмёт свой шрифт по умолчанию — обычно с засечками, даже если вы хотели строгий без засечек:

<p style="font-family: 'Nonexistent Sans';">Без запасного варианта</p>
<p style="font-family: 'Nonexistent Sans', sans-serif;">С запасным sans-serif</p>

Всегда заканчивайте font-family одним из общих семейств.