Fluid Typography

12 tools

Generate a CSS clamp() for responsive font sizing.

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

Design Flexbox and Grid layouts, shadows, animations, easing curves, filters, and glassmorphism effects with live controls and a live preview instead of guessing values by hand — copy the generated CSS 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 →