CSS clamp() Fluid Type
Build a fluid CSS clamp() value for type and spacing.
clamp(1rem, 0.8333vw + 0.8333rem, 1.5rem) How to use
- 1 Enter the minimum and maximum size in pixels.
- 2 Enter the viewport widths where scaling should start and stop.
- 3 Adjust the root font size if it is not 16px.
- 4 Copy the generated clamp() value into your CSS.
About CSS clamp() Fluid Type
The CSS clamp() Fluid Type tool builds a responsive clamp() value that scales a size smoothly between two viewport widths instead of jumping at breakpoints.
You give it a minimum size, a maximum size, and the two viewport widths between which the interpolation should happen, and it returns a ready-to-paste clamp(min, preferred, max) expression.
Fluid typography is the modern way to handle responsive text and spacing.
Rather than defining a font size at every breakpoint, you let the browser interpolate linearly: the value sits at its minimum on small screens, grows in step with the viewport across a chosen range, and locks to its maximum on large screens.
The maths behind the middle term — a vw coefficient plus a rem offset — is fiddly to derive by hand, and a small slip produces text that scales the wrong way or overflows.
This tool does that algebra for you and expresses the result in rem so it respects the user's root font size, with px values converted using the root size you specify (16 by default).
The output works for any length property — font-size, margin, padding, gap — and runs entirely in your browser.
FAQ
Why use rem in the output?
rem values respect the user's root font size, so the type stays accessible if someone changes their browser default. Pixel inputs are converted using the root size you set.
Does this work for spacing as well as text?
Yes. The clamp() value is a length, so you can use it for font-size, margin, padding, gap or any size property.