Typography Scale Generator
Генератор гармоничной типографской шкалы с живым превью и экспортом в CSS, Tailwind и SCSS
Настройки шкалы
Живое превью
Быстрая коричневая лиса
Быстрая коричневая лиса
Быстрая коричневая лиса
Быстрая коричневая лиса
Быстрая коричневая лиса
Быстрая коричневая лиса
Быстрая коричневая лиса
Быстрая коричневая лиса
Визуализация шкалы
Сгенерированный код
:root {
--font-xs: 0.563rem; /* 9px */
--font-sm: 0.75rem; /* 12px */
--font-base: 1rem; /* 16px */
--font-lg: 1.333rem; /* 21.33px */
--font-xl: 1.777rem; /* 28.43px */
--font-2xl: 2.369rem; /* 37.9px */
--font-3xl: 3.158rem; /* 50.52px */
--font-4xl: 4.209rem; /* 67.34px */
}
body {
font-size: var(--font-base);
line-height: 1.5;
}
h6 { font-size: var(--font-lg); }
h5 { font-size: var(--font-xl); }
h4 { font-size: var(--font-2xl); }
h3 { font-size: var(--font-3xl); }
h2 { font-size: var(--font-4xl); }О типографских шкалах
Типографская шкала — это набор размеров шрифтов, построенный по математической пропорции. Каждый следующий размер получается умножением предыдущего на фиксированный коэффициент (ratio).
Малые коэффициенты (1.067–1.200)
Плавные переходы. Подходят для мобильных интерфейсов и текстов с минимальной иерархией.
Крупные коэффициенты (1.333–1.618)
Выраженный контраст. Идеальны для лендингов, заголовков и визуально насыщенных страниц.
О сервисе Typography Scale Generator
Typography Scale Generator строит модульные шкалы размеров шрифтов на основе базового размера и коэффициента. Выберите соотношение (Major Third, Perfect Fourth и др.) — получите готовую шкалу с экспортом в CSS, Tailwind и SCSS.
Часто задаваемые вопросы
Модульная шкала — набор размеров шрифтов, построенных по математическому соотношению. Базовый размер умножается на коэффициент для каждого следующего уровня. Например, при базе 16px и коэффициенте 1.25 (Major Third): 16, 20, 25, 31.25px. Это создаёт визуальную гармонию и иерархию.
Для компактных интерфейсов подойдут Minor Second (1.067) или Major Second (1.125). Для контентных сайтов — Minor Third (1.2) или Major Third (1.25). Perfect Fourth (1.333) и Golden Ratio (1.618) дают выразительный контраст для заголовков. Выбирайте исходя из плотности контента.
Экспортируйте шкалу как CSS-переменные: --text-xs, --text-sm, --text-base, --text-lg и т.д. Применяйте их в стилях: font-size: var(--text-lg). При изменении базы или коэффициента все размеры обновятся автоматически через каскад.
Да. Генератор экспортирует фрагмент для tailwind.config.js с объектом fontSize. Скопируйте его в theme.extend.fontSize — классы вроде text-lg, text-xl будут использовать значения вашей шкалы вместо дефолтных.
Рекомендуется. На мобильных экранах крупные заголовки могут занимать слишком много места. Используйте меньший коэффициент или базовый размер для узких экранов через медиа-запросы. Fluid typography (clamp()) — продвинутый вариант плавного масштабирования без брейкпоинтов.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker