Свойства font-size и line-height

Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.

font-size и line-height

• font-size – размер шрифта, в частности, определяющий высоту букв.
• line-height – высота строки.

Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:

<style>
body {
    font-size: 30px;
    font-family: monospace;
    line-height: 30px;
  }
</style>

<div style="outline: 1px dotted red">Ёрш р</div>
<div style="outline: 1px dotted red">Ёрш Ё</div>

Размер шрифта 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 будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

Давайте посмотрим, как это выглядит, на примерах:

Множитель, line-height:1.25

<div style="line-height: 1.25">
  стандартная строка
  <div style="font-size:2em">
    шрифт в 2 раза больше<br>
    шрифт в 2 раза больше
  </div>
</div>

Конкретное значение, line-height:1.25em

<div style="line-height: 1.25em">
  стандартная строка
  <div style="font-size:2em">
    шрифт в 2 раза больше<br>
    шрифт в 2 раза больше
  </div>
</div>

Какой вариант выглядит лучше? Наверно, первый. В нём размер строки более-менее соответствует шрифту, поскольку задан через множитель.

В обычных ситуациях рекомендуется использовать именно множитель, за исключением особых случаев, когда вы действительно знаете что делаете.

Синтаксис font: size/height family

Установить font-size и line-height можно одновременно.

Соответствующий синтаксис выглядит так:

font: 20px/1.5 Arial,sans-serif;

При этом нужно обязательно указать сам шрифт, например Arial,sans-serif. Укороченный вариант font: 20px/1.5 работать не будет.

Дополнительно можно задать и свойства font-style, font-weight:

font: italic bold 20px/1.5 Arial,sans-serif;

Итого

line-height

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

font-size

Размер шрифта. Если сделать блок такой же высоты, как шрифт, то хвосты букв будут вылезать из-под него.

font: 125%/1.5 FontFamily

Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.