Fluid Size Calculator

Computes a clamp() expression that scales a size smoothly between two viewport widths.

Builds a `clamp()` that scales a size smoothly between two viewport widths — the fluid-typography expression, with the arithmetic done for you. Both ends are in `rem`, which is the part that decides whether the result is accessible.

🔒 Runs entirely in your browsercssclampresponsivetypography

Anchors

Size at the small end: 16pxSize at the large end: 24pxSmall viewport: 320pxLarge viewport: 1280px

Root font sizeDecimals

The expression

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

Slope

0.833vw

Intercept

0.833rem

Range

1.000–1.500rem

Both anchors are in rem, and that is not a style preference. A px clamp ignores the reader’s browser font size entirely — a WCAG 1.4.4 failure the person who wrote it will never experience, because they are not the one who set their default to 24px. The vw coefficient stays unitless-of-the-viewport, which is why changing the root size above moves the two ends and leaves the slope alone.

What it resolves to

Viewport	Size
320px	16px
375px	16.46px
480px	17.33px
640px	18.67px
768px	19.73px
1024px	21.87px
1280px	24px
1440px	24px(clamped)
1920px	24px(clamped)

Worth knowing

· Above the upper anchor the size is pinned, so making the window wider stops changing it. Both anchors are in rem, so it still follows the reader’s own font size — the same expression written in px would not.

Building a whole set of these? The type scale generator produces the step sizes to clamp between.

How to use it

Set the four anchors
The size at your smallest viewport, the size at your largest, and the two viewport widths those apply at. Everything else is derived.
Check the resolved table
It shows what the expression evaluates to at a spread of real viewport widths, marking the ones where the clamp is holding rather than the slope.
Copy the declaration
One `font-size: clamp(...)`. The slope and intercept are shown too, for when you want to understand it rather than paste it.

Common questions

Why are the units `rem` and not `px`?

Because a `px` clamp ignores the reader’s browser font size completely. Someone who set their default to 24px because they need it gets your 16px anyway — that is a WCAG 1.4.4 failure, and one the author never experiences.

Should the viewport ends be my breakpoints?

Not necessarily. The clamp handles everything between them, so the useful ends are the narrowest phone you support and the width past which you do not want text to keep growing — often around 1200–1400px rather than your largest breakpoint.

Does zooming still work?

Page zoom, yes — it changes the viewport width and the clamp follows. Text-only zoom is what the `rem` anchors protect: the `vw` part does not respond to it, so without a `rem` component the text would be frozen. That is why the expression mixes the two.

Can I use it for padding and gaps too?

Yes — the expression is unit arithmetic and does not care what property it lands on. The output says `font-size` because that is the common case; change the property and keep the value.