Chooses and pairs typefaces and builds a modular type scale – ratio, named roles, line heights, measure limits, and responsive values – as a complete design-system type layer.
Chooses and pairs typefaces and builds a modular type scale - ratio, named roles, line heights, measure limits, and responsive values - as a complete design-system type layer. Use when someone asks "what fonts should we use", "build our type scale", "why does our typography feel inconsistent", or is establishing the typographic voice for a brand or product. Do NOT use for animated or motion typography - use kinetic-typography instead; for page-level emphasis, spacing, and layout decisions, use visual-hierarchy; for assembling the full brand book, use brand-guidelines.This is the skill's description: the text your AI reads to decide when the skill applies.
typography-system/SKILL.md
---
name: Typography System
description: Chooses and pairs typefaces and builds a modular type scale - ratio, named roles, line heights, measure limits, and responsive values - as a complete design-system type layer. Use when someone asks "what fonts should we use", "build our type scale", "why does our typography feel inconsistent", or is establishing the typographic voice for a brand or product. Do NOT use for animated or motion typography - use kinetic-typography instead; for page-level emphasis, spacing, and layout decisions, use visual-hierarchy; for assembling the full brand book, use brand-guidelines.
---
# Typography System
Typography carries more of a brand's personality than any other design element because it is always present - and a good type system is invisible when it works, painful when it doesn't. The costly mistake is picking fonts before defining roles: teams end up with three typefaces, forty ad-hoc sizes, and no way to tell a heading from a label. Roles and a scale come first; fonts fill them.
## Operating procedure
Follow the order: roles constrain the font choice, the ratio constrains the scale, and line height and measure are set per style - reversing any of these produces a system that must be rebuilt.
### Step 1: Gather inputs
- Brand adjectives (3-5) and the product type: UI-heavy tool, editorial/content site, or display-heavy marketing. The product type picks the scale ratio later.
- Target languages and scripts - glyph coverage eliminates typefaces early.
- Platforms: web, native app, print. Each changes licensing and delivery constraints.
- Font budget and any existing fonts under license. Label assumptions as assumptions.
### Step 2: Define roles before choosing fonts
Roles: Display (hero headlines, campaign type), Heading (page titles, section headers), Body (long-form reading), UI (labels, captions, buttons), Mono (code, data). A brand needs two typefaces at most - one covering Display/Heading, one covering Body/UI. A third is a tax on every future designer. Strong pairings: one serif plus one sans-serif, or a distinctive display face with a neutral workhorse.
### Step 3: Evaluate candidates on functional criteria… load the full skill through Skill MeClick to play with sound.