Типографическая шкала (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… Единая шкала для типографики и отступов создаёт ритм и визуальную согласованность.
Рекомендации
- Один ratio на проект — смешение разных шкал создаёт визуальный шум
- Проверять на мобильных — мелкие ступени могут быть нечитаемы
- Связывать с сеткой — отступы и margin можно привязать к той же шкале
- Документировать — зафиксировать базу, 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. Подходит для дизайн-систем и веб-проектов.