Инструмент

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

Плавная типографика и отступы: задайте размер на узком и широком экране — калькулятор подберёт clamp(), который плавно меняет размер между ними.

Внимание

Инструменту нужен JavaScript. Без него работают учебник и справочник.

Свойство

Единицы результата

rem px

Размер на узком экране, px Размер на широком экране, px Узкий экран, px Широкий экран, px

Считается, что 1rem = 16px — так в браузерах по умолчанию.

Пример текста

Ширина экрана для предпросмотра

820px

360px: 16px
768px: 19.55px
1024px: 21.77px
1280px: 24px
1920px: 24px

Код

font-size: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem);

До ширины экрана 360px размер равен 16px, от 1280px — 24px, а между ними плавно меняется. Среднее значение clamp() — сумма постоянной части и части в vw: чем шире экран, тем больше результат; края не дают ему выйти за пределы. Размеры записаны в rem, поэтому учитывают размер шрифта, который пользователь выбрал в настройках браузера.