CSS Clamp Calculator
Fluid type that scales with the viewport needs a correct clamp() expression. Enter your minimum and maximum sizes and the viewport range, and the tool builds the expression with the right slope and intercept, with a live preview.
Live preview — resize the window to see it scale
Fluid typography preview
How to use
- Enter the smallest and largest font sizes you want.
- Enter the viewport widths where scaling should start and stop.
- Copy the clamp() expression into your CSS.
Tips
- Test the result at the smallest and largest viewport widths to confirm it lands on your min and max.
- Set a sensible fallback font size for browsers that do not support clamp().
- Pair fluid type with a readable line height - large type needs slightly tighter spacing.
- Use clamp() for headings first; body text usually works better at a fixed size.
Note: The preferred value is a straight line between the two points: slope in vw plus an intercept in rem, assuming a 16px root font size.