Fluid Typography

12 tools

Generate a CSS clamp() for responsive font sizing.

Runs in your browser — your files and text stay on your device

Generate a CSS clamp() value for fluid, responsive font sizing. Set the smallest and largest size and the viewport range, and the text scales smoothly between them without media queries. Copy the result straight into your stylesheet.

Flexbox Playground Grid Generator Box Shadow Text Shadow Border Radius Clip Path Glassmorphism Animation Easing Curve Filter Fluid Typography Unit Converter

Min font (px)Max font (px)Min viewport (px)Max viewport (px)

The quick brown fox

font-size: clamp(1.0000rem, 0.6667rem + 1.6667vw, 2.0000rem);

How to use this tool

1Enter the smallest and largest font sizes you want.
2Enter the viewport widths at which those extremes should apply.
3Resize your browser window to see the sample text scale — copy the generated clamp().

Frequently asked questions

What does clamp() do here?

It picks a preferred value based on viewport width but never goes below the min or above the max, so text scales smoothly between your two breakpoints.

Is clamp() well supported?

Yes, in every major browser since 2020.

Guides

All guides →