Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.
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
- Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.
Комментарии вернулись :)
<code>
, для нескольких строк кода — тег<pre>
, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)