web-typography

Start with the content's purpose and reading duration, then evaluate x-height, open counters, and even color at actual use sizes. Safe starting points include Georgia, Source Serif Pro, and Charter for serif, or Inter and Source Sans Pro for sans-serif.

Create clear structural contrast, such as serif headlines with a sans-serif body, and limit yourself to one or two typefaces. Superfamilies like Roboto and Roboto Slab or same-designer pairs like FF Meta and FF Meta Serif reduce guesswork.

Aim for 45-75 characters per line (66 optimal) using max-width: 65ch, with line height between 1.4 and 1.8 for body text. Longer lines need more line height; headlines use tighter spacing around 1.1-1.25.

Use font-display: swap in @font-face so fallback text renders immediately, preload critical fonts with link rel="preload", and serve subsetted WOFF2 files. Keep total font payload under 200KB, optionally using a variable font.

System font stacks like -apple-system and Segoe UI offer zero loading cost and native feel, making them ideal for app UIs. Web fonts suit brand-driven or editorial contexts where distinctive typography matters, provided loading is optimized.

Common causes include font sizes below 16px, insufficient line height, poor font-smoothing settings, or low contrast. Increase body size to 16-18px, set line-height to 1.5-1.7, and test rendering on real devices and browsers.