Fluid font sizes with clamp

A heading that grows with the viewport between a minimum and a maximum, no media queries.

SNP 082 #135 Filed css

css
h1 {
  font-size: clamp(2rem, 1rem + 4vw, 5rem);
}

Never smaller than 2rem, never bigger than 5rem, and in between it follows 1rem + 4vw. The rem part in the middle keeps it responding to the user's font size setting; a bare vw wouldn't.

To get the middle value: pick the sizes you want at two viewport widths and solve the line. For 2rem at 400px and 5rem at 1200px, that's 0.5rem + 6vw. Or let a calculator like utopia.fyi do it.

Every heading on this site is a clamp() line like this one, which is why its stylesheet has no breakpoint for them.