Fluid Typography & Spacing Clamp Generator
Works on any CSS property, not just font-size — padding, gap, border-radius, letter-spacing, line-height. Drag the curve itself (or the slider) to simulate a screen size, and watch exactly where you land.
What the CSS clamp() function is doing
clamp(min, preferred, max) locks a value between a floor and a ceiling while letting it flow smoothly in between, using a viewport-width unit for the preferred value. The generator solves for the slope and offset between your two size/viewport pairs so the value lands exactly on both endpoints — visualized directly on the curve graph above.
Fluid values for more than just type
The same clamp() math applies to padding, gap, border-radius, letter-spacing, and line-height just as well as font-size — switch the property above and the preview updates to demonstrate that specific property scaling, with output in either rem or px.
Worked example: 16px to 40px between 360px and 1440px
With a minimum of 16px, a maximum of 40px, and viewports from 360px to 1440px, the generator writes:
.fluid-element {
font-size: clamp(1.000rem, 0.500rem + 2.2222vw, 2.500rem);
}
The middle value is a straight line through those two points. Its slope is (40 − 16) ÷ (1440 − 360) = 0.0222, which is 2.2222vw. Its intercept is 16 − 0.0222 × 360 = 8px, which is 0.5rem. The text grows smoothly along that line, and clamp() stops it at 1rem on the small end and 2.5rem on the large end.
The minimum, maximum, and intercept are in rem, so they still respond to the user's browser font-size setting. Only the vw part depends on the viewport. The rem values here assume the browser default of 16px per rem.
Computed size at common viewport widths
| Viewport | Raw formula | Size used |
|---|---|---|
| 360px | 16.00px | 16.00px (minimum) |
| 768px | 25.07px | 25.07px |
| 1024px | 30.76px | 30.76px |
| 1440px | 40.00px | 40.00px (maximum) |
| 1920px | 50.67px | 40.00px (clamped to maximum) |
Frequently asked questions
What does the CSS clamp() function actually do?
clamp(min, preferred, max) picks whichever value keeps the preferred value between the min and max bounds — so as the viewport shrinks or grows, your font-size scales fluidly until it hits either limit, then stops.
Why use clamp() instead of media query breakpoints?
Media queries jump text size at fixed breakpoints, which can look abrupt. clamp() scales continuously between your min and max, so text resizes smoothly as the viewport changes rather than snapping at specific widths.
What unit should the 'preferred' middle value use?
A viewport-relative unit like vw is what makes it fluid — a value in px alone wouldn't scale at all. Combining vw with a rem offset (e.g. 2rem + 1vw) is common so the fluid part is anchored to the user's base font size too.
Does clamp() work for spacing and width, not just font-size?
Yes — clamp() works on any CSS property that accepts a length value, including padding, margin, width, and gap. Fluid spacing that scales with the viewport is a common secondary use once fluid type is set up.
