CSS clamp() Calculator

Min/max font · viewport → responsive clamp() formula

Min font (px)

Max font (px)

Min viewport (px)

Max viewport (px)

Preview viewport: 800px

The quick brown fox jumps over the lazy dog.

24.00px @ 800px

CSS

font-size: clamp(1.000rem, 1.6667vw + 0.6667rem, 2.000rem);

How to use

Enter the minimum font size in pixels and the maximum font size in pixels.
Enter the minimum viewport width and the maximum viewport width where those font sizes apply.
Drag the preview slider to simulate how the font scales at different viewport widths and read the live pixel value.
Copy the generated clamp() expression and paste it into your CSS.

Examples

Min font 16px, max font 32px, min viewport 320px, max viewport 1280px produces clamp(16px, 1.667vw + 10.667px, 32px).
At a 800px preview viewport the live display shows approximately 23px, confirming smooth scaling between the two extremes.

Verify outputs before using in production. No warranty — see Terms.