Генератор типографической шкалы
Выберите базовый размер шрифта и коэффициент, и из них получатся все размеры заголовков и подписей — каждая ступень равна предыдущей, умноженной на коэффициент. Посмотрите размеры на своём тексте и скопируйте их как пользовательские свойства CSS.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Введите базовый размер — обычно это размер основного текста, например 16 px.
- Выберите коэффициент или «Свой», чтобы ввести собственный.
- Укажите, сколько ступеней выше и ниже базового нужно.
- Проверьте предпросмотр и скопируйте CSS-переменные в rem или px.
Формула
размер(ступень) = база × коэффициент^ступень
rem = размер в px ÷ 16
Размеры округляются до 2 знаков после запятой в px и до 3 — в rem.
Разобранный пример
База 16 px, большая терция 1,25: ступень 1 — 16 × 1,25 = 20 px (1.25rem), ступень 2 — 20 × 1,25 = 25 px (1.563rem), ступень 5 — 16 × 1,25^5 = 48,83 px (3.052rem). Вниз: ступень −1 — 16 ÷ 1,25 = 12,8 px (0.8rem), ступень −2 — 10,24 px (0.64rem).
Советы
- Основному тексту редко нужно больше 5 ступеней вверх; остальные — для крупных заголовков.
- Размеры меньше примерно 12 px трудно читать; ступени вниз оставьте для подписей и сносок.
- Для «резиновой» типографики сделайте две шкалы (мобильную и десктопную) и смешайте их через CSS clamp().
Частые вопросы
Что такое модульная типографическая шкала?
Набор размеров шрифта, в котором каждый размер равен предыдущему, умноженному на один и тот же коэффициент. Размеры согласованы между собой, поэтому заголовки, основной текст и подписи выглядят единой системой, а не случайно подобранными числами.
Какой коэффициент выбрать?
Малые коэффициенты вроде 1,125 или 1,2 держат заголовки близко к основному тексту — это подходит плотным интерфейсам и маленьким экранам. Большие вроде 1,333 или 1,5 дают эффектные заголовки для журнальных страниц. Музыкальные названия (терции, кварты) — просто имена распространённых коэффициентов.
Почему rem, а не px?
Размеры в rem отсчитываются от корневого размера шрифта, поэтому растут, когда читатель увеличивает размер текста в браузере. Генератор делит пиксели на 16 — корневой размер в браузерах по умолчанию.
Как использовать переменные?
Вставьте блок :root в таблицу стилей и используйте переменные, например h1 { font-size: var(--step-4); } и body { font-size: var(--step-0); }. Ступень 0 — базовый размер, отрицательные ступени меньше.