better-typography

Apply font-variant-numeric: tabular-nums to any value that changes, such as timers, counters, or prices. Proportional digits have varying widths, so tabular numbers keep each digit the same width and prevent layout shift.

iOS Safari zooms when input text is below 16px. Either size the input up on mobile with a responsive class like text-base sm:text-sm, or keep font-size at 16px and scale it down visually with transform while compensating width and line-height.

Use woff2, which offers Brotli compression and broad browser support. Woff is only a fallback for very old browsers, while ttf and otf are raw desktop formats without web compression and should not be served on the web.

Prefer font-variant-numeric: tabular-nums over font-feature-settings: "tnum" 1. High-level CSS properties keep working when a non-variable fallback font renders, while raw feature tags only apply to fonts supporting them.

Use text-wrap: balance on headings to distribute text evenly across lines, and text-wrap: pretty on descriptions to avoid a single short word on the last line. Skip both in long-form paragraphs, where they waste space and reduce readability.

Setting font-synthesis: none should only happen after verifying every required bold, italic, small-cap, superscript, and subscript form stays visually distinct across the full fallback stack. Disabling synthesis blindly can erase emphasis and harm meaning.