Responsive Typography

A heading set to font-size: 48px looks great on a desktop monitor with 1200px of width. But on a 375px phone screen, that same 48px heading might take up two or three lines and dominate the viewport, pushing actual content below the fold. The obvious fix — using a media query to set a smaller font size on mobile — works but creates a jarring jump. At 767px the heading is 48px; at 768px it suddenly snaps to 32px. There's no smooth transition.

Viewport units (vw) seem like the answer: font-size: 5vw scales smoothly with the screen. But they have a critical flaw — on very small screens the text becomes microscopic, and on very large screens it becomes comically huge. A 5vw heading is 18.75px on a 375px phone (barely readable) and 96px on a 1920px monitor (absurdly large). You need a way to scale smoothly while setting a minimum and maximum size. That's exactly what clamp() does.

Look at any well-designed website — Apple.com, Stripe.com, or Medium — and resize your browser window slowly. The headings scale smoothly, never too small to read and never too large to look ridiculous. That's fluid typography in action.