CSS clamp() Generator - Fluid Typography and Spacing Calculator
CSS clamp() Generator
Fluid font sizes that scale smoothly between two screen widths
Fluid Without Media Queries
One line of CSS replaces a stack of breakpoint overrides.
Zoom-Friendly
Uses rem plus vw and warns when the range could stop text from reaching 200% zoom.
Live Preview
Drag the viewport slider to watch the size change, with a table for common widths.
Private
Everything runs in your browser; nothing you paste is uploaded.
How the clamp() Value Is Built
clamp(MIN, PREFERRED, MAX) uses the preferred value but never goes below MIN or above MAX. For a size that grows linearly from 16px at a 360px viewport to 24px at 1280px, the slope is (24 − 16) / (1280 − 360) = 0.8696px per px of width, or 0.8696vw, and the line crosses zero width at 12.87px = 0.8043rem. The result is clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem).
Keeping a rem part in the preferred value matters for accessibility: vw units ignore browser zoom, so text set in vw alone will not grow when someone zooms in. As a rule of thumb, keep the largest size within 2.5 times the smallest. The same technique works for spacing, gaps and padding: change the property name and the sizes.
Key Takeaways
- rem + vw: Mixing units keeps zoom working.
- Ratio under 2.5: Bigger ranges can break 200% text zoom.
- Not just fonts: Use it for padding, gaps and margins too.