Межстрочный интервал

В типографике расстояние между строками называют интерлиньяжем — от свинцовых пластин, которые наборщик вкладывал между рядами литер. В CSS аналог задаёт line-height, но устроен он немного иначе: свойство определяет полную высоту строки, а разница между ней и размером шрифта делится пополам и добавляется сверху и снизу от текста. Поэтому при большом интервале у первой строки абзаца тоже появляется отступ сверху.

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

Без единиц — надёжнее

body    { font-size: 1rem;  line-height: 1.6; }
h1, h2  { line-height: 1.2; }
.price  { font-size: 2rem; }  /* интервал пересчитается сам */

/* проблемный вариант */
.card   { font-size: 14px; line-height: 20px; }
.card h3 { font-size: 24px; }  /* строки заголовка налезут */

Число без единиц наследуется как коэффициент: каждый потомок умножает его на свой размер шрифта. Если же задать интервал в пикселях или em, потомки унаследуют уже вычисленную величину. Заголовок 24px внутри карточки с line-height: 20px получит строки ниже собственного шрифта, и при переносе на две строки буквы наедут друг на друга.

Какие значения удобны

• Основной текст статьи: примерно 1,4–1,6. Чем длиннее строка, тем больше нужен интервал, чтобы глаз не терял начало следующей строки.
• Заголовки: около 1,1–1,25. Крупный шрифт с тем же интервалом, что у текста, выглядит рыхло.
• Интерфейсные подписи и кнопки: часто 1,2–1,4, чтобы элементы не были слишком высокими.

Многие шрифты с крупными заглавными или высокими выносными элементами требуют подбора на глаз: одинаковое число у разных гарнитур даёт разную плотность.

Ошибки и проверка

Рекомендации по доступности WCAG требуют, чтобы контент не ломался, если пользователь сам увеличит интервал до полутора размеров шрифта, например через расширение браузера. Проверить просто: временно задать * { line-height: 1.5 !important; } и посмотреть, не обрезаются ли тексты в кнопках и карточках с фиксированной высотой. Старый приём центрирования текста по вертикали через line-height, равный высоте блока, ломается при переносе на вторую строку — для этого лучше flexbox. Как строки собираются из отдельных фрагментов, описано в статьях про строковый бокс и базовую линию.