Использование свойства CSS line-height для улучшения читабельности

В этой статье вы узнаете о свойстве CSS line-height и о том, как его можно использовать для создания визуально приятного, читаемого текста.

Вы, вероятно, видели, как line-height используется раньше:

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

Но как это работает и какую роль играет в CSS?

Типографские корни в CSS

Многие идеи в CSS были взяты из дисциплины типографики. Одним из примеров является свойство CSS line-height, которое устанавливает расстояние между двумя базовыми линиями обернутого текста.

«Базовая линия» — это воображаемая линия, на которой расположен текст.

Например, если бы у нас был этот короткий фрагмент текста внутри тега <div>:

<div>
  The alligator went for a swim in the deep lagoon.
</div>

Если вы перетащите окно браузера так, чтобы текст переносился на следующую строку, у вас будет две базовых линии и высота строки (обозначена желтыми стрелками):

Большее значение свойства CSS line-height увеличит это расстояние, а меньшее — сократит.

Высота строки и читабельность текста

Свойство line-height играет центральную роль в обеспечении удобочитаемости текста для пользователей. Если вы уменьшите размер line-height, он будет казаться переполненным. Чтение такого текста в течение длительного времени утомляет пользователя:

Если он слишком большой, пользователю будет трудно чувствовать себя вовлеченным в то, что он читает:

Но когда вы найдете правильный line-height, ваш текст будет объемным и гармоничным 💮🌺🌸

Поиск правильного line-height зависит от ваших потребностей, но также зависит от семейства шрифтов, которое вы используете. Это связано с тем, что каждый шрифт имеет свою индивидуальность. и будет «читаться» по-разному в существенном блоке текста.

Например, Helvetica и Times New Roman потребуют разных интервалов line-height, даже если они оба имеют одинаковый font-size.

Синтаксис высоты строки

Вы можете указать line-height любые значения! Он также сильно отличается от других свойств CSS, поскольку может принимать типичные значения px и %, но также имеет свое собственное уникальное «безразмерное» значение:

/* Use browser default.
 Typically "1.2" for
 all the major browsers */
line-height: normal;

/* Unitless (only line-height can do this!) */
line-height: 1.2;

/* <length> values like px, rem, em, pt */
line-height: 3em;

/* <percentage> values */
line-height: 120%;

line-height обозначается желтой стрелкой.

Как браузеры вычисляют высоту строки

Если вы используете процентное или безразмерное значение, размер шрифта будет учитываться в результирующем line-height. Например, оба приведенных ниже фрагмента будут рассчитаны как 19,2px. через браузер:

.myText {
  font-size: 16px;
  line-height: 1.2  /* (19.2px = 16 x 1.2) */
}

.myText {
  font-size: 16px;
  line-height: 120%;  /* (19.2px = 16 x 1.2) */
}

Однако, если вы используете значения \length, такие как px|em|rem|pt, font-size не будет использоваться для вычисления line- высота:

.myText {
  font-size: 16px;
  line-height: 20px;  /* Always 20px! */
}

Несмотря на то, что процентные и «безразмерные» значения кажутся идентичными, между ними есть небольшие различия. Передовой опыт предполагает использование «безразмерных» значений, когда это возможно.

Заключение

Вообще говоря, хороший line-height находится в диапазоне от 1,5 до 1,7 для большинства шрифтов. Alligator.io, например, использует высоту строки 1,6. Это больше искусство, чем наука, и много раз вы обнаружите, что открываете «Инструменты разработчика» своего браузера, чтобы подтолкнуть line-height, пока он не покажется «правильным» ✨👌

Чтобы узнать больше, посетите MDN для получения документации по высоте строки.