← Demo hub

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.