Quick Answer
What does CSS clamp() do?
// Answer
clamp(MIN, PREFERRED, MAX) locks a value between a minimum and maximum while letting it scale fluidly in between. For responsive type, the preferred value mixes a rem base with a vw unit so text grows with the viewport but never gets too small or too large.
Why use this tool
Fluid without media queries
Before clamp(), fluid type meant stacks of media queries. Now one line scales smoothly across all screen sizes. This calculator does the linear-interpolation math so your text scales exactly between your chosen breakpoints.
FAQ
Frequently asked questions
Type that scales smoothly with the viewport width instead of jumping at fixed breakpoints.
The rem part keeps a stable base and respects user font settings; the vw part adds the fluid scaling.
Yes, clamp() is supported in all modern browsers.
Yes, free and in your browser.
Advertisement
More tools