web-typography

Start with a readable body typeface, then add a contrasting headline face using structural contrast such as serif plus sans-serif. Limit yourself to one or two families, and prefer superfamilies like Roboto or IBM Plex when uncertain.

Use at least 16px (preferably 18px) for body text with a line height of 1.5 to 1.7. Keep line length between 45 and 75 characters using max-width: 65ch for comfortable reading.

Use the clamp() function with a minimum, viewport-scaled preferred value, and maximum, such as font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem). This scales text smoothly across viewports without media query breakpoints.

Serve fonts in WOFF2 format, subset them to needed characters, set font-display: swap, and preload critical fonts. Keep total font payload under 200KB and consider a variable font to replace multiple static weights.

Variable fonts pack multiple weights into one file, often smaller than several static files, and allow granular weight control. Use them when you need three or more weights; static files are fine for one or two weights.

Rendering differences come from font hinting quality and font-smoothing behavior across operating systems. Apply -webkit-font-smoothing: antialiased, test on real devices and browsers, and avoid poorly hinted fonts at small sizes.