Настройка шкалы заголовков (clamp, tracking, leading)

Действуй как типограф. Построй шкалу заголовков h1-h6 на базе {{base_size}} и модульного шага {{ratio}}, где каждый размер имеет правильные tracking и leading, плавно тянется через clamp() от мобайла до десктопа и не ломается на длинных русских словах.

1. Модульная шкала — выбор шага

Шаг определяет контраст между уровнями:

• 1.125 (major second) — мягкий, для документации, текстовых сайтов
• 1.25 (major third) — универсальный, баланс контраста и плотности
• 1.333 (perfect fourth) — выразительный, для маркетинга
• 1.5 (perfect fifth) — драматичный, для landing с одним героем
• 1.618 (golden) — редко работает на 6 уровнях, h1 улетает

Для приложений бери {{ratio}} = 1.25. Для лендингов — 1.333. Не смешивай две шкалы в одном проекте.

2. Шкала на base = 16px, ratio = 1.25

h6 → 16px   (1.00 × base)
h5 → 20px   (1.25)
h4 → 25px   (1.25²)
h3 → 31.25px (1.25³)
h2 → 39px   (1.25⁴)
h1 → 49px   (1.25⁵)
display → 61px (1.25⁶)

Округляй вверх до целых только для финального CSS (49 → 49, не 48).

3. clamp() — плавность между мобайлом и десктопом

Формула: clamp(MIN, PREFERRED, MAX), где PREFERRED — линейная функция от viewport.

/* h1: на мобайле 32px, на 1440px+ — 56px */
h1 {
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  /* 32px → 56px между 320 и 1440 */
}

Расчёт PREFERRED: (MAX - MIN) / (vwMax - vwMin) × 100 = vw-коэф, base = MIN - vwMin × vw-коэф / 100.

Все 6 уровней:

:root {
  --fs-h1: clamp(2rem,     1.40rem + 2.50vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 1.20rem + 1.80vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.10rem + 1.20vw, 2.125rem);
  --fs-h4: clamp(1.125rem, 0.95rem + 0.80vw, 1.625rem);
  --fs-h5: clamp(1rem,     0.90rem + 0.50vw, 1.25rem);
  --fs-h6: 1rem; /* стабильно — это label */
}

4. Tracking (letter-spacing) — обратная пропорция размеру

Правило: чем больше размер, тем меньше tracking. На больших размерах буквы и так далеко друг от друга — добавочный spacing разрыхляет.

h1, .display { letter-spacing: -0.03em; } /* -3% — плотно */
h2          { letter-spacing: -0.02em; } /* -2% */
h3          { letter-spacing: -0.015em;} /* -1.5% */
h4          { letter-spacing: -0.01em; } /* -1% */
h5          { letter-spacing: 0;       } /* 0 */
h6, .label  { letter-spacing: 0.04em;  } /* +4% — для caps */
body        { letter-spacing: 0;       }
.small      { letter-spacing: 0.01em;  } /* +1% — раскрываем мелкое */

Caps (h6 как метка): +4-8%, обязательно. Без tracking капс выглядит душной этикеткой.

5. Leading (line-height) — тоже обратная пропорция

Большие размеры → плотный leading. Маленькие → воздушный.

h1, .display { line-height: 1.05; } /* почти впритык */
h2          { line-height: 1.15; }
h3          { line-height: 1.25; }
h4          { line-height: 1.35; }
h5          { line-height: 1.45; }
h6          { line-height: 1.5;  }
body        { line-height: 1.55; } /* 1.5-1.7 для русского */
caption     { line-height: 1.4;  } /* мелкое плотнее */

Почему обратно: оптическая длина строки. На h1 размер 56px, leading 1.5 даст 84px между строками — пропасть. На body 16px, leading 1.2 — буквы слипаются.

6. Длинные русские слова — отдельный риск

Русский в среднем на 15-25% длиннее английского. «Регистрация», «Производительность», «Конфиденциальность» в h1 на мобайле вылезают за viewport или переносятся в неудобном месте.

Защита:

h1, h2, h3 {
  /* мягкие переносы по словам, а не в середине */
  overflow-wrap: break-word;
  word-break: normal; /* не break-all! */
  hyphens: auto;
  /* пробел между словами не растягивается экстремально */
  text-wrap: balance; /* Safari 17+, Chrome 114+ */
}

text-wrap: balance — изменилось в 2024: теперь это must-have для заголовков. Распределяет строки равномерно, не оставляет одинокое слово на последней.

Тест: возьми 15 реальных русских заголовков из контента и прогони через шкалу на 360px viewport:

1. «Конфиденциальность данных в облачных сервисах»
2. «Производительность под нагрузкой»
3. «Регистрация занимает 30 секунд»
4. «Биометрическая аутентификация»
5. «Совместная работа в реальном времени»

Любой заголовок, который ломается посреди слова без hyphens или вылезает за край — править clamp() MIN или сам текст.

7. Иерархия через вес, не только размер

Между h1 и h2 разница в размере должна сопровождаться разницей в весе:

h1 { font-weight: 700; }  /* bold */
h2 { font-weight: 650; }  /* если переменный */
h3 { font-weight: 600; }
h4 { font-weight: 600; }
h5 { font-weight: 550; }
h6 { font-weight: 500; text-transform: uppercase; }

Переменные шрифты (Inter Variable, Geist) позволяют тонкие 50-шаги — пользуйся.

8. Optical sizing

Если шрифт это поддерживает (Inter Variable opsz, Source Serif 4):

h1, .display { font-optical-sizing: auto; }

Дисплейный oversize получает более тонкие штрихи и плотные буквы — заголовок выглядит дороже.

9. Формат вывода

## Headline scale

### Scale (ratio = {{ratio}})
| Level | Size (clamp) | Weight | Tracking | Leading |
|---|---|---|---|---|
| display | clamp(2.5rem, ..., 5rem) | 700 | -0.04em | 1.0 |
| h1 | clamp(2rem, ..., 3.5rem) | 700 | -0.03em | 1.05 |
| h2 | clamp(1.625rem, ..., 2.75rem) | 650 | -0.02em | 1.15 |
| h3 | ... | 600 | -0.015em | 1.25 |
| h4 | ... | 600 | -0.01em | 1.35 |
| h5 | ... | 550 | 0 | 1.45 |
| h6 | 1rem | 500 caps | +0.04em | 1.5 |

### Защита от русских длинных слов
- text-wrap: balance
- overflow-wrap: break-word
- hyphens: auto

### Тесты
- [ ] 15 реальных RU-заголовков на 360px viewport
- [ ] Скриншоты h1 на 320 / 768 / 1280 / 1920
- [ ] Сравнение leading: высота строки ≥ 1.5× размер на body

Anti-patterns

• ❌ Фиксированные размеры (h1 { font-size: 56px }) — на мобайле h1 ломает viewport, дизайнер плачет.
• ❌ Один leading 1.5 для всех уровней — h1 разлетается в космос, h6 норм. Иерархия разрушена.
• ❌ Positive tracking на крупных заголовках (h1 { letter-spacing: 0.05em }) — выглядит как 90-е, буквы плывут.
• ❌ Negative tracking на body (body { letter-spacing: -0.02em }) — буквы слипаются, читаемость падает на 20%.
• ❌ Шкала 1.618 на 6 уровнях — h1 становится 67px на 16px base, нерабочая пропорция в интерфейсе.
• ❌ word-break: break-all — русское слово рубится в любом месте, типографически дико.
• ❌ Игнор text-wrap: balance в 2026 — в одной строке остаётся одинокая «и» висящая на конце.
• ❌ clamp() с одинаковым MIN и MAX (clamp(2rem, ?, 2rem)) — то же самое что фикс, бессмысленно.
• ❌ vw-коэффициент > 4 — заголовок на 4K-мониторе становится монструозным (h1 = 120px).
• ❌ Тест шкалы только на «Lorem Ipsum» — русский контент сломает её на проде через час после деплоя.
• ❌ Шкала h1-h6 + 5 ad-hoc размеров (.title-big, .heading-hero) — система превратилась в свалку.