Fluid typography (clamp)

Font sizes that scale smoothly with the viewport instead of jumping at breakpoints, usually with CSS clamp().

text that grows with the screenresponsive font sizefont size that scales with viewportclamp font sizevw font sizefluid type scaletext resizes smoothly instead of jumpingno more breakpoints for font sizes

See it

Live demo coming soon

What it is

Fluid typography sizes text off the viewport width instead of switching at media queries, so a heading grows smoothly as the window widens. The modern spelling is 'clamp(min, preferred, max)', where the preferred value mixes a rem term with a vw term: 'font-size: clamp(2rem, 1.25rem + 3vw, 4rem)'. You are really drawing a straight line between two points (this size at 360px wide, that size at 1440px wide) and clamping both ends.

Reach for it on display type first, since that is where fixed sizes hurt most: a hero that reads as monumental on a laptop turns into a five-line wall on a phone. Whole scales can go fluid too, with each step interpolating between a mobile scale and a desktop scale.

Gotcha: a preferred value made of pure vw ignores the reader's browser zoom and font-size preference, which is a fast route to failing WCAG 1.4.4. Keeping a rem term in the mix helps, but it does not certify anything on its own: a tight clamp maximum can still stop text from reaching 200 percent. Test at 200 percent zoom and confirm nothing clips, overlaps, or disappears. And resist making body copy fluid: readers want a comfortable measure, not text that quietly inflates on a 27-inch monitor.

Ask AI for it

Build a fluid type scale with CSS clamp() as custom properties (--step--1 through --step-5). Use a 16px base at both endpoints: ratio 1.20 at a 360px viewport, ratio 1.333 at 1440px. Compute each step's size at both endpoints, then derive its 'clamp(min, preferred, max)' by linear interpolation between them, writing the preferred value as a rem term plus a vw term (for example 'clamp(2rem, 1.25rem + 3vw, 4rem)'). Clamp every step at both ends. Keep body copy near-static and apply the fluid steps to headings. Pair each step with a unitless line-height that tightens as the size grows. Then verify at 200 percent browser zoom that every text size still scales and nothing clips or gets cut off, and report any step where the maximum blocks it.

You might have meant

type scalefont sizemeasureleadingvertical rhythm

Go deeper