better-typography

SKILL.md

Typography

Typography is mostly restraint: a sensible scale, comfortable spacing, enough contrast. A label, a table cell, a marketing headline and an article paragraph do not share one set of rules.

When reviewing, read the rendered page instead of scanning the code. Bad wrapping, widows and truncation only show up at real content lengths.

Write every fix in the project's styling system, and use the exact values below rather than familiar-looking equivalents. The cheat sheet maps each declaration to its Tailwind equivalent.

The words themselves belong to better-writing. Semantic heading structure belongs to better-accessibility. Spatial RTL layout and logical properties belong to better-layout. Contrast measurement belongs to better-colors. This skill owns how text renders, wraps and behaves in mixed-direction content.

Serve the right format

Use .woff2 on the web, for Brotli compression and broad support. .woff is a fallback for very old browsers. .ttf and .otf are desktop formats with no web compression. How the files load is the project's concern.

Properties over raw tags

When a CSS property exists, use it. font-weight: 650 instead of font-variation-settings: "wght" 650. font-optical-sizing: auto instead of "opsz". font-variant-numeric: tabular-nums instead of font-feature-settings: "tnum" 1.

Properties keep working when a non-variable fallback renders. Reserve raw tags for custom axes ("GRAD" 80) and niche features ("ss01" 1) with no property of their own. Axes and feature tags are listed in variable-fonts-and-opentype.md.