С помощью примесей и небольших вычислений можно красиво и быстро создать «вертикальный ритм» текста с заголовками, параграфами и списками.

Основу для вертикального ритма будет задавать переменная @line, в которой хранится высота одной «визуальной» строки текста. Крупные блоки текста, например, заголовки первого уровня h1 будут занимать три «визуальные» строки. Заголовки h2 и h3 будут занимать две строки. Обычный текст в параграфах будет однострочным. Размер шрифта при этом подберём так, чтобы текст при заданной высоте строки смотрелся гармонично.

Между блоками текста (заголовками, параграфами, списками) нужно установить соразмерный отступ. По умолчанию сделаем его равным @line.

Итак, в деле нам пригодятся две примеси: .set-font, которая устанавливает размер шрифта и высоту строки, и .set-margin для задания вертикальных отступов.

В примеси .set-font для высоты строки и в .set-margin для верхнего и нижнего отступа зададим значение по умолчанию @line.

Для наглядности мы добавили на страницу вертикальную «сетку», шаг которой тоже зависит от @line. В итоге все блоки текста должны будут «идти в ритм» с вертикальной сеткой.

Начнём с выравнивания заголовков.