От автора: хотя мы можем применить к line-height любую единицу измерения CSS, значение без единиц измерения 1,5 является наиболее рекомендуемым способом его обработки.
Для начала, пояснительное изображение о том, как высота строки применяется браузером:
Как видите, высота строки распределена по разным областям:
«Область контента», которая будет равна примерно 1 в высоту.
«Область направляющих», то есть оставшееся пространство, распределяемое равномерно сверху и снизу.
Поэтому мы могли бы выразить это как:
lineHeight = leading / 2 + content + leading / 2
Или:
line-height: calc(0.25 + 1 + 0.25);
Однако этот подход имеет недостаток в обслуживании: как вы можете заметить в следующей демонстрации, он устанавливает слишком большую высоту строки при больших размерах шрифта. Чтобы обеспечить оптимальную читабельность, мы должны вручную настраивать его при каждом увеличенному font-size, вплоть до 1,1 для очень больших размеров шрифта.
Поиск формулы
Чтобы получить более понятный способ, давайте взглянем на наши демонстрационные рисунки в таблице сравнения (вычисленные значения высоты строки приведены в пикселях для облегчения понимания):
Чтобы получить оптимальное значение line-height, нам нужно быть как можно ближе к значению 1.5 (15 пикселей) при меньших размерах шрифта, но ближе к 1.1 (55 пикселей) при более крупных. Подождите… 11px уже довольно близко к 15px. Мы всего в нескольких пикселях.
Итак, вместо того, чтобы начинать с 1.5, почему бы нам не перескочить? Мы могли бы начать с версии 1.1, добавив всего лишь несколько пикселей, которые нам нужны, что почти не будет иметь визуального различия в шрифтах большего размера, но будет существенно на меньших. Что-то вроде:
line-height: calc(2px + 1.1 + 2px);
Возвращаясь к нашей таблице сравнения вычисленной line-height:
Так-то лучше! Мы прибили это к маленьким размерам шрифтов, и довольно близко подошли к большим. К сожалению, line-height: calc(2px + 1.1 + 2px) недопустимо в CSS, так как значения единиц измерения не могут быть смешаны. Можем ли мы использовать какую-либо относительную единицу, которая вычисляется примерно до 1.1?
Что-то подобное: единицы измерения ex вычисляются по x-высоте (высота строчной буквы «x») текущего шрифта, поэтому мы просто находим идеальное соответствие для нашей формулы.
Фактически, можно использовать любую относительную единицу измерения (em, rem…), но, поскольку мы вычисляем высоту строки, имеет смысл использовать единицу высоты x.
Так как каждый шрифт имеет свое значение ex, нам все еще нужно настроить значения px и ex. В любом случае, считаю следующее хорошей отправной точкой:
line-height: calc(2px + 2ex + 2px);
Как вы можете видеть в следующей демонстрации, это устанавливает подходщую высоту строки в широком диапазоне различных шрифтов:
Это действительный CSS. Кроме того, ex имеет очень хорошую поддержку браузерами. Ура!
Элементы-потомки
Если вы примените формулу к родительскому элементу и измените font-size дочернего элемента, line-height не будет затронут для дочернего элемента, поскольку он был рассчитан на основе font-size родительского элемента:
.parent { font-size: 20px; line-height: calc(2px + 2ex + 2px); /* computed: 2px + (2 * 20px) + 2px = 44px */
} .parent .descendant { font-size: 40px; /* desired: 2px + (2 * 40px) + 2px = 84px */ /* computed: 2px + (2 * 20px) + 2px = 44px (same as .parent) */
}Это можно решить, применив формулу ко всем потомкам с помощью универсального селектора:
.parent * { line-height: calc(2px + 2ex + 2px);
}Об адаптивной типографике
Наша формула также помогает с адаптивной типографикой. Использование единиц измерения, связанных с областью просмотра (vw, vh, vmin, vmax) приводит к отсутствию тонкого контроля, поэтому мы не может изменять высоту строки при каждом изменении размера шрифта.
Эта проблема также решается с помощью техники блокировки CSS, которая использует относительно сложную арифметику для определения минимальной и максимальной высоты строки.
Автор: Jesús Ricarte
Источник: https://hugogiraudel.com
Редакция: Команда webformyself.