typography

name	typography
description	Use when picking fonts, defining a type scale, setting line-length and line-height, dealing with mixed-size alignment, styling links and buttons, or anywhere typography decisions are being made one pixel at a time. Covers hand-picked scales, font selection shortcuts, character-per-line targets, baseline alignment, inverse line-height/font-size, link restraint, alignment rules, and letter-spacing.

Typography

When to use this skill

• A type scale is being chosen (or hasn't been chosen and sizes are being picked ad hoc).
• A font is being selected and the choice feels overwhelming.
• Body text is too long per line, or too short, and reading feels off.
• Headlines and supporting text on the same line don't visually align.
• Every link in the UI is blue-and-underlined and the result looks busy.
• All-caps text is hard to read.
• Centered text is being used for long blocks.

Core stance

A few hand-picked sizes work better than a mathematical scale; safe-and-popular fonts are usually right; readability rules are stricter than they feel. Most type problems trace back to skipping the scale and picking values one at a time.

Principles

1. Hand-pick the type scale; don't rely on modular ratios. Scales like the golden ratio produce subpixel values (39.063px) that browsers round inconsistently, and they leave gaps where you really do need a size between 16 and 21. A solid hand-picked scale:

12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72

Use px or rem units. Avoid em — it compounds with nesting and silently exits the scale.

2. Font selection — shortcuts that work.

• For UI text: a neutral sans-serif (Inter, Helvetica) or the system font stack is rarely wrong.
• On Google Fonts: filter by "10+ styles." Fonts with many weights/italics tend to be more carefully crafted, and this cuts ~85% of the catalog.
• Sort by popularity. Crowd wisdom is reliable for typography.
• Avoid condensed fonts with short x-heights for UI body text — they're built for headlines.
• Inspect typography on sites you admire. Steal the picks.

3. 45–75 characters per line. This is roughly 20–35em of width. Outside this range readers either lose their place at the line break (too long) or constantly snap back (too short). Limit paragraph width even when the surrounding container is wider — set the paragraph's max-width to 34em and let the container be whatever.

4. Baseline, not center, when mixing font sizes on a line. When a large title and small actions sit on the same row, vertically centering offsets their baselines and looks wrong, especially when the elements are close. Align by baseline (align-items: baseline); the eye reads them as on the same row.

5. Line-height is inversely proportional to font-size and proportional to line-length.

• Small text needs more breathing room — 1.5 to 1.75.
• Large headlines barely need any — 1 is often correct.
• Wide paragraphs need taller line-height (up to ~2) so eyes can find the next line; narrow paragraphs can go shorter.

6. Not every link needs the link treatment. When most things on a screen are links (a list of cards, an article archive), default-blue-underlined creates noise. Use a subtler signal — a heavier weight or a darker color — and reserve the strong link styling for inline links inside paragraphs. For genuinely low-priority links, change color or add underline only on hover.

7. Alignment rules.

• Long-form text: left-align. Centered paragraphs over 2–3 lines are harder to scan because each line starts at a different x position.
• Short blocks (1–2 lines), headlines, hero copy: centering can work. If one block is too long for centering to work, rewrite the copy shorter rather than fighting the alignment.
• Tables of numbers: right-align so decimals stack — $174.72 over $1,068.73 becomes scannable at a glance.
• Justified text: only with hyphenation enabled, or you'll get awkward gaps. Generally avoid; left-aligned is fine.

8. Letter-spacing as a tuning knob, not a default.

• Headlines using a body font: tighten letter-spacing slightly (e.g. -0.025em) to mimic a purpose-built headline face. The reverse doesn't work — a headline font widened still won't read well at body sizes.
• All-caps text: increase letter-spacing (~0.05em or more). Capital letters have similar shapes and cling together; spacing them improves legibility.

Quick reference

• Hand-picked scale: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72. Units: px or rem.
• Body line length: 45–75 chars (max-width: 34em works well).
• Line-height: small text 1.5–1.75; large headlines 1.0–1.2.
• Mixed sizes on one line: align-items: baseline.
• All-caps: letter-spacing: 0.05em+.
• Tables of numbers: right-align.
• Most links don't need to look like links — heavier weight or darker color is enough.

Attribution

Heuristics distilled from Refactoring UI by Adam Wathan & Steve Schoger (https://refactoringui.com). Independent skill package; not affiliated with or endorsed by the authors.