How the formula works
Two viewport-and-size pairs define a straight line. The slope becomes a viewport-width value; the intercept is converted to rem using your root font size. clamp() enforces the endpoints.
The Locolory toolkit / Design & Web
CSS clamp() Fluid Typography Generator
Calculate responsive clamp(min, preferred, max) declarations for smooth viewport scaling.
What is fluid typography? It scales text continuously between defined minimum and maximum sizes as the viewport changes, avoiding abrupt breakpoint-only jumps.
- Key formula: Slope = (maximum size − minimum size) ÷ (maximum viewport − minimum viewport). The preferred term combines that vw slope with a rem intercept.
All calculations and previews run locally in your browser.
• Calculated 100% locally in browser
Fluid scale controls
● CSS + Tailwind output
font-size: clamp(1.1250rem, 2.8169vw + 0.4648rem, 3.0000rem);
text-[clamp(1.1250rem,_2.8169vw_+_0.4648rem,_3.0000rem)]
Preview width720px · 27.7px type
Fluid type, steady rhythm.
Accessible fluid type
Keep minimum text readable, avoid extreme scaling, and verify browser zoom and text-only zoom. Preview representative headings and long content in the real layout.
Your input shapes the next update
Spotted something? Tell us.
A short note opens in your email app, ready to send to hello@locolory.store.
Good questions. Clear answers.
What does CSS clamp() do for typography?
clamp() sets a minimum, fluid preferred value, and maximum so text scales with the viewport while remaining within readable bounds.
How is the preferred fluid value calculated?
The calculator finds the line between the chosen viewport and font-size pairs, then expresses its slope in vw and its intercept in rem.
Does fluid type replace responsive design testing?
No. Test zoom, wrapping, narrow screens, long translations, and your actual font metrics. The generated declaration is a starting constraint, not a readability guarantee.