Загрузка...
Загрузка...
Нашли баг, сбой или ошибку в работе reChecker? Есть предложение по улучшению? Напишите нам, чтобы мы проверили и исправили проблему в сервисе.
Генератор гармоничной типографской шкалы с живым превью и экспортом в 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.
Модульная шкала — набор размеров шрифтов, построенных по математическому соотношению. Базовый размер умножается на коэффициент для каждого следующего уровня. Например, при базе 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