CSS clamp() calculator
Enter min and max font sizes plus the viewport range where they should apply. Get a ready-to-paste clamp() in rem and vw, with the slope math spelled out.
Inputs
Result
Copy this into your CSS
- Slope
- (max − min) ÷ (maxVw − minVw) = px/px
- Intercept (px)
- Preferred value
Live preview
Drag the slider to simulate viewport width. Preview font size:
Viewport:
The quick brown fox jumps over the lazy dog.
Everything runs in your browser. The formula linearly interpolates between your min and max font sizes across the viewport range, thenclamp() caps the result.
About this tool
Fluid typography scales font size between a minimum and maximum based on viewport width. CSS clamp() is the one-liner that does it: a minimum, a preferred value (usually rem + vw), and a maximum.
This calculator converts your pixel inputs into rem and vw using your root font size, so you can drop the result straight into a stylesheet. The slope is (max − min) / (maxVw − minVw); the intercept anchors the line at your min viewport.
Read more
- CSS typography — fonts, sizing, and line height
- CSS units — px, rem, em, vw, and when to use each
- CSS media queries — breakpoints and responsive layout
- The CSS Handbook — full reference