better-typography

Run a typography review that checks hierarchy, wrapping, measure, and font loading against a defined set of principles. Findings are grouped by principle with severity, file location, before/after code, and a final Block, Needs changes, or Approve verdict.

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

Apply font-variant-numeric: tabular-nums (the tabular-nums utility in Tailwind) to timers, counters, and prices. Proportional digits have different widths, so equal-width tabular digits keep the layout stable as values update.

iOS Safari zooms the page when input text is smaller than 16px, treating smaller text as too hard to read while typing. Set inputs to text-base on mobile (e.g. text-base sm:text-sm) instead of using maximum-scale=1, which breaks pinch zoom elsewhere.

Use font-weight, since it keeps working when a non-variable fallback font renders. Reserve font-variation-settings for custom axes like GRAD that have no dedicated CSS property.

Cap long-form text around 60-75 characters per line. Any unit works: 65ch measures characters directly, and at 16px body size Tailwind's max-w-xl or max-w-2xl land in the same range.