# Система типографики

See the Pen Typography mixin refactoring by Mikhail (@b2b-morshinin) on CodePen.

Для чего это все?

Для лучшей читаемости текста нужно добавлять отступ после заголовков, подзаголовков и параграфов. Этот отступ высчитывается на основе интерлиньяжа и особой дизайнерской магии. Чтобы каждый раз не добавлять эти стили в косметике, мы пропишем их в базовых стилях. Благодаря этим изменениям не нужно будет задумываться о правильных отступах, т.к. они будут добавляться автоматически.

Как это работает для заголовков и подзаголовков?

У каждого заголовка должно быть определенное для него свободное пространство под ним. Пространство указано в макете для каждого заголовка в виде расстояния между его базовой линией и базовой линией следующего за ним элемента. Например, для заголовка .h0 это расстояние равно 64px. Это означает, что базовая линия любого следующего за ним текста(будь то .s0,.s1, p и т.п.) должна находиться на этом расстоянии(64px).

Для того, чтобы задать правильный margin, мы берем необходимое расстояние m = l - (lh1 - fz1 + fz2)

Как это работает для параграфов?

Чтобы добиться верстки текста а-ля как в газете или в блоге, мы также добавляем отступы для заголовков, которые следуют после параграфа. Это расстояние в два раза больше того, которое указано для элемента следующего после заголовка. Т.е. для .h0(у которого это расстояние 64px), следующего после параграфа, внешний отступ сверху будет равен 120px.