Typography Skill
How this skill behaves (read first)
This is a generative skill. Typography has two default failure modes: bland (pick one safe font, no real scale or hierarchy) and over-expressive (multiple display faces, many weights/colors/cases stacked → cluttered and illegible). So this skill gates:
- Establish brand personality, content types, and medium — these drive the expressive choices worth making.
- Apply the always-true core — legibility, a clear scale/hierarchy, and restraint hold for any product.
- Make the typeface/pairing/scale choices deliberately — surface them as gated decisions tied to brand, not defaults.
Then hand off to the audits: accessibility (size, contrast, spacing), aesthetics (hierarchy, balance).
Step 0 — Establish context before choosing type
- Brand personality & expected aesthetics — what impression should it make, and what does the audience expect (a kids' app vs. a banking app demand opposite tone)?
- Content types — what kinds of text exist (display, headings, body, captions, labels)? This sizes the hierarchy.
- Medium — long-form reading vs. dense UI vs. marketing — changes the legibility/expressiveness balance.
- Language direction — LTR vs. RTL (drives default alignment).
State assumptions if proceeding without answers.
The always-apply core (true for any typography)
Readability & legibility (body text)
- Body ≥ 16px. Start the scale from body size (it occupies the most space), then size up/down.
- Line length 50–75 characters. Longer is hard to track; too short forces choppy eye movement.
- Line height ~150% of font size for body; larger sizes/widths need more.
- Paragraph spacing ≥ 1.5× line spacing (WCAG); separate ideas into digestible blocks.
- Left-align body text in LTR (right for RTL). Reserve center alignment for short elements (headlines, quotes, CTAs) — it slows reading and hurts users with cognitive/visual impairments.
- Design for scannability — ~79% of users scan, ~3% read word-by-word; hierarchy + spacing make scanning work.
Hierarchy & restraint
- Limit to ≤3 typefaces — often one superfamily with good weight/style variety is enough.
- Build a type scale (size, weight, style) covering the content types; keep levels distinct.
- Use ≤3 hierarchy instruments (size, weight, style, color, case) per level and 2–3 heading levels; stacking all of them is clutter (a huge, bold, colored, all-caps headline shouts).
- Emphasis is soft and singular — italics (softest) or bold, not several at once; color in type sparingly.
- Group with white space & proximity — related text close, unrelated separated.
The context-dependent decisions (surface, don't auto-apply)
Present each with its trade-off and a recommendation tied to Step 0. Stacking display faces, weights, and decoration is the failure mode.
| Decision | Apply when | Avoid / adapt when | Default recommendation |
|---|---|---|---|
| Typeface personality / mood | A display/character face fits the brand and appears only in headings | Using an expressive face for body text (kills readability) | Character in display, high-legibility for body |
| One vs. two typefaces | A heading/body pairing adds useful contrast | A third face, or pairing that lacks clear contrast | One superfamily by default; add a second only with clear contrast + role |
| Number of weights | A few weights to build hierarchy | A weight for every whim | The minimum that makes the scale legible |
| Type-scale ratio | Dramatic ratio for marketing/editorial impact | Dramatic ratio in dense UI (wastes space) | Modest ratio for product UI; bolder for marketing |
| Serif vs. sans | Match medium/brand (serif long-form/editorial trust; sans UI clarity) | Choosing by taste against the medium | Fit the medium and audience expectation |
| Decorative touches (drop caps, pull/block quotes) | Editorial/long-form layouts | Product UI, forms, dense screens | Editorial only |
Always avoid (regardless of context): typographic clichés (Papyrus for "ancient", Comic Sans for "fun"), anachronisms (period-mismatched faces), and appropriateness failures (a casual script on a banking app). Explore beyond the obvious; prioritize fit over novelty.
Validate the result (orchestration)
Hand-offs name each lens by its installable skill
name. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.
After choosing or revising type, hand the result to the audit lenses rather than declaring it done. These are candidate lenses — posture is set by docs/orchestration-policy.md, or route the whole thing through ux-design-review. Here, microcopy is Tier A (auto-run); accessibility and aesthetics are Tier B (offered) — under an existing design system aesthetics is suppressed and accessibility narrows to usage. If the user invoked this skill for one specific thing, respect that scope.
ux-accessibility-audit(Tier B — offer; narrow under a design system) — body ≥16px, contrast of text on its background, line length/height and paragraph spacing, alignment, and that hierarchy doesn't rely on color alone.ux-aesthetics-audit(Tier B — offer; suppress under a design system) — typographic hierarchy effectiveness, balance, white space, and whether the type treatment tipped into clutter (>3 instruments, too many faces).ux-microcopy-audit(Tier A) — the words themselves (this skill sets how text looks, not what it says).
If accessibility flags readability or aesthetics flags clutter, return to the core: fewer faces, fewer instruments, a cleaner scale.
Common do/don't patterns
| ❌ Don't | ✅ Do |
|---|---|
| One safe font, no scale or hierarchy | A deliberate type scale with 2–3 distinct levels |
| 3+ typefaces / a display face for body | ≤3 faces; often one superfamily; display only in headings |
| Big + bold + colored + ALL-CAPS headline | ≤3 hierarchy instruments per level |
| Body text < 16px | Body ≥16px, scale built up from there |
| Full-width lines of text | 50–75 characters per line |
| Tight, cramped line spacing | ~150% line height; paragraph spacing ≥1.5× |
| Center-aligned body paragraphs | Left-align body (LTR); center only short elements |
| Papyrus/Comic Sans clichés; anachronistic faces | Appropriate, considered faces explored beyond the obvious |
| Ship without checking | Hand off to accessibility + aesthetics |
