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

Выбери шрифт через font-family, а затем настрой размер, насыщенность и межстрочный интервал, чтобы текст было приятно читать.

9 мин · 3 вопросов

Шрифт - это рисунок букв: Arial, Georgia или Times New Roman - это шрифты. В CSS свойство font-family выбирает шрифт для фрагмента текста. Ты передаёшь ему список шрифтов через запятую: браузер пробует первый; если он не установлен на устройстве посетителя, браузер переходит к следующему, и так далее. Это план A, план B, план C.

body {
  font-family: Georgia, "Times New Roman", serif;
}

Последнее слово в списке - обобщённое семейство: serif означает шрифты с засечками (маленькие ножки на концах букв, как в печатной газете), sans-serif - шрифты без засечек (выглядят современнее, как Arial), а monospace - моноширинные шрифты, где все буквы одинаковой ширины (идеально для кода). Обрати внимание на кавычки вокруг "Times New Roman": они обязательны каждый раз, когда в названии шрифта есть пробелы.

Размер текста задаётся через font-size. Пиксели ты уже знаешь (16px - размер по умолчанию в браузерах). Есть ещё единица rem: 1rem равен базовому размеру страницы, так что 1.5rem - это полтора таких размера. Насыщенность, то есть толщина штрихов букв, задаётся через font-weight: normal для обычного текста, bold для жирного, или число от 100 (очень тонкий) до 900 (очень толстый), где 400 - эквивалент normal, а 700 - эквивалент bold.

h1 {
  font-size: 2rem;
  font-weight: 700;
}

p {
  font-size: 16px;
  font-weight: normal;
}

Ещё одна настройка, о которой часто забывают, хотя она важна для комфортного чтения: line-height, высота строки. Она управляет вертикальным пространством между строками абзаца. Слишком тесно - строки душат друг друга; слишком свободно - глаз теряется. Хорошая практика - значение без единицы измерения, которое умножает размер текста: line-height: 1.5; делает каждую строку в полтора раза выше размера шрифта.

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

Проверка знаний

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

1. Почему в font-family перечисляют несколько шрифтов через запятую?
   • Чтобы смешивать шрифты внутри одного слова
   • Чтобы браузер попробовал следующий, если какого-то шрифта нет
   • Потому что синтаксис CSS требует минимум три значения
2. Какое значение font-weight соответствует классическому жирному (bold)?
   • 100
   • 400
   • 700
   • 900
3. При font-size: 20px и line-height: 1.5 какой высоты каждая строка?
   • 20 пикселей
   • 25 пикселей
   • 30 пикселей
   • 35 пикселей