Fluid Typography clamp() Calculator

Responsive type used to mean a size per breakpoint: 16 pixels on phones, 18 on tablets, 20 on desktops, with visible jumps in between. clamp() replaces the steps with a smooth ramp: the size grows with the screen between two limits and stays fixed outside them. The expression is short but hard to write by hand, because the middle term needs a slope and an offset that line up exactly with your chosen sizes. This calculator does the algebra and shows the result at real screen widths.

The three arguments

clamp(min, preferred, max) returns the preferred value, unless it falls below the minimum or above the maximum. For fluid sizes the preferred value is a line: offset + slope × viewport width. The page chooses the line that passes through your two points, the minimum size at the lower screen width and the maximum size at the upper one. Below the lower width the ramp would keep shrinking, but the minimum stops it; above the upper width the maximum stops it.

A worked example

Press Sample for a body size that grows from 16 to 24 pixels between 320 and 1200 pixel wide screens, with a 16 pixel root. The slope is (24 − 16) ÷ (1200 − 320) = 0.0090909 per pixel, so 0.9091vw. The offset is 16 − 0.0090909 × 320 = 13.0909 pixels, which is 0.8182rem. The page writes font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);. The table shows 16 px at 320, 16.5 at 375, 17.45 at 480, 20.07 at 768, 22.4 at 1024 and 24 at 1280, 1440 and 1920. At a 760 pixel preview width the size is 20 pixels, which is 1.25rem.

Another pair

For a heading from 18 to 40 pixels between 375 and 1440 pixels the output is clamp(1.125rem, 0.6408rem + 2.0657vw, 2.5rem). The slope is steeper because the size range is larger relative to the width range. Pick the lower width where the layout starts to feel cramped, usually a small phone, and the upper width where the layout stops growing, often the maximum container width.

Why rem and not px

If the middle term were only vw, the text would ignore the font size a reader sets in the browser. With a rem offset it keeps part of that preference. The minimum and maximum are also in rem, so the whole expression scales with the root size. Change the root font size field if your site sets the root to something other than 16 pixels; the numbers in rem adjust.

The 2.5 times warning

When the maximum is more than 2.5 times the minimum the page warns that text this fluid may not reach 200% when the user zooms, which WCAG 1.4.4 expects. For a 20 to 70 pixel pair the output is clamp(1.25rem, 0.1136rem + 5.6818vw, 4.375rem) with that warning. Large headings can be fluid, but check zooming to 200% with your real layout.

Beyond font sizes

The same expression works for padding, margin and gap, which is how spacing follows the type. Use one clamp for spacing between sections and a smaller one inside cards. Avoid fluid widths for narrow reading columns; use max-width in ch or em instead.

Edge cases

A very narrow range, such as 320 to 321 pixels, produces an enormous slope, so keep at least a few hundred pixels between the two widths. If the minimum is larger than the maximum, the page writes a negative slope, which makes text shrink as the screen grows; swap them unless that is intended. Equal sizes give the plain size.

Limits

The calculator provides the maths, not the design: it cannot tell whether 16 to 24 pixels suits your font. It does not combine several breakpoints. Everything runs in your browser.

Related tools

• Type Scale Calculator chooses the sizes to feed into clamp.
• CSS Unit Converter compares px, rem, em and viewport units.
• PX to REM converts fixed sizes.
• Line Height Calculator pairs the size with comfortable spacing.