Скил «Типографика»: модульная шкала размеров и интерлиньяжа

Одно соотношение на всю шкалу, 6–8 ступеней с ролями, fluid-версия на clamp(). CSS-переменные готовы к копированию.

Шаги

1. 1Выберите соотношение шкалы

   1.125 (major second) — плотные интерфейсы. 1.25 (major third) — универсально. 1.333 (perfect fourth) — выразительные заголовки. Соотношение одно на всю систему — это и есть «модульность».

2. 2Постройте шкалу от базового размера

   База 16px. Дальше умножайте/делите на соотношение: caption 12–13, текст 16, сабхед 20, H3 24–25, H2 31–32, H1 39–40, дисплей 48–61. Получается 6–8 ступеней — не больше.

3. 3Назначьте веса и интерлиньяж

   Два-три веса (regular, medium, semibold — не пять). Интерлиньяж: 1.4–1.5 для текста, 1.1–1.2 для крупных заголовков. Трекинг: минусовой для дисплея, нулевой или плюсовой для капса.

   ПРОМПТ ДЛЯ АГЕНТА

   Ты — типограф интерфейсов. Построй модульную типографическую шкалу для [продукт]: база 16px, соотношение [1.25/1.333]. Дай: шкалу размеров (6–8 ступеней с ролями), рекомендуемые веса, интерлиньяж для каждой ступени, fluid-версию на clamp() для адаптива. Выдай готовый блок CSS-переменных.

   📋 Скопировать промпт⚡ Обкатать

4. 4Переведите на fluid-значения и внедрите

   Каждая ступень — clamp(min, preferred, max), чтобы шкала жила и на 320px, и на десктопе. Зафиксируйте в CSS-переменных; запретите «одиночные» размеры вне шкалы на уровне договорённостей с командой.

✅ Сделал материал, если:

• ☐Одно соотношение на всю шкалу
• ☐6–8 ступеней с назначенными ролями
• ☐Не больше трёх начертаний
• ☐Интерлиньяж 1.4–1.5 у текста, 1.1–1.2 у заголовков
• ☐Шкала переведена на clamp()