Типографическая шкала: как создать систему размеров шрифтов

Типографическая шкала (modular scale) — система пропорциональных размеров шрифта, основанная на математическом соотношении. Вместо произвольных значений (14px, 18px, 22px) получается гармоничная иерархия. В этой статье разберём, что такое модульная шкала, популярные соотношения, реализацию через CSS-переменные, интеграцию с Tailwind и адаптивную типографику.

Для генерации типографической шкалы используйте генератор типографической шкалы на reChecker.

Что такое модульная шкала

Модульная шкала — последовательность размеров, где каждый следующий получен умножением предыдущего на постоянный коэффициент (ratio). Например, при ratio 1.25 и базе 16px:

• 16px × 1.25 = 20px
• 20px × 1.25 = 25px
• 25px × 1.25 = 31.25px

Получается шкала: 16, 20, 25, 31.25, 39, 48.8… — вместо случайных 14, 18, 22, 28.

Популярные соотношения (ratios)

Название	Ratio	Характер	Применение
Minor Second	1.067	Плавный, сдержанный	Плотные интерфейсы, документы
Major Second	1.125	Умеренный	Универсальный выбор
Minor Third	1.2	Заметный контраст	Блоги, редакции
Major Third	1.25	Выразительный	Маркетинг, лендинги
Perfect Fourth	1.333	Сильный контраст	Заголовки, акценты
Augmented Fourth	1.414	Драматичный	Креативные проекты
Perfect Fifth	1.5	Очень контрастный	Плакаты, hero-блоки
Golden Ratio	1.618	Классическая гармония	Премиум, издательства

Minor Third (1.2) и Perfect Fourth (1.333) — частые выборы для веба: достаточный контраст без перегруза. Golden Ratio (1.618) — классика, но даёт крупные шаги.

Практическое применение

Шкала в обе стороны

Шкала строится вверх (заголовки) и вниз (мелкий текст, подписи):

… 0.64, 0.8, 1, 1.25, 1.563, 1.953, 2.44 … (rem)
   -2   -1   0   +1    +2     +3     +4

При базе 16px и ratio 1.25: 0 = 16px, +1 = 20px, +2 = 25px, -1 = 12.8px.

Сопоставление с HTML

Шкала	HTML	Типичное назначение
-1	—	Подписи, captions
0	body	Основной текст
+1	h4, h5	Подзаголовки
+2	h3	Заголовки секций
+3	h2	Крупные заголовки
+4	h1	Главный заголовок

Подход с CSS-переменными

:root {
  --font-base: 1rem; /* 16px */
  --ratio: 1.25;

  --text-xs: calc(var(--font-base) / var(--ratio));
  --text-sm: calc(var(--font-base) / var(--ratio) * var(--ratio));
  --text-base: var(--font-base);
  --text-lg: calc(var(--font-base) * var(--ratio));
  --text-xl: calc(var(--font-base) * var(--ratio) * var(--ratio));
  --text-2xl: calc(var(--text-xl) * var(--ratio));
  --text-3xl: calc(var(--text-2xl) * var(--ratio));
  --text-4xl: calc(var(--text-3xl) * var(--ratio));
}

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

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }

Смена --ratio или --font-base пересчитывает всю шкалу.

Интеграция с Tailwind

Tailwind задаёт размеры через fontSize в tailwind.config.js. Можно встроить модульную шкалу:

// tailwind.config.js
function getScale(base, ratio, steps) {
  const sizes = {};
  for (let i = -2; i <= steps; i++) {
    const size = base * Math.pow(ratio, i);
    const key = i === 0 ? 'base' : i > 0 ? `${i}xl` : `-${Math.abs(i)}`;
    sizes[key] = [`${size}px`, { lineHeight: 1.5 }];
  }
  return sizes;
}

module.exports = {
  theme: {
    extend: {
      fontSize: getScale(16, 1.25, 6),
    },
  },
};

Или использовать готовые значения Tailwind и подстроить их под выбранное соотношение — text-sm, text-base, text-lg уже образуют шкалу, её можно проверить на соответствие ratio.

Адаптивная типографика

Базовый размер и ratio можно менять на брейкпоинтах:

:root {
  --font-base: 1rem;
  --ratio: 1.2;
}

@media (min-width: 768px) {
  :root {
    --font-base: 1.0625rem; /* 17px */
    --ratio: 1.25;
  }
}

@media (min-width: 1200px) {
  :root {
    --font-base: 1.125rem; /* 18px */
  }
}

На мобильных — компактнее, на десктопе — крупнее. Альтернатива — clamp() для плавного масштабирования:

h1 {
  font-size: clamp(1.5rem, 2vw + 1.5rem, 3rem);
}

Двухосевая шкала (типографика + вертикальный ритм)

Продвинутый подход — связывать типографическую шкалу с вертикальным ритмом. Базовый line-height (например, 1.5) умножается на тот же ratio или на фиксированный шаг. Тогда margin-top и margin-bottom блоков кратны базовой линии. Текст и отступы выстраиваются в единую сетку. Реализация сложнее, но даёт визуальную согласованность на больших страницах.

Fluid typography с clamp()

Современный CSS позволяет плавное масштабирование без медиа-запросов:

h1 {
  font-size: clamp(1.5rem, 5vw + 1rem, 3rem);
}

Минимум 1.5rem, максимум 3rem, между ними — линейная интерполяция от 5vw + 1rem. На узких экранах — ближе к минимуму, на широких — к максимуму. Формула подбирается эмпирически; clamp() можно комбинировать с модульной шкалой, задавая min и max из рассчитанных ступеней.

Генератор типографической шкалы

Ручной расчёт шкалы для каждого ratio трудоёмок. Генератор типографической шкалы на reChecker позволяет:

• Выбрать базовый размер (px или rem)
• Выбрать соотношение (Minor Third, Perfect Fourth, Golden Ratio и др.)
• Получить полную шкалу вверх и вниз
• Экспортировать CSS-переменные или SCSS
• Подключить Google Fonts (опционально)

Инструмент подходит для быстрого прототипирования типографики и для дизайн-систем.

Line-height и межбуквенный интервал

Размер шрифта — не единственный параметр. С ростом размера обычно уменьшают line-height:

h1 {
  font-size: var(--text-4xl);
  line-height: 1.2;
}

p {
  font-size: var(--text-base);
  line-height: 1.6;
}

Крупные заголовки — 1.1–1.3, основной текст — 1.5–1.7. Для заголовков иногда полезен letter-spacing для читаемости.

Пример полной шкалы (Minor Third, база 16px)

Ступень	Размер	rem	Назначение
-2	11.1px	0.694rem	Мелкие подписи
-1	13.3px	0.833rem	Captions
0	16px	1rem	Body
+1	19.2px	1.2rem	h4
+2	23px	1.44rem	h3
+3	27.6px	1.728rem	h2
+4	33.2px	2.074rem	h1

Шкала для отступов и сетки

Ту же модульную шкалу можно применить к spacing: margin, padding, gap. При ratio 1.25 и базе 8px: 8, 10, 12.5, 15.6, 19.5… Округляйте до целых (8, 10, 12, 16, 20) для удобства. Tailwind использует похожий подход: 4, 8, 12, 16, 20, 24… Единая шкала для типографики и отступов создаёт ритм и визуальную согласованность.

Рекомендации

1. Один ratio на проект — смешение разных шкал создаёт визуальный шум
2. Проверять на мобильных — мелкие ступени могут быть нечитаемы
3. Связывать с сеткой — отступы и margin можно привязать к той же шкале
4. Документировать — зафиксировать базу, ratio и назначение ступеней в style guide

FAQ

Какое соотношение выбрать для шкалы?

Для веба часто используют Minor Third (1.2) или Perfect Fourth (1.333). Minor Third — более сдержанный, Perfect Fourth — контрастнее. Golden Ratio (1.618) — для выразительных заголовков и креативных проектов.

Как применить типографическую шкалу в CSS?

Задайте базовый размер и ratio в CSS-переменных, вычисляйте ступени через calc() и умножение. Например: --text-lg: calc(var(--font-base) * var(--ratio)). Применяйте переменные к font-size заголовков и текста. Для генерации используйте инструмент reChecker.

Как интегрировать шкалу с Tailwind?

Расширьте theme.fontSize в tailwind.config.js, вычисляя размеры по формуле base * ratio^n. Либо подберите подходящие text-* классы Tailwind и проверьте их на соответствие выбранному ratio. Генератор reChecker может экспортировать значения для Tailwind.

Нужно ли менять шкалу на разных экранах?

Не обязательно. Для адаптивности обычно меняют базовый font-size или используют clamp(). При необходимости можно менять и ratio на брейкпоинтах — более крупные шаги на десктопе, более мелкие на мобильных.

Где сгенерировать типографическую шкалу?

Генератор типографической шкалы на reChecker — бесплатный онлайн-инструмент. Выберите базовый размер и соотношение, получите полную шкалу в px и rem, экспортируйте в CSS или SCSS. Подходит для дизайн-систем и веб-проектов.