Typography

This skill sets and reviews how text renders, from the type scale and spacing to font loading, wrapping and punctuation. It writes every fix in the project's styling system, and the cheat sheet maps each declaration to its Tailwind utility.

The words belong to better-writing, semantic heading structure to better-accessibility and spatial RTL layout to better-layout. Measure contrast with better-colors; whether it passes is better-accessibility's.

Measured, not preferred

Some values here are exact. Unitless line-height, weight 400 or heavier below 18px, a 60, 75 character measure, 16px inputs on iOS and tabular-nums on changing values are findings when missed.

Letter-spacing, pairing and scale ratios are heuristics. Report them only where they break the project's own scale. Never propose a new typeface, paid or free, unless the task asks for a type change.

Fewer fonts, sizes and weights

Rarely use more than three fonts; marketing pages can carry more than apps. Weight and size carry hierarchy, so each extra one dilutes it. Pair for contrast. A serif headline over a sans body reads as deliberate, two near-identical sans-serifs read as a mistake.

Below 18px, use weight 400 or heavier. Weights 100, 300 belong at 28px and up, checked against the background even there. Categories, Display and Text cuts, formats and fallback stacks are in choosing-fonts.md.

Load the faces the design uses

Browsers synthesize a weight or style the family doesn't ship, distorting the face. Load every face the design uses. Disable synthesis only after verifying the fallback stack, and only the unwanted mode. The synthesis longhands show how.

Properties over raw tags