How does clamp() work?

clamp(min, preferred, max) returns the preferred value unless it falls below min (then min wins) or above max (then max wins). For typography, preferred is usually a vw-based value so the size scales with the viewport.

What vw value should I pick?

A common starting point is around 2–5vw. The tool shows the breakpoints where min and max take over, so you can tune until those breakpoints land on sensible device widths.

Can I use this for padding or gaps too?

Absolutely — clamp() works anywhere a length is valid. The same min/preferred/max logic applies to padding, margin, gap, width and more.

Why does the preview scale a fake viewport?

Because your real window can't shrink to 320px on a desktop, the tool simulates a smaller viewport inside the preview pane so you can see how the type will look on a phone.

Are rem units supported?

The inputs are in px and vw for clarity, but you can convert the output by dividing px values by 16 (the default root font size) — e.g. 16px ≈ 1rem.

Clamp Calculator

Build fluid font sizes with clamp() and preview them across viewport widths.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Clamp Calculator

Follow these steps — everything happens instantly in your browser.

1
Step 1. Set the minimum font size in px (the floor).
2
Step 2. Set the preferred size in vw (the fluid value).
3
Step 3. Set the maximum font size in px (the ceiling).
4
Step 4. Slide the viewport width to preview the computed size at any breakpoint.
5
Step 5. Copy the clamp() value into your font-size declaration.