В этой статье вы узнаете о свойстве 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, пока оно не покажется вам идеальным.