Typography

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:

1. Establish brand personality, content types, and medium — these drive the expressive choices worth making.
2. Apply the always-true core — legibility, a clear scale/hierarchy, and restraint hold for any product.
3. 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

---

Source lessons (Uxcel)

• Selecting Typefaces
• Typographic Principles
• Paragraphs in Typography
• Typographic Hierarchy