Fluid Typography with CSS `clamp()`

In the past, responsive typography required dozens of @media queries with stepped jumps: at 768px, a headline would abruptly snap from 32px to 44px.

Modern design systems use fluid typography via CSS clamp():

:root {
  --font-size-display: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
}

• 2rem (32px): The minimum font size on mobile screens.
• 1.5rem + 2.5vw: The preferred fluid rate, growing smoothly as viewport width expands.
• 3.75rem (60px): The maximum font size cap on ultra-wide desktop monitors.

Fluid scales eliminate abrupt visual jumps, ensuring headings scale gracefully across foldable phones, tablets, laptops, and 4K displays.