Вертикальные метрики шрифта

При оформлении вертикальных метрик шрифта следует обратить внимание на:

• высоту глифов;
• междустрочный интервал (интерлиньяж).

Высота глифов

Свойство font-size указывает желаемую высоту глифов шрифта. Для масштабируемых шрифтов размер представляет собой коэффициент масштабирования, применяемый к единицам em. Для немасштабируемых шрифтов размер шрифта указывают в абсолютных единицах измерения.

Изменение свойства font-size приводит к изменению размеров глифов, указанных в относительных единицах измерения.

Абсолютные значения размера глифов: xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large. По умолчанию браузер устанавливает значение medium.

Относительные значения размера глифов: larger, smaller. Они изменяют значение относительно текущего размера. Существуют и другие относительные единицы измерения.

Междустрочный интервал

При описании стиля CSS типографический междустрочный интервал представляет собой разницу между высотой глифа нижнего регистра (x-height) и высотой строки (line-height). Разрешено задавать отрицательное значение высоты строки (line-height).

Верхний край (over edge) — пространство над линией глифов верхнего регистра.

Нижний край (under edge) — пространство под базовой линией.

Полумежстрочный интервал (half-leading) — равномерное распределение пространства над и под строкой глифов.

Верхний междустрочный интервал (over leading) — полумежстрочный интервал над строкой.

Нижний междустрочный интервал (under leading) — полумежстрочный интервал под строкой.

Следует учитывать, что браузер равномерно распределяет пространство над и под строкой. Например, если высота глифа 12pt (x-height) и добавить 1pt между строками, то фактическое значение line-height будет равно 14pt.

Полумежстрочный интервал можно обрезать от начального и конечного края блока текстового элемента с помощью свойств text-box.

Свойство line-height увеличивает или уменьшает вертикальный интервал между парой соседних строк. Принимает следующие значения:

• ’normal’ — интервал по умолчанию, установленный браузером пользователя. На экранах настольных мониторов составляет 1,2 от значения элемента font-family.
• числовой коэффициент значения элемента font-family;
• относительная величина;
• процент значения элемента font-family.

Свойство line-height можно применять к элементам ‘::first-letter’ и ‘::first-line’.

Пример указания интервала по умолчанию (normal). Браузер автоматически увеличит значение размера шрифта на 1,2, т.е. добавит по 1pt выше и ниже строки.

div {
    line-height: normal;
    font-size: 10pt;
}

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

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

Пример указания интервала в виде относительной величины. Указание значения в em приводит к появлению неожиданных побочных эффектов, связанных с наследованием.

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

Пример указания интервала в виде процента. Указание значения в процентах приводит к появлению неожиданных побочных эффектов, связанных с наследованием.

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

Пример побочного эффекта при задании относительных или процентных значений интерлиньяжа.

.green {
line-height: 1.1;
border: solid limegreen;
}

.red {
line-height: 1.1em;
border: solid red;
}

h1 {
font-size: 30px;
}

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

<div class="box green">
<h1>Не используйте относительные и процентные значения!</h1>
Относительные и процентные значения интерлиньяжа приводят к неожиданным побочным эффектам, связанным с наследованием.
</div>

<div class="box red">
<h1>Не используйте относительные и процентные значения!</h1>
Относительные и процентные значения интерлиньяжа приводят к неожиданным побочным эффектам, связанным с наследованием.
</div>

Внешний вид побочного эффекта:

Интерлиньяж можно указать одной строкой в свойствах шрифта:

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