Типографика в CSS: вертикальный ритм, межстрочный интервал, размеры шрифтов

Почему вертикальный ритм — это музыка для глаз 🎵

Вертикальный ритм — это невидимая сетка, которая организует контент на странице. Представьте нотный стан: если ноты расположены хаотично, мелодия распадается. Так же и с текстом!

body {
  line-height: 1.5;      /* Базовый межстрочный интервал */
  margin-bottom: 1.5rem; /* Отступы между блоками кратные line-height */
}

Как это работает:

1. Задаем line-height как множитель от размера шрифта (1.5 × 16px = 24px).
2. Все вертикальные отступы (margin, padding) делаем кратными этому значению.

🔥 Секрет: Используйте относительные единицы (rem, em) вместо пикселей — так ритм сохранится при изменении размера шрифта.

Межстрочный интервал: не просто воздух, а инструмент 🛠️

Плохой line-height превращает текст в «кирпичную стену» или «воздушный шар». Идеальный диапазон — 1.4–1.6 для основного текста.

p {
  font-size: 1rem;
  line-height: 1.5; /* Золотая середина */
}

h1 {
  font-size: 2rem;
  line-height: 1.2; /* Для заголовков можно меньше */
}

Лайфхаки:

• На мобильных устройствах увеличьте line-height на 0.1–0.2 для удобочитаемости.
• Для моноширинного кода (<pre>, <code>) используйте значения до 1.8.

Размеры шрифтов: от камертона до симфонии 🎻

Типографика — это иерархия. Вот как построить её грамотно:

:root {
  --font-base: 16px;
  --ratio: 1.333; /* Современное соотношение (perfect fourth) */

  --h1: calc(var(--font-base) * var(--ratio) * var(--ratio)); /* ≈28px */
  --h2: calc(var(--font-base) * var(--ratio));                /* ≈21px */
}

Практика: собираем пазл типографики 🧩

Пример гармоничной типографики:

:root {
  --font-base: 16px;
  --line-height: 1.5;
  --scale: 1.25;
}

body {
  font-size: var(--font-base);
  line-height: var(--line-height);
}

h1 {
  font-size: calc(var(--font-base) * var(--scale) * var(--scale));
  margin: 0 0 calc(var(--font-base) * var(--line-height));
}

p {
  margin-bottom: calc(var(--font-base) * var(--line-height));
}

Что мы сделали:

• Связали все размеры через CSS-переменные.
• Использовали calc() для динамических вычислений.
• Сохранили вертикальный ритм через единый множитель.

Тест на профпригодность 👨‍🎨

Попробуйте «метод squint-test»:

1. Прищурьтесь, чтобы текст стал размытым.
2. Если видите равномерные серые полосы — ритм соблюдён!
3. Если есть «провалы» или «скопления» — нужно доработать отступы.

Пример ошибки:

/* Плохо: отступы не согласованы */
h2 { margin-bottom: 10px; }
p { margin-bottom: 20px; }

Исправлено:

/* Хорошо: кратно базовой линии */
h2 { margin-bottom: 1.5rem; }
p { margin-bottom: 1.5rem; }

Итог: 3 кита типографики 🐋

1. Вертикальный ритм — это каркас. Все отступы должны быть кратны line-height.
2. Межстрочный интервал — дыхание текста. Не меньше 1.4 для основного контента.
3. Размеры шрифтов — иерархия. Используйте модульную шкалу для пропорций.