CSS clamp() / Fluid Typography Calculator
Build a fluid font-size that scales smoothly between a min and max viewport — no media queries
font-size: clamp(1rem, 0.7727rem + 0.9091vw, 1.5rem);
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
clamp(min, preferred, max) grows linearly between your min and max font sizes as the viewport goes from min to max width, then holds steady outside that range — no media query breakpoints needed. The preferred value mixes a fixed rem offset with a vw unit, derived from the slope between your two size/viewport pairs — the same math underlying most fluid-type generators.About this tool
The ToolNinja CSS clamp() / Fluid Typography Calculator computes the exact rem + vw formula behind a fluid font-size — type that scales smoothly as the viewport resizes between your chosen min and max widths, then holds steady outside that range, with zero media query breakpoints. The math is the standard linear-interpolation approach most fluid-type generators use: treat font size as a straight line between two points (min viewport → min size, max viewport → max size), derive that line's slope and y-intercept, and express it as clamp(minRem, interceptRem + slopeVw, maxRem). The preview panel applies the same formula across a small type scale (xs through 3xl) using an adjustable ratio, so you can see a whole heading hierarchy scale together, not just one font-size value. Everything computes instantly in your browser — resize the browser window itself to see the live preview text actually scale.
When to use it
- →Replacing a stack of media-query font-size breakpoints with a single fluid clamp() declaration
- →Generating a complete, proportionally-scaling type hierarchy (headings through body text) for a design system
- →Understanding exactly how the rem + vw formula in a fluid-type CSS snippet was derived
- →Prototyping how aggressive a font size's growth should be across the viewport range before committing to final values
Tips
- ◆clamp() takes three values — min, preferred, max — and the browser picks whichever is appropriate: the preferred (fluid) value when it falls between min and max, otherwise the nearest boundary.
- ◆A narrower gap between min and max viewport width makes the font size change more aggressively per pixel of resize — widen the range for a gentler, more gradual scale.
- ◆The scale ratio slider only affects the preview panel's step sizes (xs through 3xl) — it doesn't change the single font-size clamp() output above it, which is driven solely by your min/max size and viewport inputs.
Frequently asked questions
Why use clamp() instead of just a vw unit for font-size?
A bare vw value has no floor or ceiling — text can shrink to the point of being unreadable on a very narrow screen, or grow absurdly large on an ultrawide monitor. clamp(min, vw-based-value, max) keeps the fluid scaling behavior in between while guaranteeing the font size never goes below or above sizes you've explicitly chosen.
Does clamp() for font-size have good browser support?
Yes — clamp() has been supported in every major browser (Chrome, Firefox, Safari, Edge) since 2020, with no vendor prefix required. It's safe to use in production for any site that doesn't need to support browsers from before that point.
Why does the formula mix rem and vw units together?
The vw portion provides the actual fluid scaling as the viewport changes, while the rem offset (the line's y-intercept) is what makes the two endpoints — the exact min size at the min viewport, and the exact max size at the max viewport — come out mathematically correct. Without that rem offset, a pure vw-based value wouldn't pass through your chosen min/max points precisely.