Шрифты в CSS: font-family, размер, жирность и цвет текста

На твоём компьютере заголовок красивый, а у знакомого — обычный Times. Размер, заданный в em, внезапно вырос во вложенном блоке. Шрифты в CSS держатся на нескольких свойствах, и почти все сюрпризы объясняются тем, откуда браузер берёт шрифт и от чего считает размер.

Шрифт задают свойством font-family: список шрифтов через запятую, из которого браузер берёт первый доступный. Своего шрифта у посетителя может не быть, поэтому его подключают по ссылке, например с Google Fonts. Размер задаёт font-size — в px, rem или em, жирность — font-weight, расстояние между строками — line-height, цвет текста — color.

Пример: статья с заголовком из Google Fonts

Открой пример в песочнице HTML/CSS ссылкой под вторым блоком: разметка попадёт во вкладку index.html, стили — в styles.css. Заголовок набран шрифтом Lora с Google Fonts, текст — системным шрифтом устройства, а важное слово выделено жирным и цветом.

HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap">

<article class="post">
  <h1>Как выбрать зерно</h1>
  <p class="lead">Короткий гид для тех, кто только начинает варить кофе дома.</p>
  <p>Смотри на дату обжарки: зерну лучше всего от недели до месяца. <strong>Арабика</strong> мягче и кислее, <em>робуста</em> крепче и горче.</p>
</article>

CSS:

body {
  margin: 0;
  padding: 1.5rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #2b211b;
}

h1 {
  font-family: "Lora", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}

.lead {
  font-size: 1.25rem;
  color: #6b5b4e;
}

strong {
  font-weight: 700;
  color: #c62828;
}

font-family: список шрифтов и запасной вариант

h1 {
  font-family: "Lora", Georgia, serif;
}

Браузер идёт по списку слева направо и берёт первый шрифт, который у него есть: Lora, если она подключена, иначе Georgia, а если нет и её — любой шрифт с засечками. Последним в списке всегда ставят общее семейство: serif — с засечками, sans-serif — без, monospace — моноширинный, как в коде. Имя из нескольких слов пишут в кавычках: "Segoe UI".

Системный стек system-ui, -apple-system, "Segoe UI", Roboto, sans-serif у текста в примере берёт шрифт самой системы: San Francisco на Mac и iPhone, Segoe UI в Windows, Roboto на Android. Скачивать ничего не нужно, и текст выглядит привычно для устройства.

Подключение шрифта: Google Fonts или свой файл

Google Fonts. На fonts.google.com выбираешь шрифт и начертания, сайт даёт готовые строки <link> для <head>. В адресе перечислены нужные начертания: family=Lora:wght@600 — только полужирное. Чем меньше начертаний, тем быстрее загрузка. display=swap в конце адреса просит браузер сразу показать текст запасным шрифтом и заменить его, когда загрузится нужный, — так текст не прячется на время загрузки.

Свой файл. Шрифт можно положить рядом с сайтом и описать правилом @font-face:

@font-face {
  font-family: "Lora";
  src: url("/fonts/lora-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

Тогда шрифт не зависит от чужого сервера. Формат woff2 поддерживают все современные браузеры, и он легче остальных.

Размер шрифта: px, rem и em

px. Пиксели — точный размер, который не зависит от соседей: font-size: 16px.

rem. Доля от размера шрифта у html, по умолчанию это 16 пикселей: 2rem — 32, 1.25rem — 20. Если человек увеличил шрифт в настройках браузера, все размеры в rem вырастут вместе с ним. Поэтому rem — хороший выбор для текста.

em. Доля от размера шрифта родителя. Если у родителя 20 пикселей, 1.5em — это 30. Вложенные блоки с em перемножают размеры, поэтому em удобнее для отступов внутри кнопки, которые растут вместе с её текстом.

Жирность и курсив: font-weight и font-style

font-weight принимает числа от 100 до 900: 400 — обычный, 700 — жирный, bold — то же, что 700. Промежуточные значения вроде 600 видны, только если шрифт подключён в этом начертании: у Lora в примере подключено ровно 600. Если начертания нет, браузер подберёт ближайшее или нарисует жирность сам, и выглядит это хуже.

font-style: italic делает курсив. Теги <strong> и <em> уже жирные и курсивные по умолчанию — CSS нужен, когда хочется другого вида, как красный цвет у «Арабики».

Межстрочный интервал и цвет текста: line-height и color

line-height. Высота строки. Число без единиц — множитель размера шрифта: 1.6 у текста размером 16 пикселей даёт строку 25,6 пикселя. Для основного текста хорошо работает 1,5–1,7, для крупных заголовков — 1,1–1,3. Число без единиц лучше px: вложенный текст другого размера получит интервал по своему размеру.

color. Цвет текста: color: #2b211b, color: rgb(43 33 27) или слово color: brown. Цвет наследуется: заданный у body, он достаётся всему тексту страницы, пока какой-нибудь элемент не задаст свой. Следи за контрастом: светло-серый текст на белом трудно читать.

Шпаргалка по шрифтам

Три правки, чтобы закрепить

Открой пример в песочнице и перед каждой правкой предскажи результат:

1. Убери строку <link rel="stylesheet" …> с Google Fonts. Заголовок наберётся запасным шрифтом из списка — тем, что найдётся на твоём устройстве: Lora больше негде взять.
2. Поставь у body font-size: 20px. Обычный абзац вырастет до 20 пикселей, а заголовок и подзаголовок останутся прежними: их размеры в rem считают от html, а не от body.
3. Поменяй у body line-height: 1.6 на 1. Строки абзаца слипнутся: высота строки станет равна размеру шрифта, 16 пикселей вместо 25,6.

Цвет и размер — часть оформления, о котором говорит статья про селекторы CSS, а отступы вокруг текста разобраны в статье про margin и padding.