Шрифты: семейство, размер, начертание

Управляем шрифтом текста: какой гарнитурой, какого размера, насколько жирным и с каким интервалом.

За шрифт отвечает группа свойств font-*: семейство, размер, насыщенность и начертание, плюс межстрочный интервал line-height.

font-family и стопка шрифтов

Свойство font-family задаёт гарнитуру. Указывают сразу несколько вариантов через запятую — это «стопка»: браузер берёт первый доступный на устройстве пользователя. В конце пишут общее семейство (serif — с засечками, sans-serif — рубленый, monospace — моноширинный) как запасной вариант.

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Логика такая: попробуй Helvetica Neue; нет её — Arial; нет и его — любой рубленый шрифт системы. Названия из нескольких слов берут в кавычки.

font-size — размер

Размер обычно задают в пикселях (px) или относительных rem (о единицах — в последнем разделе). Базовый размер текста на сайтах — около 16px.

body { font-size: 16px; }
h1   { font-size: 32px; }
small { font-size: 13px; }

font-weight — насыщенность

Отвечает за «жирность». Принимает слова normal и bold или числа от 100 (тонкий) до 900 (чёрный), шаг 100. Обычный текст — 400, жирный — 700.

h2 { font-weight: 700; }   /* жирный */
.caption { font-weight: 300; } /* тонкий */

font-style — курсив

Включает наклонное начертание значением italic:

blockquote {
  font-style: italic;
}

line-height — межстрочный интервал

Одно из самых важных свойств для читаемости. Задаёт расстояние между строками. Лучше всего указывать без единиц — как множитель размера шрифта.

p {
  font-size: 16px;
  line-height: 1.6;
}

Здесь высота строки — 1.6 от размера шрифта, то есть около 26px. Слишком плотные строки (1.0) читать тяжело, слишком разреженные (2.5) — текст разваливается. Для основного текста хорошо работает диапазон 1.4–1.7.

Сокращённое свойство font

Несколько свойств можно записать одной строкой через font. Порядок: стиль, насыщенность, размер/интервал, семейство.

p {
  font: italic 400 16px/1.6 Georgia, serif;
}

Это короче, но новичку понятнее писать свойства по отдельности — так очевиднее, что меняешь.

Памятка

Итог

• font-family задают стопкой с общим семейством в конце.
• font-weight: 700 — жирный, 400 — обычный.
• line-height лучше задавать множителем (1.4–1.7) — это сильно влияет на читаемость.