better-typography

Topics in the source

• Typography
• Measured, not preferred
• Fewer fonts, sizes and weights
• Load the faces the design uses
• Properties over raw tags
• Use a type scale with semantic names
• Heading sizes descend with level
• Line-height by role

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. 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. 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

This is an excerpt. Refer to the complete source and its current requirements.