📐 CSS clamp() Generator for Fluid Typography
By Shihab Mia · Updated 2026-07-05
Font size at the smallest viewport.
Font size at the largest viewport.
Where scaling starts (e.g. small phone).
Where scaling stops (e.g. desktop).
Used to convert px into rem. Browsers default to 16px.
The quick brown fox jumps over the lazy dog.
Resize your browser window to watch the text scale between the limits.
Enter your sizes and viewport widths. The clamp() value updates instantly.
This CSS clamp generator builds one fluid font-size value that scales smoothly between a minimum and a maximum as the viewport widens, so you replace a stack of media queries with a single line. Enter the smallest size, the largest size, and the two viewport widths where each should apply. You get a ready-to-copy clamp() value in rem and vw, plus a live preview so you can watch the text grow as the window resizes.
What is the CSS Clamp Generator?
CSS clamp() takes three arguments, written clamp(min, preferred, max). The browser tries to use the preferred value but never lets it fall below the minimum or rise above the maximum. For fluid typography the preferred value is a formula that mixes a fixed part in rem with a viewport-relative part in vw, so the text grows in step with the screen instead of jumping at fixed breakpoints. That is what turns three arguments into smooth, continuous scaling.
The generator works out the middle term by drawing a straight line between your two points. If you want 16px at a 320px viewport and 24px at a 1280px viewport, it finds the slope of that line: slope = (24 - 16) / (1280 - 320) = 0.0083333 px per px of width. It then splits the line into a rem constant plus a vw coefficient. The vw part is the slope times 100, because 1vw equals 1% of the viewport width, and the rem part is the leftover constant divided by your root font size. The result is something like clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Using rem for the bounds and for the constant matters for accessibility. A value built only from vw ignores a reader who has increased their browser font size, because vw is tied to the window, not to the user preference. Mixing a rem constant with vw keeps the type fluid across viewport sizes while still honouring the root font size. This is the modern, recommended pattern for headings, body copy, spacing, gaps, and even container widths, and it is why every value this tool outputs contains a rem term.
There is one accessibility rule worth building into the value itself. WCAG success criterion 1.4.4 expects text to remain usable when a user zooms to 200%. Browser zoom scales rem and vw together, so a well-formed clamp() value keeps working. The risk is a preferred value that is pure vw with no rem part, or a maximum that is set too low: at high zoom the text can stop growing when it should still enlarge. Keeping a rem term in the preferred value, as this generator does, avoids that trap.
clamp() is one of the CSS math functions, alongside min() and max(). In fact clamp(a, b, c) is exactly max(a, min(b, c)), so anything clamp() does can be written with the other two, but clamp() reads more clearly for a floor-and-ceiling pattern. It accepts any length, so the same min, preferred, max idea drives fluid margins, padding, line-height, gaps, and widths, not only font size. This tool focuses on font size because that is the most common request, but the generated value drops straight into any length property.
One caveat on units inside clamp(). All three arguments should resolve to comparable lengths, and you should avoid nesting a bare percentage where the browser cannot resolve it against a definite size. For font sizing, stick to rem, px, em, and vw, which is exactly what this generator emits. Because clamp() is now supported in every current major browser, you rarely need a fallback, but for very old engines you can place a plain fixed-size declaration before the clamp() rule and capable browsers will override it.
When to use it
- Creating fluid headings that scale smoothly from mobile to desktop without a stack of media queries.
- Setting responsive body text that stays readable on a small phone yet fills out on a large monitor.
- Building fluid spacing, gaps, or container widths using the same min, preferred, max pattern.
- Replacing several breakpoint-based font-size rules with one clamp() declaration to simplify a stylesheet.
- Defining a fluid type scale for a design system so every step resizes proportionally across screen sizes.
- Capping a hero heading so it grows on large monitors but never overflows or breaks onto too many lines.
How to use the CSS Clamp Generator
- Enter the minimum font size in pixels, the size you want at the narrowest screen.
- Enter the maximum font size in pixels, the size you want at the widest screen.
- Enter the minimum and maximum viewport widths in pixels (for example 320 and 1280).
- Adjust the root font size if your project does not use the 16px default.
- Copy the generated clamp() value and paste it into your CSS font-size (or any length) property.
- Resize the live preview to confirm the text holds at both bounds and scales smoothly between them.
Formula & method
Worked examples
Fluid body text: 16px at a 320px viewport up to 24px at a 1280px viewport, root font size 16px.
- slope = (24 - 16) / (1280 - 320) = 8 / 960 = 0.0083333 px per px
- vw part = slope x 100 = 0.83333vw
- constant px = minSize - slope x minVw = 16 - 0.0083333 x 320 = 13.3333px
- constant rem = 13.3333 / 16 = 0.8333rem
- min bound = 16 / 16 = 1rem, max bound = 24 / 16 = 1.5rem
- Check at 320px: 0.8333rem x 16 + 0.8333vw x 320 / 100 = 13.333 + 2.667 = 16px
- Check at 1280px: 13.333 + 0.8333 x 1280 / 100 = 13.333 + 10.667 = 24px
Result: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
A fluid hero heading: 32px at 360px wide up to 64px at 1440px wide, root font size 16px.
- slope = (64 - 32) / (1440 - 360) = 32 / 1080 = 0.0296296 px per px
- vw part = slope x 100 = 2.963vw
- constant px = 32 - 0.0296296 x 360 = 32 - 10.6667 = 21.3333px
- constant rem = 21.3333 / 16 = 1.3333rem
- min bound = 32 / 16 = 2rem, max bound = 64 / 16 = 4rem
- Check at 360px: 1.3333 x 16 + 2.963 x 360 / 100 = 21.333 + 10.667 = 32px
- Check at 1440px: 21.333 + 2.963 x 1440 / 100 = 21.333 + 42.667 = 64px
Result: clamp(2rem, 1.3333rem + 2.963vw, 4rem)
Fluid section padding using the same method: 24px at 320px wide up to 48px at 1280px wide, root 16px.
- slope = (48 - 24) / (1280 - 320) = 24 / 960 = 0.025 px per px
- vw part = slope x 100 = 2.5vw
- constant px = 24 - 0.025 x 320 = 24 - 8 = 16px
- constant rem = 16 / 16 = 1rem
- min bound = 24 / 16 = 1.5rem, max bound = 48 / 16 = 3rem
- Apply as padding-block, not font-size, to get fluid vertical spacing
Result: clamp(1.5rem, 1rem + 2.5vw, 3rem)
Common fluid type pairs generated at a 16px root, viewports 320px to 1280px
| Role | Min to max (px) | clamp() value |
|---|---|---|
| Small text | 14 to 16 | clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem) |
| Body text | 16 to 20 | clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem) |
| Subheading | 20 to 28 | clamp(1.25rem, 1.0833rem + 0.8333vw, 1.75rem) |
| Heading | 24 to 40 | clamp(1.5rem, 1.1667rem + 1.6667vw, 2.5rem) |
| Hero | 32 to 64 | clamp(2rem, 1.3333rem + 3.3333vw, 4rem) |
What each clamp() argument controls
| Argument | Role |
|---|---|
| Minimum (rem) | The floor: the value never goes below this, even on tiny screens. |
| Preferred (rem + vw) | The fluid value the browser prefers between the bounds. |
| Maximum (rem) | The ceiling: the value never grows above this on large screens. |
clamp() versus alternatives for responsive sizing
| Approach | How it scales | Trade-off |
|---|---|---|
| clamp() min, preferred, max | Smooth and continuous with floor and ceiling | One line, best default for fluid type |
| Media query breakpoints | Jumps at set widths | Verbose, visible steps between sizes |
| Pure vw font size | Continuous but unbounded | No floor or ceiling, ignores user font size |
| Fixed rem font size | Does not scale with viewport | Simple but not responsive |
Common mistakes to avoid
- Using only vw with no rem part. A preferred value built purely from vw ignores a reader who has increased their browser font size, which hurts accessibility and can fail WCAG 1.4.4 at 200% zoom. Mixing a rem constant with vw, as this tool does, keeps the type fluid while still respecting the root font size.
- Swapping the minimum and maximum. In clamp(min, preferred, max) the first number must be the smaller bound and the third the larger one. If you reverse them the value can lock to the wrong limit. This generator sorts the bounds for you, but double-check when writing clamp() by hand.
- Setting the viewport range too narrow. If the minimum and maximum viewports are very close, the slope becomes steep and the text grows abruptly over a tiny range. Use a sensible span such as a small phone width up to a common desktop width so the scaling feels smooth.
- Forgetting clamp() needs all three arguments. clamp() requires exactly a minimum, a preferred, and a maximum value, separated by commas. Leaving one out is invalid CSS and the whole declaration is ignored, so the element falls back to its inherited size.
- Setting the maximum too low for large screens. If the maximum bound is close to the minimum, the text stops growing early and looks small on wide monitors or at high zoom. Pick a maximum that reflects how large the text should really be at your widest supported width.
- Nesting an unresolvable percentage inside clamp(). Percentages only work inside clamp() when the browser can resolve them against a definite size. For font sizing, stick to rem, px, em, and vw. This tool emits only rem and vw so the value is always valid.
Glossary
- clamp()
- A CSS function clamp(min, preferred, max) that returns the preferred value but never below the minimum or above the maximum.
- Fluid typography
- Type that scales smoothly with the viewport width instead of jumping between fixed sizes at breakpoints.
- vw
- A viewport-width unit where 1vw equals 1% of the viewport width, so 100vw is the full width.
- rem
- A unit relative to the root font size, so 1rem equals the size set on the html element, which is 16px by default.
- Slope
- The rate of change of size per pixel of viewport width, used to build the fluid preferred value.
- Viewport
- The visible area of the browser window, whose width drives responsive and fluid values.
- Preferred value
- The middle argument of clamp(), the rem plus vw formula the browser uses between the two bounds.
- Type scale
- A set of related font sizes for headings and body text, often defined as a ratio, that can each be made fluid with clamp().
Frequently asked questions
What does CSS clamp() do?
clamp() takes three values, written clamp(min, preferred, max). The browser uses the preferred value but clamps it so it never drops below the minimum or rises above the maximum. For fluid typography the preferred value mixes rem and vw so the text scales with the screen between the two limits.
How do I use a CSS clamp generator for fluid typography?
Enter your minimum and maximum font size in pixels and the two viewport widths where each should apply, for example 320px and 1280px. The generator draws a straight line between those points, converts it into a rem plus vw preferred value, and gives you a copy-ready clamp() such as clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Why does the generator mix rem and vw?
The vw part makes the value scale with the viewport, while the rem constant and the rem bounds respect the user root font size. A value built only from vw would ignore a reader who has zoomed or enlarged their browser text, so mixing the two keeps the result both fluid and accessible.
Can I use clamp() for things other than font size?
Yes. clamp() works for any length value, so you can use the same min, preferred, max pattern for margins, padding, gaps, widths, and even line-height. This tool focuses on font size, but you can paste the generated value into any length property.
What viewport widths should I choose?
A common choice is a small phone width such as 320px for the minimum and a typical desktop width such as 1280px or 1440px for the maximum. The text holds at the minimum size below the small viewport and at the maximum size above the large one, and scales smoothly between them.
Do I still need media queries with clamp()?
Often you need far fewer. A single clamp() can replace several breakpoint-based font-size rules because the value scales continuously. You may still use media queries for layout changes such as switching columns, but type and spacing can frequently be handled by clamp() alone.
Is clamp() supported in browsers?
Yes. clamp() is supported in all current major browsers, including Chrome, Edge, Firefox, and Safari, and has been widely available since around 2020. For very old browsers you can provide a plain fixed-size fallback declaration before the clamp() rule, and capable browsers will use the clamp() value.
Is clamp() the same as min() and max()?
clamp(a, b, c) is exactly the same as max(a, min(b, c)). clamp() is just a clearer way to write a floor-and-ceiling pattern in one function. All three are CSS math functions and can be used anywhere a length is allowed.
How does fluid type with clamp() affect accessibility and WCAG?
Because the value keeps a rem term, browser zoom and a larger root font size both enlarge the text, which supports WCAG 1.4.4 resize text at 200% zoom. The pattern to avoid is a pure vw preferred value or a maximum set too low, since either can stop the text growing when a user needs it larger.
What root font size should I set in the generator?
Use 16px unless your project changes the default. Browsers set the root font size to 16px on the html element, and rem values are calculated from it. If your CSS resets html to a different size, enter that value so the rem bounds and constant match your project.
Sources
- CSS clamp() function , MDN Web Docs
- Understanding Success Criterion 1.4.4: Resize Text , W3C WCAG 2.1
- CSS values and units , MDN Web Docs