Что такое line height в css

line-height

Межстрочный интервал (интерлиньяж) — типографский термин, обозначающий расстояние между строками текста. Часть символа, располагающаяся ниже базовой линии, называется нижним выносным элементом, в то время как самая высокая точка символа называется верхним выносным элементом. Межстрочный интервал измеряется от нижней части нижнего выносного элемента на одной строке до верхнего выносного элемента на следующей строке.

межстрочный интервал

В CSS свойство line-height устанавливает высоту всей строки текста, поэтому разница между размером шрифта (font-size) и высотой строки ( line-height ) соответствует межстрочному интервалу. Увеличение значения свойства line-height приводит к увеличению расстояния между строками текста.

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

Примечание: по умолчанию во всех браузерах межстрочный интервал равен 120-125% от размера текущего шрифта. Использование отрицательных значений не допускается.

Для регулирования расстояний между словами используйте CSS свойство word-spacing, для изменения расстояния между буквами — letter-spacing.

Свойство line-height

Свойство line-height (от англ. "line height" ‒ «высота строки») устанавливает расстояние между базовыми линиями двух соседних строк.

Применяется: ко всем элементам;
Наследование: присутствует;
Проценты: относительно размера шрифта самого элемента;
Медиа : визуальные.

Примечание

  • Если свойство установлено для элемента блок-уровня, содержимое которого состоит из элементов встроенного-уровня, « line-height » определяет минимальную высоту каждой строчной коробки.
  • Если свойство установлено для (незаменяемого) элемента встроенного-уровня, оно определяет высоту каждой строчной коробки, генерируемой элементом. (Для встроенных заменяемых элементов высота коробки задаётся свойством « height ».)

JavaScript

[объект] .style .lineHeight ="[значение]";

Поддержка браузерами

Спецификация

CSS Раздел
1 5.4.8 ‘line-height’ Перевод
2 10.8.1 Leading and half-leading
‘line-height’
2.1 10.8.1 Leading and half-leading
‘line-height’
2.2 10.8.1 Leading and half-leading
line-height
3

Значения

<длина> Устанавливает значение длины. В качестве итоговой высоты строки принимается заданное значение длины. При этом дочерние элементы наследуют заданное значение.

<процент> Устанавливает процентное значение. Итоговая высота строки рассчитывается путём умножения процентного значения на размер шрифта элемента. При этом дочерние элементы наследуют итоговое, а не процентное значение.

<число> Устанавливает числовой множитель. Итоговая высота строки рассчитывается как размер шрифта текущего элемента, умноженный на числовой множитель. При этом дочерние элементы наследуют сам числовой множитель, а не итоговое значение.

normal Устанавливает « line-height » в приемлемое значение для шрифта элемента.

Примечание: предполагается, что агенты пользователей будут устанавливать числовое значение « normal » в диапазоне от « 1.0 » до « 1.2 ».

inherit Указывает, что элемент должен унаследовать параметры родительского элемента.

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

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

Возможно, вы уже раньше видели, как использовать высоту строки:

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

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

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

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

Многие идеи в CSS были взяты из типографики. Одним примером является свойство CSS line-height, которое устанавливает расстояние между двумя базовыми линиями текста. «Базовая линия» &#8212; это воображаемая линия, на которой располагается текст.

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

Например, если у нас есть короткий фрагмент текста внутри тега div:

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

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

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

Высота строки и читаемость текста

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

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

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

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

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

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

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

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

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

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

Синтаксис

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *