How to Use the CSS clamp() Fluid Typography & Spacing Calculator
-
1
Enter your minimum viewport (e.g. 375px) and minimum font size (e.g. 16px).
-
2
Enter your maximum viewport (e.g. 1280px) and maximum font size (e.g. 32px).
-
3
Copy the calculated CSS clamp() property with rem and vw units.
Practical Example & Use Case
Common Real-World Scenario
Creating a hero headline that smoothly scales from 32px on iPhone 13 to 64px on wide screens: font-size: clamp(2rem, 1.34rem + 2.76vw, 4rem).
Technical Notes & Limitations
Browser Engine Architecture
Generates standard W3C CSS clamp() syntax supported in 97%+ of all active browsers.
Frequently Asked Questions
How does fluid typography work?
It calculates a linear slope: clamp(min, slope*vw + intercept, max). The font scales proportionally between the minimum and maximum viewport bounds.
Why use rem instead of px for min/max?
Using rem respects user browser zoom and OS accessibility font settings, whereas hardcoded px disables scaling.