line-height

line-height задаёт интервал между строчками текста, который называют интерлиньяж.

Стандартный интервал:

        
          
          .selector {  line-height: normal;}
          .selector {
  line-height: normal;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Множитель — расстояние будет в 3.5 раза больше, чем размер текста:

        
          
          .selector {  line-height: 3.5;}
          .selector {
  line-height: 3.5;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Условные единицы — значение, относительно стандартного интервала.
В данном случае, интервал будет в 3 раза больше интервала родительского элемента.

        
          
          .selector {  line-height: 3em;}
          .selector {
  line-height: 3em;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Проценты — размер интервала высчитывается относительно размера шрифта:

        
          
          .selector {  line-height: 34%;}
          .selector {
  line-height: 34%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

С помощью line-height можно выбрать, насколько большое расстояние будет между строчками текста. Обычно это расстояние немного больше, чем высота шрифта.

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

Задать свойство line-height можно одним из нескольких значений. Самый предсказуемый вариант — с помощью числа. У свойства line-height не может быть отрицательного значения.

• normal — значение по умолчанию. Немного отличается в разных браузерах, но, как правило, равно 1.2. Это значит, что расстояние между строчками будет равно размеру шрифта font-family, помноженному на 1.2.
• число — число без единиц измерения. Например, значение 1.5 значит, что высота строчки будет равна размеру шрифта font-family, помноженному на 1.5.
• длина — например, пиксели px, условные единицы шрифта em, дюймы in, пункты pt и так далее.
• проценты — например, line-height: 120%. За 100% берётся размера шрифта font-size.

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

Задавать высоту строки в каких-то единицах измерения не самый лучший вариант, потому что тогда высота строки не подстраивается автоматически под размер шрифта и может выглядеть не так, как ожидается.

💡 Самый надёжный способ задать интервал между строчками — с помощью числа, например, 1.5. При увеличении масштаба страницы этот интервал увеличится соответствующим образом.

💡 Для обычного текста чаще всего используют полуторный интервал line-height: 1.5. С таким интервалом текст удобнее читать.

💡 Ещё один способ задать интервал между строк — шорткат font. При этом обязательно сразу указать семейство шрифтов font-family. Например:

        
          
          div {  font: 10px/1.2 Georgia, "Bitstream Charter", serif;}
          div {
  font: 10px/1.2 Georgia, "Bitstream Charter", serif;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Попробуем задать одно и то же расстояние между строчками с помощью разных значений. Каждое значение будет умножаться на размер шрифта font-size:

Число:

        
          
          div {  line-height: 1.2;  font-size: 10px;}
          div {
  line-height: 1.2;
  font-size: 10px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Длина:

        
          
          div {  line-height: 1.2em;  font-size: 10px;}
          div {
  line-height: 1.2em;
  font-size: 10px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Процент:

        
          
          div {  line-height: 120%;  font-size: 10px;}
          div {
  line-height: 120%;
  font-size: 10px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Спойлер: простое число умножается на высоту шрифта того же элемента, а, например, значение em — на высоту шрифта родительского элемента:

        
          
          <div class="box box_green">  <h1>Тут мы задали интервал с помощью числа 1.2</h1>  Оно умножается на размер шрифта этого же элемента. Это удобно и предсказуемо.</div><div class="box box_blue">  <h1>А здесь мы ввели 1.2em</h1>  Это значит, что 1.2 умножается на размер шрифта родительского элемента, в  нашем случае  <div>, а не на размер заголовка. Это вносит путаницу.</div></div>
          <div class="box box_green">
  <h1>Тут мы задали интервал с помощью числа 1.2</h1>
  Оно умножается на размер шрифта этого же элемента. Это удобно и предсказуемо.
</div>

<div class="box box_blue">
  <h1>А здесь мы ввели 1.2em</h1>
  Это значит, что 1.2 умножается на размер шрифта родительского элемента, в
  нашем случае
  <div>, а не на размер заголовка. Это вносит путаницу.</div>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          h1 {  font-size: 30px;}.box {  width: 18em;  padding: 20px;  display: inline-block;  vertical-align: top;  font-size: 15px;}.box_green {  line-height: 1.2;  background-color: #49a16c;}.box_blue {  line-height: 1.2em;  background-color: #1a5ad7;}
          h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  padding: 20px;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

.box_green {
  line-height: 1.2;
  background-color: #49a16c;
}

.box_blue {
  line-height: 1.2em;
  background-color: #1a5ad7;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

line height / font size = относительный line-height

86 / 58 = 1.482758621