Fluid typography

Why fluid typography matters

Fixed breakpoints (14px on mobile, 18px on desktop) cause abrupt text jumps. Fluid typography scales smoothly across all widths, providing a better user experience.

CSS clamp() for fluid sizing

The clamp(min, preferred, max) function ensures font size stays between bounds while scaling smoothly with viewport width.

/* Font scales from 16px to 32px as viewport grows from 320px to 1200px */
h1 { font-size: clamp(1rem, 4vw, 2rem); }

/* Container width smoothly scales */
.container {
  width: clamp(320px, 100%, 1200px);
  margin: 0 auto;
}

Fluid scale with calc()

For finer control, use calc() to derive sizing based on viewport width.

/* Font grows 1px per 10px of viewport width */
body { font-size: calc(0.875rem + 1vw); }

/* Padding grows proportionally */
.section { padding: calc(1rem + 3vw); }