CSS Clamp Generator
Generate fluid CSS clamp() values for responsive typography.
font-size: clamp(1rem, 0.804rem + 0.87vw, 1.5rem);Live preview
The quick brown fox jumps over the lazy dog.
Resize this window to see it scale.
clamp() locks at the min below 360px viewport, scales linearly between, and locks at the max above 1280px. Base font is 16px (the browser default).
About
Enter a min size, max size, and the viewport widths where each kicks in. The tool gives you a clamp() expression that scales linearly between, then locks at both ends. The standard way to do fluid type without media queries.
How to use
- Enter the min and max font size in pixels.
- Enter the min and max viewport width.
- Copy the generated clamp() value.
FAQ
What's wrong with vw units alone?+
Pure vw scales infinitely. Tiny phones get unreadable text and giant monitors get billboard text. clamp() locks at both ends so it stays usable.
Why are the rem and vw values weird decimals?+
Linear interpolation between two points with two unknowns produces non-round numbers. They're correct, just ugly.