Загрузка...
Загрузка...
Нашли ошибку в reChecker? Опишите, что произошло, и укажите адрес страницы. Оставьте email или телефон — ответим после проверки.
Генератор гармоничной типографской шкалы с живым превью и экспортом в 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).
Плавные переходы. Подходят для мобильных интерфейсов и текстов с минимальной иерархией.
Выраженный контраст. Подходят для лендингов, заголовков и визуально насыщенных страниц.
Typography Scale Generator строит модульные шкалы размеров шрифтов на основе базового размера и коэффициента. Выберите соотношение (Major Third, Perfect Fourth и др.) — получите готовую шкалу с экспортом в CSS, Tailwind и SCSS.
Модульные шкалы: Minor Second, Major Third, Perfect Fourth и др.
Настройка базового размера и количества ступеней
Предпросмотр каждого размера с примером текста
Экспорт в CSS-переменные (custom properties)
Экспорт в Tailwind config (fontSize)
Экспорт в SCSS-переменные
Модульная шкала — набор размеров шрифтов, построенных по математическому соотношению. Базовый размер умножается на коэффициент для каждого следующего уровня. Например, при базе 16px и коэффициенте 1.25 (Major Third): 16, 20, 25, 31.25px. Это создаёт визуальную гармонию и иерархию.
Руководства и советы по теме