Fluid Typography Clamp Generator

Generate a fluid font-size clamp() from two viewport widths and font sizes. Preview endpoints and copy CSS locally.

Set two endpoints

Enter design sizes in px. Results update as you type, entirely in your browser.

Small viewport width (px)Font size at small viewport (px)Large viewport width (px)Font size at large viewport (px)

Output unitAssumed root font size (px)

rem conversion assumes this root size. Different site root sizes change the actual endpoints.

CSS result

Ready to paste into a font-size rule.

font-size: clamp(1rem, calc(0.666667rem + 1.481481vw), 2rem);

Size visualisation

16 px32 px

360 px viewport1440 px viewport

Check the endpoints

360 px: 16 px
900 px: 24 px
1440 px: 32 px

Simulated viewport width: 900 px

Preview fluid type

24 px

Preview numbers assume the entered root size. The slider does not resize your browser viewport.

How to use this tool

Enter the two viewport widths and matching font sizes in pixels. Choose rem or px output, check the three reference widths, then test the CSS in your actual layout.

When not to use it

A formula is not an accessibility pass. Test text resizing, zoom, reflow, font loading and your site's actual root font size; never rely on the preview alone.

Read the guide →