Вертикальный ритм типографики

Настрой вертикальный ритм типографики.

Базовая единица

Выбери 4px или 8px как базу. Всё должно быть кратно ей.

base = 8px (рекомендую)

space-1: 4px (half-base)
space-2: 8px
space-3: 12px
space-4: 16px
space-6: 24px
space-8: 32px
space-12: 48px
space-16: 64px

Line-height

Зависит от размера:

Display (≥ 48px):  1.0 - 1.1   (тайт)
Headings (24-48):  1.1 - 1.3
Body (16-18):      1.5 - 1.7
Small (12-14):     1.4 - 1.5

Правило: чем крупнее текст, тем меньше line-height. Иначе строки "разваливаются".

Vertical spacing (между блоками)

В пределах одного блока:
  abzac в abzaц: line-height (без extra margin)
  abzac → следующий abzac: 1em (или 16-24px)

Между блоками:
  H2 → следующий abzac: меньше (заголовок к контенту)
  abzac → H2: больше (контент к новому разделу)

Пример:
  h1 { margin-top: 0; margin-bottom: 24px; }
  h2 { margin-top: 64px; margin-bottom: 16px; }
  h3 { margin-top: 48px; margin-bottom: 12px; }
  p  { margin: 0 0 16px 0; }

Baseline grid

Идея: все элементы привязаны к одной невидимой сетке.

Базовый шаг = line-height body.

Если body 16px / line-height 24px → baseline = 24px
Все вертикальные spacings кратны 24px (24, 48, 72, 96...)

В реальности — это идеал, на практике достаточно "кратно 4 или 8px".

Ширина строки (line length)

Body: 50-75 символов (~30-60ch)
Optimum: 65 символов

Слишком короткая → глаз дёргается Слишком длинная → теряет место

.prose { max-width: 65ch; }

Whitespace правила

✓ Group related — связанные элементы ближе ✓ Separate sections — разделы дальше ✓ More space at top of section than bottom (визуально равно) ✓ Big elements need big space вокруг

Type rhythm на странице

Hero
  Eyebrow (12px)
  ↓ space-2 (8px)
  H1 (72px)
  ↓ space-6 (24px)
  Subhead (20px)
  ↓ space-8 (32px)
  CTA buttons

Большой текст требует большего space между.

Тестирование

1. Распечатай страницу. Если кажется зажатой — увеличь spacing.
2. Скрин на 100% scale. Сравни с reference сайтами (Stripe, Linear).
3. Проверь на mobile — пропорции должны масштабироваться.

Анти-паттерны

• ❌ Все margins по 16px — нет иерархии
• ❌ Slim spacing вертикально + wide horizontal — несбалансировано
• ❌ Line-height 1 для body — нечитаемо
• ❌ Line-height 1.8 для headings — разваливается
• ❌ Same spacing до и после заголовка (должен быть больше до)

Чек-лист

• База кратна 4 или 8px
• Line-height пропорциональна размеру
• Width body ~65ch
• Перед H2 больше места чем после
• Адаптивная шкала (mobile меньше gaps)