Fluid typography clamp() calculator

What it does

A clamp calculator for CSS font sizes takes the smallest and largest size you want, plus the viewport widths where each should apply, and writes one clamp() value that scales smoothly between them. Below the smallest viewport the text stays at the minimum. Above the largest it stops at the maximum. In between it grows in a straight line. The limits are written in rem so the text still respects a reader's browser font setting, and a table shows the size you get at common screen widths.

How to use it

1. Enter the minimum and maximum font size in pixels.
2. Enter the viewport widths where those sizes should apply. 360px and 1280px cover most phones and laptops.
3. Leave the root size at 16 unless your CSS changes the font size on html.
4. Copy the clamp() rule or the Tailwind class.
5. Check the table to see the size at each common breakpoint, and resize the window to watch the preview scale.

How to read the result

With the defaults, 18px at 360px wide rising to 32px at 1280px, the output is clamp(1.125rem, calc(0.7826rem + 1.5217vw), 2rem).

The first and last values are the floor and ceiling: 18px and 32px divided by 16. The middle is the straight line between your two points. The slope is (32 − 18) ÷ (1280 − 360), or 0.0152, which as a viewport unit is 1.5217vw: the text gains about 1.5px for every 100px of screen width. The intercept, 0.7826rem or 12.52px, is where that line would meet a zero-width screen. Add the two and you get the size at any width. At 768px that is 12.52 + 0.0152 × 768, or 24.2px, which matches the table.

The growth figure, 1.78× here, shows how much the text changes between the extremes. Keep body text well under 2×. Large ratios make zooming unreliable, because the vw part does not grow when someone zooms in.

Build a full set of related sizes with the type scale generator. For a site designed with fluid type from the start, see our website design and development service.