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 |
Source lessons (Uxcel)
1---2name: ux-typography3description: Design or critique a product's typography — typeface selection and pairing, type scale, hierarchy, and readability settings (size, line length, line height, spacing, alignment). Trigger when choosing a typeface or font pairing, setting up a type scale, fixing typographic hierarchy, improving text readability, or reviewing a UI layout for typography issues.4license: MIT5---67# Typography Skill8910## How this skill behaves (read first)1112This 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:13141. **Establish brand personality, content types, and medium** — these drive the *expressive* choices worth making.152. **Apply the always-true core** — legibility, a clear scale/hierarchy, and restraint hold for any product.163. **Make the typeface/pairing/scale choices deliberately** — surface them as gated decisions tied to brand, not defaults.1718Then **hand off to the audits**: `accessibility` (size, contrast, spacing), `aesthetics` (hierarchy, balance).1920---2122## Step 0 — Establish context before choosing type2324- **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)?25- **Content types** — what kinds of text exist (display, headings, body, captions, labels)? This sizes the hierarchy.26- **Medium** — long-form reading vs. dense UI vs. marketing — changes the legibility/expressiveness balance.27- **Language direction** — LTR vs. RTL (drives default alignment).2829State assumptions if proceeding without answers.3031---3233## The always-apply core (true for any typography)3435**Readability & legibility (body text)**3637- **Body ≥ 16px.** Start the scale from body size (it occupies the most space), then size up/down.38- **Line length 50–75 characters.** Longer is hard to track; too short forces choppy eye movement.39- **Line height ~150%** of font size for body; larger sizes/widths need more.40- **Paragraph spacing ≥ 1.5× line spacing** (WCAG); separate ideas into digestible blocks.41- **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.42- Design for **scannability** — ~79% of users scan, ~3% read word-by-word; hierarchy + spacing make scanning work.4344**Hierarchy & restraint**4546- **Limit to ≤3 typefaces** — often one superfamily with good weight/style variety is enough.47- **Build a type scale** (size, weight, style) covering the content types; keep levels distinct.48- **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).49- **Emphasis is soft and singular** — italics (softest) or bold, not several at once; color in type sparingly.50- **Group with white space & proximity** — related text close, unrelated separated.5152---5354## The context-dependent decisions (surface, don't auto-apply)5556Present each with its trade-off and a recommendation tied to Step 0. **Stacking display faces, weights, and decoration is the failure mode.**5758| Decision | Apply when | Avoid / adapt when | Default recommendation |59|---|---|---|---|60| **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 |61| **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 |62| **Number of weights** | A few weights to build hierarchy | A weight for every whim | The minimum that makes the scale legible |63| **Type-scale ratio** | Dramatic ratio for marketing/editorial impact | Dramatic ratio in dense UI (wastes space) | Modest ratio for product UI; bolder for marketing |64| **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 |65| **Decorative touches** (drop caps, pull/block quotes) | Editorial/long-form layouts | Product UI, forms, dense screens | Editorial only |6667**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.6869---7071## Validate the result (orchestration)7273> 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.7475After 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.7677- **`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.78- **`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).79- **`ux-microcopy-audit`** *(Tier A)* — the words themselves (this skill sets how text *looks*, not what it *says*).8081If accessibility flags readability or aesthetics flags clutter, return to the core: fewer faces, fewer instruments, a cleaner scale.8283---8485## Common do/don't patterns8687| ❌ Don't | ✅ Do |88|---|---|89| One safe font, no scale or hierarchy | A deliberate type scale with 2–3 distinct levels |90| 3+ typefaces / a display face for body | ≤3 faces; often one superfamily; display only in headings |91| Big + bold + colored + ALL-CAPS headline | ≤3 hierarchy instruments per level |92| Body text < 16px | Body ≥16px, scale built up from there |93| Full-width lines of text | 50–75 characters per line |94| Tight, cramped line spacing | ~150% line height; paragraph spacing ≥1.5× |95| Center-aligned body paragraphs | Left-align body (LTR); center only short elements |96| Papyrus/Comic Sans clichés; anachronistic faces | Appropriate, considered faces explored beyond the obvious |97| Ship without checking | Hand off to accessibility + aesthetics |9899---100101## Source lessons (Uxcel)102103- [Selecting Typefaces](https://uxcel.com/lessons/selecting-typefaces-611)104- [Typographic Principles](https://uxcel.com/lessons/typographic-principles-438)105- [Paragraphs in Typography](https://uxcel.com/lessons/paragraphs-200)106- [Typographic Hierarchy](https://uxcel.com/lessons/typographic-hierarchy-107)
Uxcel-Lab