typography

name	typography
description	Master typographer specializing in font pairing, typographic hierarchy, OpenType features, variable fonts, and performance-optimized web typography. Use for font selection, type scales, web font optimization, and typographic systems. Activate on "typography", "font pairing", "type scale", "variable fonts", "web fonts", "OpenType", "font loading". NOT for logo design, icon fonts, general CSS styling, or image-based typography.
allowed-tools	Read,Write,Edit,WebFetch
metadata	{"category":"Design & Creative","pairs-with":[{"skill":"design-system-creator","reason":"Typography in design systems"},{"skill":"web-design-expert","reason":"Typography for web projects"}],"tags":["typography","fonts","type-scale","variable-fonts","opentype"]}

Typography

Master typographer specializing in font pairing, typographic hierarchy, OpenType features, variable fonts, and performance-optimized web typography.

When to Use This Skill

✅ Use for:

• Font pairing recommendations for brand identity
• Typographic hierarchy for design systems
• Performance-optimized web font implementation
• Variable font integration with CSS custom properties
• Type scale calculations (modular, fluid, responsive)
• Font loading strategies (FOUT/FOIT/FOFT prevention)
• OpenType feature implementation (ligatures, small caps, numerals)
• Accessibility compliance for typography (WCAG contrast, sizing)
• Dark mode typography compensation
• Multilingual typography support (RTL, CJK, diacritics)

❌ Do NOT use for:

• Logo design or wordmark creation → use design-system-creator
• Icon font implementation → use web-design-expert
• General CSS styling unrelated to type → not a typography issue
• Image-based or rasterized typography → different domain
• Brand strategy or naming → this is visual implementation only
• Motion graphics with text → use native-app-designer

Core Expertise

Font Selection Psychology

Serif vs Sans-Serif Decision Tree:

IF formal/traditional/authoritative needed → Serif (Garamond, Minion, Crimson)
IF modern/clean/technical needed → Sans-Serif (Inter, Helvetica, Roboto)
IF humanist/friendly/approachable → Humanist Sans (Gill Sans, Fira Sans, Source Sans)
IF geometric/structured/tech-forward → Geometric Sans (Futura, Avenir, Poppins)
IF editorial/long-form reading → Transitional Serif (Georgia, Charter, Lora)

Pairing Rules (Expert Knowledge):

1. Contrast, not conflict - Pair fonts with distinct personalities but compatible x-heights
2. Same designer rule - Fonts from same designer/foundry often pair well (Baskerville + Franklin Gothic)
3. Historical compatibility - Fonts from same era share design DNA (Didot + Bodoni: both Didone)
4. Superfamily shortcut - Use superfamily (Alegreya + Alegreya Sans) for guaranteed harmony

Type Scale Systems

Modular Scale Ratios:

Ratio	Name	Use Case
1.067	Minor Second	Dense UIs, small screens
1.125	Major Second	General web content
1.200	Minor Third	Most common, balanced hierarchy
1.250	Major Third	Marketing, headlines
1.333	Perfect Fourth	Bold statements, hero sections
1.414	Augmented Fourth	Editorial, dramatic hierarchy
1.618	Golden Ratio	Classical, use sparingly (too large for most UI)

Fluid Typography Formula (2024 Best Practice):

/* Base: 16px at 320px viewport, 20px at 1200px viewport */
font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);

/* Heading: 32px at 320px, 64px at 1200px */
font-size: clamp(2rem, 1rem + 3.6vw, 4rem);

Variable Fonts

Axis Control (Expert Knowledge):

Axis	Tag	Range	Use Case
Weight	wght	100-900	Adjust weight without loading multiple files
Width	wdth	75-125	Responsive text that adapts to container
Slant	slnt	-12-0	Oblique without separate italic file
Optical Size	opsz	8-144	Auto-adjust stroke contrast for size
Grade	GRAD	-200-150	Adjust weight without reflowing (dark mode)

Critical: Dark Mode Compensation

/* Text appears lighter on dark backgrounds - compensate with grade or weight */
@media (prefers-color-scheme: dark) {
  body {
    /* If variable font supports grade: */
    font-variation-settings: "GRAD" 50;
    /* Or bump weight slightly: */
    font-weight: 450; /* Instead of 400 */
  }
}

Performance Optimization

Font Loading Priority:

1. Critical CSS first - Inline @font-face for above-fold fonts
2. Preload primary - <link rel="preload" as="font" crossorigin>
3. font-display: swap - Show fallback immediately, swap when loaded
4. Subset aggressively - Latin Extended covers most Western languages at ~30KB vs ~150KB full

Budget Guidelines:

Performance Tier	Total Font Budget	Files
Fast (Core Web Vitals)	Under 100KB	2-3 WOFF2
Balanced	100-200KB	4-5 WOFF2
Rich Typography	200-400KB	6-8 WOFF2

System Font Stack (Zero Budget):

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
             "Segoe UI Emoji";

Common Anti-Patterns

Anti-Pattern: Too Many Typefaces

What it looks like: 4+ different font families on one page Why it's wrong: Creates visual chaos, destroys hierarchy, massive performance hit What to do instead: Maximum 2 families (heading + body), use weight/style variations

Anti-Pattern: Ignoring x-Height Matching

What it looks like: Body text and fallback system font have visibly different sizes at same px Why it's wrong: CLS (Cumulative Layout Shift) when web font loads What to do instead: Use size-adjust in @font-face to match fallback x-height

@font-face {
  font-family: "Inter";
  src: url("inter.woff2") format("woff2");
  size-adjust: 107%; /* Matches Arial x-height */
}

Anti-Pattern: Weight Jumps Too Large

What it looks like: Using 400 for body and 700 for headings (300-point jump) Why it's wrong: Creates harsh hierarchy, especially at large sizes What to do instead: Use closer weights: 400/600 or 350/500 for subtle hierarchy

Anti-Pattern: Line Height as Unitless Number Everywhere

What it looks like: line-height: 1.5 applied globally Why it's wrong: Headings need tighter line-height (1.1-1.2), body needs looser (1.5-1.7) What to do instead: Set line-height per type level

Anti-Pattern: Fixed Font Sizes

What it looks like: font-size: 16px hardcoded Why it's wrong: Breaks user preferences, accessibility issues, no responsive scaling What to do instead: Use rem units with clamp() for fluid sizing

Anti-Pattern: Loading Full Character Sets

What it looks like: Loading 800KB font file with Cyrillic, Greek, Vietnamese Why it's wrong: 90%+ of file unused for English-only sites What to do instead: Subset to Latin or Latin Extended (~30KB)

OpenType Features

Features Worth Enabling:

/* Proper numerals for tabular data */
font-feature-settings: "tnum" 1; /* Tabular numerals */

/* Proper fractions */
font-feature-settings: "frac" 1; /* 1/2 → ½ */

/* Small caps for abbreviations */
font-feature-settings: "smcp" 1, "c2sc" 1;

/* Stylistic alternates for brand */
font-feature-settings: "ss01" 1; /* Check font for available sets */

Modern CSS Alternative:

font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-caps: small-caps;

Vertical Rhythm & Baseline Grid

Expert Approach:

1. Set base line-height (e.g., 1.5 × 16px = 24px)
2. All spacing (margin, padding) as multiples of 24px
3. Headings snap to baseline (line-height: 48px for h1 at 36px)

:root {
  --baseline: 1.5rem; /* 24px */
}

h1 {
  font-size: 2.25rem;
  line-height: calc(var(--baseline) * 2); /* 48px */
  margin-bottom: var(--baseline);
}

p {
  line-height: var(--baseline);
  margin-bottom: var(--baseline);
}

Responsive Typography Breakpoints

Decision Tree:

Mobile (< 640px):
  - Base: 16px
  - Scale: 1.125 (Major Second)
  - Tighter hierarchy

Tablet (640-1024px):
  - Base: 17px
  - Scale: 1.2 (Minor Third)
  - Standard hierarchy

Desktop (> 1024px):
  - Base: 18-20px
  - Scale: 1.25 (Major Third)
  - Expanded hierarchy

Large Display (> 1440px):
  - Consider max-width on prose (65-75ch)
  - Don't keep scaling indefinitely

Accessibility Requirements

WCAG 2.1 AA Compliance:

• Minimum contrast: 4.5:1 for body text, 3:1 for large text (24px+ or 18.5px+ bold)
• Resizing: Text must be resizable to 200% without loss of content
• Line spacing: At least 1.5× font size
• Paragraph spacing: At least 2× font size
• Letter spacing: User must be able to override to 0.12× font size
• Word spacing: User must be able to override to 0.16× font size

Integration with Other Skills

Works well with:

• design-system-creator - Typography tokens for design systems
• vibe-matcher - Font selection based on brand vibe
• web-design-expert - Implement typography in layouts
• vaporwave-glassomorphic-ui-designer - Retro-futuristic type treatments

Evolution Timeline

Pre-2015: Web-Safe Fonts Era

Limited to Arial, Georgia, Times New Roman. "Modern" meant using Helvetica.

2015-2019: Google Fonts Explosion

Everyone used Open Sans, Roboto, Montserrat. Performance secondary to variety.

2020-2022: Variable Fonts Adoption

Single file, multiple weights/widths. Inter became the new default.

2023-Present: Performance-First Typography

Core Web Vitals pressure. Subsetting, font-display, CLS prevention mandatory. System font stacks gaining popularity for zero-load-time.

Watch For

LLMs may suggest deprecated approaches:

• @import for fonts (blocks rendering)
• Non-variable font families with 8+ weights
• Font Awesome for icons (use SVG sprites instead)

Quick Reference

Ideal Line Length: 45-75 characters (65ch is sweet spot)

Heading Sizes (Minor Third Scale):

• h1: 2.986rem
• h2: 2.488rem
• h3: 2.074rem
• h4: 1.728rem
• h5: 1.44rem
• h6: 1.2rem
• body: 1rem

Safe Google Font Pairings:

• Inter + Merriweather (Modern + Traditional)
• Poppins + Lora (Friendly + Elegant)
• Space Grotesk + Source Serif (Tech + Editorial)
• DM Sans + DM Serif Display (Same designer harmony)

---

Typography is invisible when it works, but unforgettable when it doesn't. Search tabs, bookmarks, or type a URL...