better-typography

Use text-wrap: balance on headings to distribute lines evenly and text-wrap: pretty on descriptions to prevent a single short word on the last line. Skip both in long-form text, and add overflow-wrap: break-word where long strings could escape containers.

Apply font-variant-numeric: tabular-nums to any changing value like timers, counters, or prices. Default digits have varying widths, so tabular numbers keep every digit the same width and prevent layout shift.

Use .woff2 for web fonts because it provides Brotli compression and broad browser support. Keep .woff only as a fallback for very old browsers, and avoid .ttf and .otf which are uncompressed desktop formats.

iOS Safari zooms the page when an input's font-size 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 a CSS transform.

Prefer standard properties like font-weight, font-optical-sizing, and font-variant-numeric because they keep working with non-variable fallback fonts. Reserve font-variation-settings and font-feature-settings for custom axes or niche features with no dedicated property.

Single-line truncation uses text-overflow: ellipsis with overflow: hidden and white-space: nowrap, while line-clamp handles multiple lines. Truncation hides content, so when the missing text matters, keep the full value reachable in a tooltip or expanded view.