Free tool - no signup

CSS clamp() Preview

Enter the size you want at each end of your viewport range and read back the finished declaration, coefficient and all. Then sweep the viewport from 320px to 1920px and watch the curve flatten at both clamps. It checks the 16px floor and the 2.5x ratio while you type, and it all runs in your browser.

clamp() Live Preview

Enter the sizes you want at each end of your viewport range. The tool runs the slope arithmetic from the section above and hands you the declaration. Then drag the viewport slider and watch where it breaks.

Min size px Max size px Min viewport px Max viewport px

Simulated viewport: 1200px

Renders at 40.0px

1200px simulated viewport

Designing the edge cases

The same heading, sized by the declaration below. Drag the slider to the far left and read it as a phone would.

font-size: clamp(1.75rem, 1.333rem + 1.667vw, 3rem);

The preview sets a computed px size, not a live vw value: a real clamp() tracks the browser window, so inside an article column it could only ever show your own viewport. The declaration above is the real one, and it is what you ship.

How to use it

Set the min and max size you want the text to take at each end.
Set the viewport range those two sizes belong to, usually your narrowest phone and the width where you stop growing.
Read the declaration, check the two warnings, and copy it.
Drag the viewport slider before you ship, especially to the far left.

Why the minimum is the argument that bites

Both of the failure modes this tool checks live in the minimum, and neither is visible on the monitor you designed on. The first is plain legibility: a minimum that reads as a confident, tight 13px in a desktop mockup renders as a legal disclaimer on a 375px phone in someone's hand, and the people who lose most are the ones least likely to file a bug about it. The second is subtler. Because a clamp() with a vw component does not scale under browser zoom the way a plain rem does, a very wide max-to-min range can leave large text unable to reach the 200 percent that WCAG 1.4.4 requires. That one passes every visual review, because nothing looks wrong until somebody zooms.

The practical version is two numbers. Keep the minimum at 16px or above for anything read at length, and keep the maximum at or below 2.5 times the minimum. If a design needs a bigger jump than that, it needs two tokens rather than one wider clamp.

Where the arithmetic comes from

The middle argument is linear interpolation wearing CSS syntax. Slope is the size range over the viewport range, expressed in pixels of font size per pixel of window width, then multiplied by 100 to become a vw figure. The rem half is the y-intercept, the value the line would take at a viewport of zero, which is the minimum size minus slope times the minimum viewport. Put both together and the line passes exactly through the two points you chose, which you can verify here by dragging the slider to either end and reading the computed size.

FAQ

What do the three clamp() arguments mean?: Minimum, preferred, maximum, in that order. The browser evaluates the middle expression and then keeps the result inside the two bounds. The fluidity lives entirely in the middle argument, which mixes a fixed rem value with a viewport-relative vw value so the size grows as the window widens.
How is the vw coefficient calculated?: Slope equals the size range divided by the viewport range, in pixels per pixel, then multiplied by 100 to become a vw value. The rem half is the y-intercept: the minimum size minus the slope times the minimum viewport. It is linear interpolation, so the line passes exactly through both of your chosen points.
Why does the tool warn below 16px?: Because 16px is where most accessibility guidance draws the practical floor for text a visitor reads for more than a few seconds. Below 14px you start losing readers with mild low vision even on a well-built typeface, and a minimum that looked fine on a wide desktop mockup is the most common way that happens.
Why does the tool warn above a 2.5x ratio?: Because a clamp() with a vw component does not respond to browser zoom the way a plain rem value does. Push the max-to-min ratio too far and large text can stay stuck below the 200 percent that WCAG Success Criterion 1.4.4 requires at some viewport widths. Keeping max at or below 2.5 times min avoids it.
Is the preview using a real clamp() declaration?: The declaration it outputs is real and ships as-is. The preview itself applies a computed pixel size instead, because a real vw-based clamp() tracks the actual browser window: inside a fixed page it could only ever show one point on the curve, the one you already have open. Computing the value is what lets the slider sweep 320px to 1920px.
Do I still need media queries for type?: For font size, almost never. Layout still needs breakpoints when a grid has to change shape, but type size does not need a shape change, it needs a number that scales smoothly. Moving font-size, line-height and the heading scale onto clamp() usually leaves only structural breakpoints behind.
Should spacing use clamp() too?: Yes. clamp() accepts any length, so margin, padding, gap and border-radius can scale the same way. Clamping type while leaving a fixed 48px margin gives you a heading that feels cramped against its own text but strangely distant from the next section, which is a vertical rhythm bug that is hard to spot in a mockup.

Fluid type is one half of a scale. Read the full CSS clamp() fluid typography guide, generate every step's min and max with the type scale calculator, then clamp your spacing tokens with the spacing scale generator.