typography-expert

# Typography Expert

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):**
```css
/* 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**
```css
/* 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):**
```css
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

```css
@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:**
```css
/* 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:**
```css
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)

```css
: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.*