clamp() fluid typography
Try: Resize the window—the headline scales between min and max without JS.
Responsive headline without breakpoints
Body copy uses a tighter clamp. This pattern replaces resize listeners and breakpoint maps for many marketing layouts.
Source
.fluid-title {
font-size: clamp(1.5rem, 4vw + 0.75rem, 3rem);
}
.fluid-body {
font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.1rem);
}
Support:
clamp() is universal in modern browsers.