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

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

font-size и line-height

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

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

<!--+ autorun height=100 -->
<style>
body { 
*!*
    font-size: 30px;
    font-family: monospace;
    line-height: 1em; /* 1em = размер шрифта = 30px */
*/!*
  }
</style>

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

Как видно из примера,font-size -- это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях, это даже не "самая большая буква", а просто такая прикидка, чтобы было удобно планировать размер строки.

При размере строки, равном font-size, строка не будет размером точно "под букву". В зависимости от шрифта, "хвосты" букв при этом могут вылезать, поэтому обычно размер строки делают чуть больше, чем шрифт.

По умолчанию в браузерах используется специальное значение line-height:normal.

Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.0 - 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`

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

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

<!--+ autorun -->
<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`: Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.

6.2 KiB Raw Blame History Unescape Escape

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

font-size и line-height

Множитель для line-height

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

Итого

6.2 KiB

Raw Blame History