Browser default is 16. Only change this if you have overridden it.
Test the result at real viewport sizes. clamp() is widely supported, but always confirm the minimum is readable on a small phone and that zooming to 200% still works.
Calculated entirely in your browser. Nothing you enter is sent anywhere.
How to use it
Set the two sizes
The smallest value on a phone and the largest on a wide screen.
Set the two viewports
Where it stops shrinking and where it stops growing. 375 and 1440 are sensible defaults.
Copy the value
Paste it straight into your stylesheet. The preview shows what it resolves to at common widths.
How the calculation works
clamp() takes three arguments: a minimum, a preferred value, and a maximum. The preferred value is where the work happens, and it is a linear equation expressed in viewport width units plus an offset.
The slope is the change in size divided by the change in viewport width. Multiply by 100 and you have the vw component. The offset is whatever makes the line pass through your minimum at your lower viewport.
Output in rem rather than px matters more than it looks. A user who has increased their browser font size gets a larger result from rem and no change at all from px, which is why px body text is an accessibility problem rather than a style choice.
What this calculator does not do
It does not check contrast or line length. A heading that scales beautifully can still produce lines too long to read comfortably on a wide screen.
It assumes a linear relationship between the two breakpoints, which is what clamp does. If you need a different curve you need separate media queries.
It does not validate browser support for you. clamp() is widely supported, but always test the result at real viewport sizes and at 200 percent zoom.
Questions
Why use clamp instead of media queries?
It scales continuously rather than jumping at breakpoints, and it is one line instead of several blocks.
Should I use rem or px?
rem for anything a person reads. px ignores the user browser font size setting, which breaks accessibility for people who have changed it.
What viewport range should I pick?
375px to 1440px covers most real devices. Going below 320px or above 1920px rarely changes anything useful.
Is a high vw value a problem?
Above about 8vw the size changes very fast as the window resizes, which looks unstable. Narrow the size range or widen the viewport range.
Related calculators
Page Weight Budget
How many KB before your LCP target.
LIVEImage File Size Estimator
Estimate output size before exporting.
LIVEAspect Ratio Calculator
Resize without distorting.
LIVESomething wrong with this calculator? Report it and it gets fixed or taken down.
