better-typography
Installation
SKILL.md
Great typography
Good typography is mostly restraint. A sensible scale, comfortable spacing and enough contrast beat any clever effect. A label, a table cell, a marketing headline and an article paragraph should not share one set of rules. Apply these principles when building or reviewing anything with text in it.
Match the project's styling system. Before suggesting or writing any fix, check how the codebase styles things and express every change in that system: Tailwind utilities in a Tailwind project, plain declarations in CSS, CSS Modules, styled-components or StyleX. The cheat sheet maps each declaration to its Tailwind equivalent. Never introduce a second styling approach just to apply a typography fix.
Quick Reference
| Category | When to use | Reference |
|---|---|---|
| Choosing fonts | Font categories, pairing, formats, typeface anatomy | choosing-fonts.md |
| Variable fonts & OpenType | Axes, weights, tabular numbers, stylistic sets | variable-fonts-and-opentype.md |
| Spacing & sizing | Type scale, line-height, letter-spacing, text trimming | spacing-and-sizing.md |
| Wrapping & punctuation | Measure, wrapping, truncation, smart punctuation, RTL | wrapping-and-punctuation.md |
| Details & accessibility | Underlines, selection, forms, decorative text, contrast | details-and-accessibility.md |
| CSS cheat sheet | Quick lookup of every property covered, with Tailwind equivalents | css-cheat-sheet.md |