Review typography and text rendering

Better Typography sets and reviews how interface text renders, from font loading and semantic type scales to wrapping, numeric alignment, punctuation, and selection. It proposes fixes in the project's styling system, with a CSS cheat sheet mapping declarations to Tailwind utilities.

The skill separates measurable requirements from design heuristics. Unitless line-height, weight 400 or heavier below 18px, a capped reading measure, 16px inputs on iOS, and tabular numbers on changing values are concrete checks. Pairing, tracking, and scale ratios become findings when they break the project's own system. A new typeface is proposed only when the task requests a type change.

Use it to inspect or implement authorized typography changes in a component or interface. Reviews remain read-only unless implementation is requested. Preserve existing conventions and mark unavailable visual checks as Not verified.

The skill does not own the words themselves, semantic heading structure, spatial RTL layout, contrast measurement, or the final accessibility pass for contrast. Those belong respectively to better-writing, better-accessibility, better-layout, and better-colors, with better-accessibility judging contrast compliance. Source inspection alone cannot establish rendered conformance.

The review examines loaded font faces, declared styles, heading levels, layout constraints, and realistic text. It prefers a small set of fonts, sizes, and weights, with semantic role names that pair size, line-height, and weight. Heading sizes descend with level; deeper levels may share a size if weight or tracking distinguishes them. Headings should not fall below body size except for a deliberate overline.

Font loading checks ensure every used weight or style has a matching face. Synthesis is disabled narrowly only after fallback verification. Standard CSS properties are preferred over raw variable-font axes or feature tags: font-weight instead of a raw weight axis, numeric properties instead of raw numeric feature settings. Optical sizing stays at its automatic default unless the design deliberately separates optical and rendered size.

The guidance gives role-specific line-height ranges: approximately 1.1 for display, 1.2 to 1.3 for headings, and 1.5 to 1.6 for body text. Text wrapping to three or more lines needs at least 1.4. Tracking uses em units, while body sizing uses rem so browser preferences still apply. Long-form body text starts at 16px; smaller UI roles have separate starting points.

Long-form measure is capped at 60 to 75 characters. Short headings may use balanced wrapping, paragraphs may use pretty wrapping, and long words or identifiers need overflow handling. Interface alignment stays at start. Timers, counters, prices, and numeric columns use equal-width digits:

font-variant-numeric: tabular-nums

Truncation recipes cover single-line ellipsis and multi-line clamping, but a route to the complete value is required and owned by better-layout. Natural-case stored text, CSS case transforms, typographic punctuation, font-based underline positioning, and appropriate underline thickness are also reviewed. Code retains straight quotation marks.

Mobile inputs retain a 16px font size to avoid iOS Safari page zoom. The skill offers either a mobile size increase or a scaled visual rendering, with the design choosing the intended appearance. Font smoothing is applied once at the root. Language and direction attributes support pronunciation, punctuation, and mixed-direction values; bidirectional isolation is used instead of manually reordering digits.

Additional checks cover progressive text-box trimming in compact controls, CSS-based decorative text that remains searchable and selectable, legible selection styling, and avoiding broad selection suppression. Disabling selection is reserved for drag or gesture surfaces where accidental selection interferes.

Findings are grouped by violated principle, ordered by severity, and consolidated by root cause. Each row contains Severity, Location, Before, After, and Why, with a file-and-line location and explicit user impact. HIGH covers unreadable text, inaccessible truncation, and clipping at 320px or 200% zoom. The verdict is Block while a HIGH remains and Approve otherwise, bounded by inspected coverage.

Without a browser, verification checks declared hierarchy, sizes, weights, units, line-height, measure, and truncation against realistic strings. With a browser, it compares computed values and resizes real content to inspect wrapping and clipping. Supporting references cover font choice, variable fonts, spacing, punctuation, and accessibility details.