Clamp Calculator
Generate fluid CSS clamp() values for responsive typography and spacing
Generate fluid CSS clamp() values for responsive typography and spacing
font-size: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);clamp(MIN, PREFERRED, MAX)returns the preferred value, unless it falls below the minimum (then it returns the min) or above the maximum (then it returns the max). It's effectively max(MIN, min(PREFERRED, MAX))in a single call, and it's the backbone of modern fluid typography.
Combining clamp() with a viewport-relative unit like vw lets font sizes scale smoothly with the browser width. For example font-size: clamp(1rem, 0.5rem + 2vw, 2rem) grows from 16px on a narrow screen to 32px on a wide one, smoothly — no breakpoints, no abrupt jumps. This calculator outputs the same shape, based on a minimum and maximum font size at a minimum and maximum viewport width.
width: clamp(20rem, 50%, 60rem) gives a container that stays between sensible bounds no matter the parent width.aspect-ratio gives hero images that are tall enough on desktop and not too tall on mobile.Always include a rem term in the preferred value (e.g. 1rem + 2vw). A pure-vw preferred breaks browser zoom, because vwdoesn't respond to text zoom the way rem does.