Плавна масштабна система
Генератор адаптивної шкали
Формуйте clamp() шкали для тексту й відступів, перевіряйте їх на різних ширинах екрана та експортуйте готові токени для проєкту.
Налаштування шкали
Поля мають обмеження діапазону. Якщо введене значення виходить за межі, у розрахунках автоматично використовується найближча допустима межа.
Шкала типографіки
Шкала відступів
Живий перегляд на контрольних ширинах
fs-2xsclamp(16.0000px, 14.6667px + 0.3704vw, 20.0000px)
fs-xsclamp(18.4000px, 16.4000px + 0.5556vw, 24.4000px)
fs-smclamp(21.1600px, 18.2907px + 0.7970vw, 29.7680px)
fs-mdclamp(24.3340px, 20.3397px + 1.1095vw, 36.3170px)
fs-lgclamp(27.9841px, 22.5432px + 1.5114vw, 44.3067px)
fs-xlclamp(32.1817px, 24.8909px + 2.0252vw, 54.0542px)
fs-2xlclamp(37.0090px, 27.3633px + 2.6794vw, 65.9461px)
fs-3xlclamp(42.5603px, 29.9290px + 3.5087vw, 80.4542px)
:root {
--fs-2xs: clamp(16.0000px, 14.6667px + 0.3704vw, 20.0000px);
--fs-xs: clamp(18.4000px, 16.4000px + 0.5556vw, 24.4000px);
--fs-sm: clamp(21.1600px, 18.2907px + 0.7970vw, 29.7680px);
--fs-md: clamp(24.3340px, 20.3397px + 1.1095vw, 36.3170px);
--fs-lg: clamp(27.9841px, 22.5432px + 1.5114vw, 44.3067px);
--fs-xl: clamp(32.1817px, 24.8909px + 2.0252vw, 54.0542px);
--fs-2xl: clamp(37.0090px, 27.3633px + 2.6794vw, 65.9461px);
--fs-3xl: clamp(42.5603px, 29.9290px + 3.5087vw, 80.4542px);
--space-2xs: clamp(8.0000px, 6.6667px + 0.3704vw, 12.0000px);
--space-xs: clamp(9.6000px, 7.6800px + 0.5333vw, 15.3600px);
--space-sm: clamp(11.5200px, 8.8064px + 0.7538vw, 19.6608px);
--space-md: clamp(13.8240px, 10.0434px + 1.0502vw, 25.1658px);
--space-lg: clamp(16.5888px, 11.3810px + 1.4466vw, 32.2123px);
--space-xl: clamp(19.9066px, 12.7982px + 1.9745vw, 41.2317px);
--space-2xl: clamp(23.8879px, 14.2583px + 2.6749vw, 52.7766px);
--space-3xl: clamp(28.6654px, 15.7026px + 3.6008vw, 67.5540px);
}Чому це корисно
Плавна типографіка
Формуйте передбачувану ієрархію тексту, яка масштабуватиметься від мобільного до великого десктопа.
Адаптивні відступи
Створюйте токени відступів, що зберігають ритм на всіх ширинах без ручних медіа-запитів.
Експорт у продакшн
Копіюйте CSS-змінні або JSON і одразу підключайте у Tailwind, Sass-картах чи власній системі токенів.