typography
Setting Type
Default posture: one family, a short closed scale, unitless leading banded by role, a capped measure — and hierarchy carried by weight and grey value before size. Most product UI never needs a display size at all. Benji Taylor's site sets its article h1 at 15px/600, h2 at 14px/560 and body at 14px/460 on a 20px line-height with -0.09px tracking, and 19px is the largest type anywhere on it; the page still reads as ordered because weight and value do the work size normally does. Reach for a larger step only once weight and grey have run out. This skill sets type for legibility and rhythm; whether the family expresses the brand belongs to brand-identity, which picks the face and never renegotiates the scale, leading, measure or numerals fixed here. The words inside the type are ui-copy. Contrast ratios have exactly one owner and it is color.
Detect the styling idiom before proposing a single declaration. Read how the project already expresses type — Tailwind utilities, a @theme block, CSS custom properties, CSS Modules, styled-components, generated tokens — and write every fix in that same mechanism. A type fix is never a reason to bolt a second styling system onto a codebase; if the scale lives in @theme, the new step goes there, not in a one-off style prop.
Quick Reference
| Open this | When |
|---|---|
| scale-and-rhythm.md | You are building or repairing the size scale itself, or setting leading and tracking per step. |
| line-behavior.md | Lines break, wrap, truncate or overflow badly, or the content is multilingual or right-to-left. |
| typefaces-and-loading.md | A face is being chosen, paired, or swapped, or text flashes, shifts or renders late on load. |
| font-capabilities.md | You need a variable axis, an OpenType feature, small caps, or a numeral style. |
| tailwind-map.md | The project is Tailwind and you need the utility for a declaration named in this skill. |