CSS-свойство line-height и читабельность текста
В этой статье вы узнаете о свойстве CSS line-height и о том, как его можно использовать для создания читаемого текста.
Возможно, вы раньше видели как использовать line-height:
p font-size: 16px; line-height: 1.2; >
Но как это работает и какую роль играет в CSS?
Типографские корни CSS
Многие понятия в CSS были взяты из типографики . В том числе свойство CSS line-height, которое устанавливает расстояние между двумя базовыми линиями обернутого текста.
«Базовая линия» — это воображаемая линия, на которой расположен текст.
Например, есть короткий текст внутри тега :
The alligator went for a swim in the deep lagoon.
Если перетащить окно браузера так, чтобы текст переносился на следующую строку, у вас будет две базовых линии и 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; /* values like px, rem, em, pt */ line-height: 3em; /* values */ line-height: 120%;
L ine -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, пока оно не покажется вам идеальным.
line-height
Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.
Синтаксис
line-height: множитель | значение | проценты | normal | inherit
Значения
Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.
normal Расстояние между строк вычисляется автоматически. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
line-height h1 < line-height: 60%; >p Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства line-height
Объектная модель
[window.]document.getElementById(» elementID «).style.lineHeight
Браузеры
Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм. Также в этом браузере не поддерживается значение inherit .
Свойство line-height
Свойство line-height устанавливает интервал между строками текста (межстрочный интервал).
Свойство не задает промежуток между строками текста, как могло бы показаться, оно задает высоту линии текста. Это значит, что реальный промежуток между строками будет вычисляться так: line-height — font-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.
Синтаксис
Значения
Значением свойства служат любые единицы для размеров. При указании значения в % межстрочный интервал будет в процентах от размера шрифта.
Кроме того, можно задать значением любое число больше нуля. В этом случае оно воспринимается как множитель от размера шрифта. Например, если font-size имеет значение 20px , а line-height — 1.5 , то это все равно, что написать line-height: 30px (20px * 1.5 = 30px).
По умолчанию свойство имеет значение normal , в этом случае браузер выбирает межстрочный интервал автоматически.
Пример
В данном примере расстояние между строками текста будет line-height — font-size = 38px — 18px = 20px:
Свойства font-size и line-height
Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.
font-size и line-height
- font-size – размер шрифта, в частности, определяющий высоту букв.
- line-height – высота строки.
Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:
body Ёрш р Ёрш ЁРазмер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.
Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p , g . Как видно из примера выше, при размере строки, равном font-size , строка не будет размером точно «под букву».
В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.
В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.
Обычно размер строки делают чуть больше, чем шрифт.
По умолчанию в браузерах используется специальное значение line-height:normal .
Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.1 — 1.25 , но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).
Множитель для line-height
Значение line-height можно указать при помощи px или em , но гораздо лучше – задать его числом.
Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2) .
Однако, между множителем и точным значением есть одна существенная разница.
- Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта. То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
- Значение, заданное в единицах измерения, запоминается и наследуется «как есть». Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.
Давайте посмотрим, как это выглядит, на примерах:
стандартная строка шрифт в 2 раза больше
шрифт в 2 раза больше