Why does the middle value mix rem and vw?

A pure vw value scales strictly with the viewport, so a reader who increases their browser font size sees no change at all — their setting is effectively ignored. Adding a rem constant keeps the value responsive to the root font size, giving fluid layout and accessibility together.

What order are the three clamp() arguments in?

Minimum, preferred, maximum. The browser uses the preferred value but never lets it fall below the minimum or rise above the maximum. If the minimum exceeds the maximum the minimum wins, which is why this tool rejects that input.

CSS / FRONTEND · RUNS IN YOUR BROWSER

CSS clamp() Fluid Size Calculator

Turn a minimum, a maximum, and a viewport range into a fluid clamp() value.

Uses linear interpolation and shows the resulting size at common viewport widths so the curve can be checked.

Sizes and viewport range

The tool solves the line through both endpoints and clamps it between the minimum and maximum.

Minimum size

Minimum viewport width

Maximum size

Maximum viewport width

Root font size

clamp() result

font-size

font-size: clamp(1.125rem, 0.5968rem + 2.2535vw, 2.625rem);

Formula: 1.125rem → 2.625rem, 0.5968rem + 2.2535vw

Rendered size by viewport width

Viewport width	Rendered size
`375px`	`18px`
`768px`	`26.86px`
`1024px`	`32.63px`
`1280px`	`38.39px`
`1440px`	`42px`

About this tool

Enter the size you want on a small screen and on a large one, plus the viewport widths those sizes belong to, and the tool solves the line between them into `clamp(minimum, constant + coefficient vw, maximum)`. The table underneath lists the resulting pixel size at 375, 768, 1024, and 1280, so you can sanity-check the scaling curve without opening a browser.

How it works

Enter the minimum size and the viewport width it applies at.
Enter the maximum size and its viewport width.
Check the scaling table, then copy the clamp() value.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

Why does the middle value mix rem and vw?: A pure vw value scales strictly with the viewport, so a reader who increases their browser font size sees no change at all — their setting is effectively ignored. Adding a rem constant keeps the value responsive to the root font size, giving fluid layout and accessibility together.
What order are the three clamp() arguments in?: Minimum, preferred, maximum. The browser uses the preferred value but never lets it fall below the minimum or rise above the maximum. If the minimum exceeds the maximum the minimum wins, which is why this tool rejects that input.

← All CSS / Frontend tools