📐CSS clamp() Font Calculator

Enter min/max font sizes and viewport widths to generate a ready-to-use CSS clamp() value.

px
px
px
px

Fluid Typography with CSS clamp()

CSS clamp(min, preferred, max) creates fluid typography that smoothly scales with viewport width — no media queries needed. The preferred value uses vw units combined with a px or rem offset to create a linear interpolation between the minimum and maximum font size across the defined viewport range.

How the Math Works

The calculator computes the slope of the line connecting (minVW, minFont) and (maxVW, maxFont): slope = (maxFont − minFont) / (maxVW − minVW). The y-intercept is minFont − slope × minVW. This gives the preferred value: slope×100vw + intercept. Below minVW the font locks to minFont; above maxVW it locks to maxFont.

Practical Example

For a heading that should be 24px on mobile (375px) and 40px on desktop (1440px), the result is approximately clamp(1.5rem, 1.5vw + 0.94rem, 2.5rem). Paste this directly into your CSS: h1 { font-size: clamp(1.5rem, 1.5vw + 0.94rem, 2.5rem); }

Frequently Asked Questions

What browsers support clamp()?

All modern browsers: Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+. Internet Explorer does not support it — add a px fallback before the clamp() declaration for IE support if needed.

Can I use clamp() for properties other than font-size?

Yes — padding, margin, width, height, gap, and any CSS property that accepts length values. It is especially useful for building responsive spacing and layout systems without breakpoints.