Использование calc для определения оптимального значения line-height

Использование calc для определения оптимального значения line-height

От автора: хотя мы можем применить к line-height любую единицу измерения CSS, значение без единиц измерения 1,5 является наиболее рекомендуемым способом его обработки.

Для начала, пояснительное изображение о том, как высота строки применяется браузером:

Использование calc для определения оптимального значения line-height

Как видите, высота строки распределена по разным областям:

«Область контента», которая будет равна примерно 1 в высоту.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

«Область направляющих», то есть оставшееся пространство, распределяемое равномерно сверху и снизу.

Поэтому мы могли бы выразить это как:

Или:

Однако этот подход имеет недостаток в обслуживании: как вы можете заметить в следующей демонстрации, он устанавливает слишком большую высоту строки при больших размерах шрифта. Чтобы обеспечить оптимальную читабельность, мы должны вручную настраивать его при каждом увеличенному font-size, вплоть до 1,1 для очень больших размеров шрифта.

Поиск формулы

Чтобы получить более понятный способ, давайте взглянем на наши демонстрационные рисунки в таблице сравнения (вычисленные значения высоты строки приведены в пикселях для облегчения понимания):

Использование calc для определения оптимального значения line-height

Чтобы получить оптимальное значение line-height, нам нужно быть как можно ближе к значению 1.5 (15 пикселей) при меньших размерах шрифта, но ближе к 1.1 (55 пикселей) при более крупных. Подождите… 11px уже довольно близко к 15px. Мы всего в нескольких пикселях.

Итак, вместо того, чтобы начинать с 1.5, почему бы нам не перескочить? Мы могли бы начать с версии 1.1, добавив всего лишь несколько пикселей, которые нам нужны, что почти не будет иметь визуального различия в шрифтах большего размера, но будет существенно на меньших. Что-то вроде:

Возвращаясь к нашей таблице сравнения вычисленной line-height:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Использование calc для определения оптимального значения line-height

Так-то лучше! Мы прибили это к маленьким размерам шрифтов, и довольно близко подошли к большим. К сожалению, line-height: calc(2px + 1.1 + 2px) недопустимо в CSS, так как значения единиц измерения не могут быть смешаны. Можем ли мы использовать какую-либо относительную единицу, которая вычисляется примерно до 1.1?

Что-то подобное: единицы измерения ex вычисляются по x-высоте (высота строчной буквы «x») текущего шрифта, поэтому мы просто находим идеальное соответствие для нашей формулы.

Фактически, можно использовать любую относительную единицу измерения (em, rem…), но, поскольку мы вычисляем высоту строки, имеет смысл использовать единицу высоты x.

Так как каждый шрифт имеет свое значение ex, нам все еще нужно настроить значения px и ex. В любом случае, считаю следующее хорошей отправной точкой:

Как вы можете видеть в следующей демонстрации, это устанавливает подходщую высоту строки в широком диапазоне различных шрифтов:

Это действительный CSS. Кроме того, ex имеет очень хорошую поддержку браузерами. Ура!

Элементы-потомки

Если вы примените формулу к родительскому элементу и измените font-size дочернего элемента, line-height не будет затронут для дочернего элемента, поскольку он был рассчитан на основе font-size родительского элемента:

Это можно решить, применив формулу ко всем потомкам с помощью универсального селектора:

Об адаптивной типографике

Наша формула также помогает с адаптивной типографикой. Использование единиц измерения, связанных с областью просмотра (vw, vh, vmin, vmax) приводит к отсутствию тонкого контроля, поэтому мы не может изменять высоту строки при каждом изменении размера шрифта.

Эта проблема также решается с помощью техники блокировки CSS, которая использует относительно сложную арифметику для определения минимальной и максимальной высоты строки.

Автор: Jesús Ricarte

Источник: https://hugogiraudel.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий