What does the preferred value mean?

It is the middle term of the clamp: a fixed size in rem plus a rate of growth in viewport units. Between the two viewport endpoints that expression is the whole story, and outside them the clamp's own bound takes over. Writing the fixed part in rem is what lets it respect a visitor's font-size setting.

How can I tell if the endpoints are wrong?

Read the behaviour table. If the clamped value stops changing before the last row, the maximum size is reached too early and the upper viewport is set too low. If the value is still at its minimum by the middle row, the growth is too slow or the lower endpoint is too wide.

Why include a pixel fallback?

Because the declaration is ignored wholesale by an engine that does not parse clamp, and the fallback keeps the type at a sensible middle size in that case. It costs one extra line. The separate pixel variant exists for projects that genuinely do not want any growth and only need the computed value.

Can clamp replace media queries entirely?

For a single value, effectively yes: one declaration covers the range. What it cannot do is respond to the space a component actually has, since viewport units describe the window rather than the box. When a heading sits inside a narrow column on a wide screen, a container query is the correct tool and clamp is not.

What range of sizes suits a clamp?

It suits any range where linear growth looks natural, which is most body and heading sizes. Very large display sizes often want a sublinear ramp, since the perceived difference between 96 and 128 pixels is smaller than between 16 and 21. When the growth has to slow at the top, split the range and clamp each half.

CSS Clamp Calculator

Endpoints

Min font sizepxMax font sizepxMin viewportpxMax viewportpxRoot sizepx

Slope0.005556 px/px (0.5556vw per 100vw)

Intercept14px

Preferred term0.875rem + 0.5556vw

Growth across range6px

The clamp lower/upper bounds are what make this safe: the preferred term only applies between the two viewport endpoints.

Behaviour

Viewport	Linear value	Rendered	Mode
360px	16px	16px	pinned
630px	17.5px	17.5px	fluid
900px	19px	19px	fluid
1170px	20.5px	20.5px	fluid
1440px	22px	22px	pinned

Rendered = clamp(min, linear, max): outside the endpoints the value pins to the bounds.

CSS

:root {
  --fluid-size: clamp(1rem, 0.875rem + 0.5556vw, 1.375rem);
}

/* px fallback for very old browsers */
.fluid-text {
  font-size: 19px;
  font-size: clamp(1rem, 0.875rem + 0.5556vw, 1.375rem);
}

px variant (no rem)

clamp(16px, 14px + 0.5556vw, 22px)

You Might Also Need

CSS Fluid Typography Builder

Build fluid CSS typography

Fluid Type Scale Builder

Build clamp-based fluid scales

Heading Scale Visualizer

Visualize H1–H6 scale

CSS Typography Token Generator

Export CSS type tokens

The CSS clamp calculator draws the straight line between two sizes at two viewport widths and writes the declaration that follows it. It also shows what the line does at five points across the range, which is where a wrong endpoint becomes obvious.

What is CSS Clamp Calculator?

The CSS clamp calculator takes two sizes and two viewport endpoints and returns the clamp declaration that interpolates between them, with every intermediate value printed. It is the single-value version of a fluid scale, and the place to get the arithmetic right before a scale depends on it.

The result comes with four readouts that make the line inspectable.

The slope, given both as pixels per pixel of viewport and in viewport units per hundred, which is the figure that goes into the declaration.
The intercept in pixels, which is the size at a viewport of zero before the bounds cut the line off.
The preferred value, written as an intercept in rem plus a slope in viewport units, which is the middle term of the clamp.
The growth across the range, which is simply the maximum size minus the minimum and is the figure to sanity-check first.

A behaviour table then evaluates the line at nought, a quarter, a half, three quarters and all of the range. For each point it prints the viewport width, the value the line would give, the value after clamping, and whether the result is pinned or fluid. The two ends are pinned by definition, and the middle three are where a mistake shows: if the linear value at three quarters of the range is already above the maximum, the desktop endpoint is set too low and the type stops growing early. Comparing the linear column with the rendered column also shows how much of the range is actually spent in motion rather than pinned at a bound.

The arithmetic has one safeguard built in: the calculator refuses to produce a line unless the maximum viewport is larger than the minimum and the maximum size is at least the minimum size. Without that, a slope would run backwards and the clamp would snap between its bounds instead of interpolating. The exported CSS also carries a plain pixel fallback before the clamp declaration, so an engine without clamp support gets a sensible middle size rather than the minimum or nothing at all, and the pixel variant is offered separately for projects that only need the fixed value.

Four limits are worth knowing before the declaration ships.

The line is straight: there is no easing, so a design that wants type to accelerate in the middle needs two clamps across two ranges rather than one.
The declaration responds to the viewport rather than to the component's container, so a value inside a narrow column still grows with the window; a container query is the tool for that case.
The rem-based intercept assumes a sixteen-pixel root, so a project with a different root shifts the fixed part of every preferred value.
Nothing here knows what the right endpoints are. The arithmetic is exact and the design decision is yours, which is the honest division of labour, and the behaviour table is there so the endpoints can at least be checked after the fact.

How to use CSS Clamp Calculator

Enter the minimum and maximum sizes first, since their difference is the total growth and the figure to sanity-check against the design.
Enter the two viewport endpoints, ensuring the maximum is the larger and that both match real breakpoints in the design.
Read the slope, intercept and preferred value, then use the behaviour table to confirm the value is still fluid in the middle of the range.
Copy the CSS with its pixel fallback, or the pixel variant alone when the value does not need to grow.

When to use CSS Clamp Calculator vs related tools

Reach for it when one value has to grow between two viewports and the arithmetic should be right the first time, when a clamp declaration is suspected of pinning too early, or when a fluid scale built elsewhere needs its individual steps checked. The behaviour table is the diagnostic. For a whole scale in one pass, the CSS fluid typography builder derives every step; the type scale generator gives the fixed sizes the endpoints come from, and the baseline grid calculator checks what the resulting line boxes do to a vertical grid.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.