Ux 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Uxcel-Lab
• Source: Uxcel-Lab/product-skills
• License: MIT
• Homepage: https://uxcel.com

Install and usage instructions live in the source repository linked above.