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 final line. Skip both in long-form text, and add overflow-wrap: break-word where long strings could escape their container.

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

Use the CSS property when one exists: font-weight, font-optical-sizing, and font-variant-numeric keep working when a non-variable fallback font renders. Reserve font-variation-settings and font-feature-settings for custom axes and niche features with no property equivalent.

iOS Safari zooms the page when an input's font-size is below 16px, treating smaller text as too hard to read. Fix it by sizing the input to 16px on mobile, or keep font-size at 16px and scale the rendered text down with a CSS transform.

Use .woff2 on the web for Brotli compression and broad browser support, with .woff only as a fallback for very old browsers. .ttf and .otf are desktop formats without web compression and should be avoided.

Cap long-form text at 60-75 characters per line so the eye can find the next line easily. Any unit works: 65ch measures characters directly, while Tailwind's max-w-xl or max-w-2xl land in range at a 16px body size.