CSS-свойство line-height и читабельность текста

Development | Amber | Комментировать запись

В этой статье вы узнаете о свойстве 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>

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

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

Line-height и читабельность текста

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

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

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

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

Для Helvetica и Times New Roman требуются разные межстрочные интервалы, даже если они имеют одинаковое значение font-size.

Синтаксис line-height

Свойство 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

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

.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) */
}

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

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

Хотя и процентные, и «безразмерные» значения кажутся идентичными, между ними есть различия. Рекомендуется по возможности использовать «безразмерные» значения.

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