Калькулятор CSS clamp()

Как пользоваться

1. Введите минимальный и максимальный размер шрифта в пикселях, например 16px на телефоне и 32px на широком экране.
2. Укажите ширины экрана, между которыми шрифт должен расти: обычно 320px и 1280px.
3. Выберите единицу результата: rem (рекомендуется) или px. Для rem проверьте базовый размер шрифта — обычно 16.
4. Двигайте маркер на графике или ползунок «Ширина экрана для проверки» — пример заголовка покажется в размере для этой ширины. Нажмите «Копировать», чтобы взять код.

Как это работает

Как работает формула

Размер шрифта меняется по прямой, проходящей через две точки: (minVw, min) и (maxVw, max). Наклон считается как slope = (max − min) / (maxVw − minVw), смещение — как intercept = min − slope × minVw. В CSS наклон записывают в единицах vw: 1vw — это 1% ширины окна, поэтому берётся slope × 100. Получается clamp(min, intercept + slope×100vw, max): ниже минимальной ширины размер постоянен, между ширинами растёт, выше максимальной снова постоянен.

font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);

Почему в формуле нужен rem

Размер, записанный только в vw (font-size: 2vw), не увеличивается при масштабировании страницы: при зуме ширина окна в CSS-пикселях уменьшается, и физический размер текста остаётся прежним. Это нарушает критерий WCAG 1.4.4 Resize Text — текст должен увеличиваться до 200%. Часть в rem реагирует и на зум, и на размер шрифта в настройках браузера; границы в rem тоже масштабируются. Часто приводят правило: максимум не больше примерно 2,5 минимума.

min(), max() и clamp()

clamp(MIN, VAL, MAX) задаёт нижнюю и верхнюю границу сразу и равна max(MIN, min(VAL, MAX)). min() ограничивает только сверху, max() — только снизу.

font-size: min(5vw, 3rem);   /* не больше 3rem */
font-size: max(1rem, 2vw);   /* не меньше 1rem */

clamp() — не только для шрифтов

Функцию принимает любое свойство с длиной: padding, margin, gap, width. Плавные отступы сохраняют пропорции вместе с текстом. Для отступов часто хватает простого clamp(1rem, 5vw, 3rem), а средний член из калькулятора пригодится, когда нужен точный переход между двумя ширинами.

padding-inline: clamp(1rem, 5vw, 3rem);
gap: clamp(0.75rem, 2vw, 2rem);

Частые вопросы