Last updated September 16, 2026 · Report an error
Fluid typography scales a font size smoothly with the viewport width, rather than jumping abruptly at media query breakpoints — CSS's clamp() function makes this possible in a single declaration, once you know the right linear interpolation formula.
This calculator generates a ready-to-use clamp() value from your minimum and maximum size and viewport range.
How it works
Enter the minimum size (at the minimum viewport width) and maximum size (at the maximum viewport width). The calculator finds the linear interpolation slope between them, converts it into a viewport-width-relative (vw) value, and assembles the complete <code>clamp()</code> declaration.
- Enter minimum size (px).
- Enter maximum size (px).
- Enter minimum viewport width (px).
- Enter maximum viewport width (px).
- Click Calculate to see your results.
Examples
16px to 24px, 400px to 1200px viewport
Scaling from 16px at a 400px viewport to 24px at a 1200px viewport produces clamp(16px, calc(12px + 1vw), 24px).
Who should use it
- Creating fluid, responsive font sizes that scale smoothly across device widths.
- Generating responsive spacing (padding, margin, gap) values without media query breakpoints.
Industry applications
- Web design and front-end development
- Responsive and fluid web design
Advantages
- Generates the exact standard fluid-typography formula, not an approximation.
- Works for any CSS length property, not just font-size.
Limitations
- Assumes a simple linear scale between two points — doesn't support multi-stage or non-linear scaling curves.
Common mistakes to avoid
- Manually guessing at vw values instead of calculating the precise linear interpolation slope, which can produce uneven or unintended scaling.
- Forgetting that clamp() still needs sensible min/max bounds — an unbounded vw value alone can grow or shrink too aggressively on extreme viewport sizes.
Best practices
- Choose your minimum and maximum sizes based on your smallest and largest expected viewport widths (like 400px for small phones and 1200px for desktop), not arbitrary round numbers.
Tips
- This same slope-and-intersection technique is the basis for popular "fluid type scale" tools used throughout modern responsive web design — understanding the formula this calculator generates helps you tweak values by hand when needed.