CSS Clamp Generator
Fluid font sizes and spacing with clamp(), rem + vw, live preview and type scale.
About this tool
Enter the smallest and largest size and the screen widths where each applies, in px or rem. You get a ready clamp() declaration, a warning if the range could hurt accessibility, and a slider that previews the size at any screen width. Below it, generate a whole fluid type scale as CSS custom properties.
How clamp() fluid sizing works
clamp(min, preferred, max) returns the preferred value but never goes below min or above max. For fluid sizing, the preferred value is a straight line between two points, size A at viewport A and size B at viewport B, so the size grows smoothly instead of jumping at media-query breakpoints. The slope is (max size − min size) ÷ (max viewport − min viewport). The line is written as a rem intercept plus a vw term, because 1vw is 1% of the viewport width. For 16px at 320px wide growing to 24px at 1280px, the slope is 8 ÷ 960, which works out to 0.8333vw, with an intercept of 13.33px (0.8333rem). The result is clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem), exactly 20px on an 800px screen. Keeping a rem part matters. Text sized only in vw doesn't get bigger when someone zooms the browser, which can fail WCAG 1.4.4 (resize text). The tool warns when the largest size is more than 2.5 times the smallest. The fluid type scale applies the same idea to every heading level, with a ratio that grows too (1.2 on phones, 1.333 on desktops), so headings gain more drama on big screens. The same formula works for padding, margins and gaps. Honest limits: clamp() works in every current browser, but test the extremes, and compute container-query (cqi) versions separately. The type scale generator and the px to rem converter are related.
Frequently asked questions
What is a CSS clamp() function?
clamp(min, preferred, max) picks the preferred value but keeps it between the minimum and maximum. It's ideal for sizes that should scale with the screen.
How do you calculate fluid font size?
Slope = (max size − min size) ÷ (max viewport − min viewport). The preferred value is (min size − slope × min viewport) in rem, plus slope × 100 in vw.
Is fluid typography accessible?
It is if the preferred value includes rem and the max is no more than about 2.5 times the min, so browser zoom can still enlarge the text.
Is anything stored?
No. Calculations run in your browser and nothing is stored or sent.