CSS clamp() Builder
Build a clamp() with min/preferred/max from font and viewport range.
Overview
The CSS clamp() Builder produces a fluid clamp(min, preferred, max) value from a minimum font size, a maximum font size, and the viewport range over which they should interpolate linearly. It does the algebra so you don't have to — the linear equation that hits your min and max at the right viewport widths is generated automatically.
Useful for designers and front-end developers learning how to build fluid typography with CSS clamp or how to calculate clamp values for responsive font sizes. This is the standard modern alternative to media-query font-size breakpoints.
How it works
CSS clamp(MIN, VAL, MAX) returns VAL clamped between MIN and MAX. The trick to fluid typography is making VAL a linear function of viewport width — for example, 0.5rem + 1.5vw. The builder solves the two-point equation: at viewport X1 it should equal MIN, at viewport X2 it should equal MAX, producing the Yrem + Zvw term that hits both.
The generator also emits a fallback line in plain rem for browsers that lack clamp() support and warns when the slope is so steep that small viewport changes produce large jumps (a sign your range is too narrow).
Examples
- Min 1rem at 320px, max 1.5rem at 1280px →
font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);. - Heading min 2rem, max 4rem from 640px to 1440px →
clamp(2rem, 0.4rem + 2.5vw, 4rem). - Padding fluid between 16px and 32px from 360px to 1024px → equivalent value in rem.
- Identical min and max collapses to the plain value (no fluid behaviour).
FAQ
Why use vw instead of em?
vw scales with the viewport, which is what you want for fluid type. em scales with the parent font size and doesn't respond to viewport changes.
Should I always include a rem fallback?
Not for evergreen browsers. clamp() has been supported in all major engines since 2020. Only add the fallback if your audit shows traffic from older versions.
What happens above and below the range?
Below the lower viewport, the value sticks at MIN; above the upper viewport, it sticks at MAX. The linear ramp only operates between them.
Can I clamp other properties?
Yes — padding, gap, line-height, border-radius all work with clamp(). The technique is identical, just with units appropriate to the property.