Калькулятор clamp() для плавного шрифта

Калькулятор clamp() для плавного шрифта: для чего нужен

С clamp() текст растёт вместе с шириной экрана без множества media queries: он мал на телефоне, велик на компьютере и плавно меняется между ними.

Калькулятор считает прямую между минимальным и максимальным размерами на выбранных вами ширинах экрана и возвращает значение в rem, учитывающее шрифт, настроенный пользователем. Он показывает размер на каждой распространённой ширине и предупреждает, когда максимум превышает минимум более чем в 2,5 раза: после этого масштабирование на 200%, требуемое WCAG 1.4.4, может перестать работать.

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

1. Укажите минимальный и максимальный размеры в px.
2. Выберите, между какими ширинами экрана он растёт.
3. Скопируйте готовый clamp().

Когда использовать

• Заголовки, подстраивающиеся под телефон и компьютер.
• Плавные отступы между секциями.
• Типографская шкала без media queries.

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

Как работает clamp()?

clamp(минимум, предпочтительное, максимум) использует предпочтительное значение, пока оно находится между границами. Предпочтительное задаётся прямой: значение в rem плюс доля vw, растущая вместе с шириной экрана: на телефоне оно равно минимуму, а на компьютере достигает максимума.

Почему rem, а не px?

rem следует размеру шрифта, выбранному пользователем. С px тот, кто увеличил базовый шрифт из-за трудностей с чтением, не увидит разницы.

Что за предупреждение о масштабировании?

WCAG требует, чтобы текст можно было увеличить на 200%. Поскольку часть в vw не растёт при масштабировании, максимум, намного превышающий минимум, может помешать этому. Безопасное практическое правило: максимум не больше чем в 2,5 раза превышает минимум.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты