📏 Генератор адаптивного CSS clamp() для шрифтов и отступов
Расчет плавной линейной интерполяции для CSS функции clamp(min, val, max), позволяющей шрифтам и отступам пропорционально масштабироваться без громоздких медиа-запросов.
Generated CSS Rule
font-size: clamp(1.125rem, 0.708rem + 1.852vw, 2.375rem);
Responsive Typography That Scales Seamlessly
Сравнение A/B:
📐 Линейная интерполяция CSS clamp(min, val, max) без медиа-запросов
Slope = (Размер_max - Размер_min) / (Экран_max - Экран_min)
Slope_vw = Slope * 100
Intercept_rem = (Размер_min - (Экран_min * Slope)) / 16
CSS: font-size: clamp(Min_rem, Intercept_rem + Slope_vw, Max_rem);
Коэффициент наклона (Slope) вычисляется по формуле (Size_max - Size_min) / (Vw_max - Vw_min). Точка пересечения оси Y рассчитывается в единицах rem относительно базового кегля 16px, обеспечивая идеальную адаптивность интерфейса.
📊 Практические пресеты типографики для мобильных устройств и десктопов
Проверенный эталон: Кегль 16px на экране 375px и 32px на экране 1440px: генерирует `font-size: clamp(1rem, 0.648rem + 1.502vw, 2rem);`. На планшете 768px кегль автоматически составит 21.9px.
⚠️ Доступность масштабирования при пользовательском увеличении шрифта браузера
Важное замечание: Пользовательский зум страницы в браузерах Safari и Chrome требует указания относительных единиц rem для соответствия критерию WCAG 1.4.4 (Resize text).
📐 Эталонная система модульных адаптивных шрифтов
| Элемент | Кегль 375px | Кегль 1440px | Сгенерированный CSS clamp() |
|---|---|---|---|
| H1 Title | 28 px | 48 px | clamp(1.75rem, 1.31rem + 1.88vw, 3rem) |
| H2 Subtitle | 22 px | 32 px | clamp(1.375rem, 1.15rem + 0.94vw, 2rem) |
| Body Text | 15 px | 18 px | clamp(0.938rem, 0.87rem + 0.28vw, 1.125rem) |
🔗 Связанные инструменты
Рекомендуемые калькуляторы и утилиты для непрерывного студийного процесса: