CSS Clamp() Responsive Font Calculator

Set your min/max font size and viewport range, then drag the live preview to see exactly how the text scales at every screen width.

font-size: clamp(1.125rem, 0.1875rem + 3.75vw, 3rem);
Responsive Interactive PreviewSimulated Screen: 1200px | Live Value: 48px (3rem)
Almost before we knew it, we had left the ground.

Fluid expression scales font-size between 18px and 48px across viewports from 400px to 1200px.

See the Scaling, Don't Just Guess It

Most clamp() calculators give you a CSS value and leave you to imagine how it behaves. This one shows you - drag the live preview box and watch your actual text resize in real time, at your actual chosen font, weight, and content, across the full range from mobile to desktop.

The math follows the same slope-and-intercept formula real fluid typography systems use, so the number you copy is exactly what the browser will compute at every width in between — not an approximation.

Why Fluid Typography Beats Fixed Breakpoints

Traditional responsive type sets a font-size per media query breakpoint, which means text visibly jumps in size the moment the viewport crosses a threshold. A clamp()-based fluid size scales continuously instead, so text always looks proportional to the screen - no awkward jump, and far fewer breakpoints to maintain.

Frequently Asked Questions

clamp(min, preferred, max) lets a font size scale smoothly between a minimum and maximum value as the viewport width changes, instead of jumping between fixed sizes at media query breakpoints. The 'preferred' value is usually a mix of a fixed unit and vw (viewport width), which this tool calculates for you.

Enter the smallest font size you want (at your minimum viewport width) and the largest font size you want (at your maximum viewport width), then drag the live preview box left and right, or use the width presets, to see exactly how the text scales at any screen size in between. The generated CSS updates automatically.

The font size stays fixed at the minimum size below your minimum viewport width, and fixed at the maximum size above your maximum viewport width - that's the entire point of clamp(). Drag the preview past either edge to see this in action.

rem is generally recommended because it respects a user's browser font-size preference for accessibility, while px does not. This tool supports both - switch the unit toggle and the CSS updates instantly.

No - those are preview-only settings so you can see how your chosen typeface actually looks at each size. The generated CSS only contains the font-size: clamp(...) rule, which you can combine with whatever font-family and font-weight you're already using.

The same clamp() formula works for any CSS length property - padding, margin, gap, border-radius, and more all scale the same way. Just treat the min/max font size fields as the min/max value for whichever property you're calculating.