Загрузка...
Загрузка...
Found a bug, outage, or unexpected behavior in reChecker? Send us a message and we will check and fix it.
Генератор гармоничной типографской шкалы с живым превью и экспортом в 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. Это создаёт визуальную гармонию и иерархию.
Guides and tips for this topic