Home › Tools › Developer › Fluid clamp()

Fluid `clamp()` calculator

Linearly scale a CSS value between two viewport widths, then clamp it with min and max. Handy for responsive font-size (fluid typography).

Minimum size (px)

Maximum size (px)

Viewport width at minimum (px)

Viewport width at maximum (px)

Preview

The quick brown fox jumps over the lazy dog.

CSS

Try it with this example

Set min/max font size in px and two viewport widths; copy the generated font-size: clamp(...) rule.

What is this tool?

How do I use CSS clamp() for font size? Build a fluid font-size rule that scales between a minimum and maximum pixel size across two viewport widths. Copy-ready clamp() with calc(). All client-side.

Fluid clamp() calculator

Try it with this example

What is this tool?

Have you tried these tools yet?

Fluid `clamp()` calculator