Fluid Typography with clamp()

Fluid Typography

clamp(min, preferred, max) scales font sizes smoothly between breakpoints without media queries.

Example

:root {
  --h1: clamp(1.75rem, 4vw + 1rem, 3rem);
  --body: clamp(0.9rem, 1vw + 0.75rem, 1.1rem);
}
h1   { font-size: var(--h1); }
body { font-size: var(--body); }

CSS

Full Editor

Pro Tip

clamp() eliminates repeated @media blocks just for font sizes.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned