🍱 Lunchbox Hands

CSS clamp() Calculator

Generate a responsive clamp() font-size from min/max viewport and sizes

Generate a responsive clamp() expression for fluid typography. Enter the min/max viewport widths and font sizes and get copy-ready CSS with a live preview. Everything runs in your browser.

Converting fixed pixel sizes elsewhere in your stylesheet? The px to rem converter does the same division by the root font size that this calculator uses for its bounds and intercept.

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

Scales from 16px at a 320px viewport up to 24px at 1280px, clamped outside that range.

The quick brown fox resizes with the viewport.

Resize the window to see the fluid size change.

Get weekly dev tools and tips