clamp() replaces a stack of media queries with one line of math
Before clamp(), fluid typography usually meant either a single fixed font-size that never adapted, or a series of media queries manually setting different font sizes at different breakpoints — a blunt, step-function approach that jumps abruptly rather than scaling smoothly. clamp(min, preferred, max) solves this with genuine continuous scaling: the preferred value (typically viewport-width-based) grows or shrinks smoothly as the viewport changes, while the min and max values act as hard floors and ceilings that the preferred value can never cross.
This is a fundamentally different mechanism than media queries — there's no discrete jump between breakpoints, just one continuous function that happens to flatten out at both ends once it hits its bounds.
How the three values resolve at any given viewport width
| Condition | What renders | Why |
|---|---|---|
| Preferred value < min | The min value | The floor prevents text from getting too small to read |
| min ≤ preferred ≤ max | The preferred value | The fluid, viewport-scaled size is used directly |
| Preferred value > max | The max value | The ceiling prevents text from growing uncomfortably large |
Building your clamp() value
Set the minimum font size in px — this is the floor, the smallest the text will ever render.
Set the preferred size in vw — the fluid value that actually scales with viewport width.
Set the maximum font size in px — the ceiling, the largest the text will ever render.
Slide the viewport width to preview the computed size at any breakpoint.
Copy the resulting clamp() value directly into your font-size declaration.
Why the preferred value being in vw is what makes it fluid at all
The min and max values are fixed px values by design — they're meant to be absolute limits, not moving targets. The preferred value is where the actual scaling behavior lives, and it's expressed in vw (viewport width units) specifically because vw is defined as a percentage of the current viewport's width — 1vw equals 1% of viewport width, so as the viewport grows or shrinks, a vw-based value automatically grows or shrinks proportionally without any additional calculation. This is the entire mechanism behind clamp()'s fluid behavior: the preferred term does the scaling, and min/max simply cap how far that scaling is allowed to go in either direction.
Finding the breakpoints where min and max take over
Choosing a starting preferred value
A common starting point for typography is somewhere around 2–5vw for the preferred term, though the right value depends heavily on your min and max bounds and how much scaling range you want between them. A larger vw coefficient makes the text more aggressively responsive to viewport changes — scaling faster — while a smaller one produces gentler, more gradual scaling. Rather than guessing at a 'correct' number, the practical approach is to set your min and max bounds first based on your actual design requirements, then adjust the vw coefficient and watch the slider until the transition breakpoints land where you want them relative to common device widths.
Why the preview simulates a fake viewport instead of using your real window
A desktop browser window generally can't be resized down to a 320px-wide phone viewport, which is exactly the kind of narrow width where a font-size floor matters most. To let you actually see and verify that behavior, the tool renders the preview inside a simulated viewport pane that can represent widths your real browser window physically can't reach — giving you an accurate look at how the type will render on a genuinely narrow device without needing to resize your actual browser or switch to responsive dev tools mode.
Common mistakes
Choosing min and max values that are too close together, which limits the range where actual fluid scaling happens and makes clamp() behave almost like a fixed size.
Setting an aggressive vw coefficient without checking where the max breakpoint lands — a preferred value can hit the ceiling sooner than expected on wide monitors.
Assuming clamp() only applies to font-size — the exact same min/preferred/max logic works for padding, margin, gap, width, and any other CSS length property.
Forgetting to verify the min-side breakpoint on narrow viewports — a floor that's set too high can still look oversized on genuinely small phone screens if the preferred value hasn't dropped to the floor yet at that width.
Real use cases
Building responsive heading sizes that scale smoothly from mobile to desktop without a stack of media queries.
Setting fluid padding or gap values that grow proportionally with viewport width, bounded by sensible minimums and maximums.
Replacing a fragmented set of breakpoint-specific font-size rules with a single continuous clamp() declaration.
Fine-tuning where a fluid type scale's floor and ceiling breakpoints land relative to common device widths.
Frequently asked questions
Q: How does clamp() work?
A: clamp(min, preferred, max) returns the preferred value unless it falls below min, in which case min wins, or above max, in which case max wins. For typography, preferred is usually a vw-based value so the size scales with the viewport.
Q: What vw value should I pick?
A: A common starting point is around 2–5vw. The tool shows the breakpoints where min and max take over, so you can tune the coefficient until those breakpoints land on sensible device widths.
Q: Can I use this for padding or gaps too?
A: Absolutely — clamp() works anywhere a length is valid. The same min/preferred/max logic applies to padding, margin, gap, width, and more.
Q: Why does the preview scale a fake viewport?
A: Because your real window can't shrink to 320px on a desktop, the tool simulates a smaller viewport inside the preview pane so you can see how the type will look on a phone.
Q: Are rem units supported?
A: The inputs are in px and vw for clarity, but you can convert the output by dividing px values by 16, the default root font size — for example, 16px is roughly 1rem.
Q: If I set min and max to the same value, does clamp() still do anything?
A: Not meaningfully — with min and max equal, the preferred value has no room to scale between them, so the result is effectively a fixed size regardless of viewport width, which defeats the purpose of using clamp() over a plain fixed value.
Build your fluid type scale now
Try the Clamp Calculator. Need breakpoint-based media queries for other responsive behavior? Check the Media Query Generator. Pairing fonts for your type scale? See Font Pairing, or round out your design with the Border Radius Generator.
