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

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

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

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

```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)`.

Однако, между множителем и точным значением есть одна существенная разница.

<ul>
<li>**Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.**
То есть, при `line-height: 2` означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
</li>
<li>**Значение, заданное в единицах измерения, запоминается и наследуется "как есть".**
Это означает, что `line-height: 32px` будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.</li>
</ul>

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

<dl>
<dt>Множитель, `line-height:1.25`</dt>
<dd>

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

</dd>
<dt>Конкретное значение, `line-height:1.25em`</dt>
<dd>

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

</dd>
</dl>

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

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

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

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

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

```css
font: *!*20px/1.5*/!* Arial,sans-serif;
```

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

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

```css
font: *!*italic bold*/!* 20px/1.5 Arial,sans-serif;
```

## Итого

<dl>
<dt>`line-height`</dt>
<dd>Размер строки, обычно он больше размера шрифта. При установке множителем расчитывается каждый раз относительно текущего шрифта, при установке в единицах измерения -- фиксируется.</dd>
<dt>`font-size`</dt>
<dd>Размер шрифта. Если сделать блок такой же высоты, как шрифт, то хвосты букв будут вылезать из-под него.</dd>
<dt>`font: 125%/1.5 FontFamily`</dt>
<dd>Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.</dd>
</dl>