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):

Contrast, not conflict - Pair fonts with distinct personalities but compatible x-heights
Same designer rule - Fonts from same designer/foundry often pair well (Baskerville + Franklin Gothic)
Historical compatibility - Fonts from same era share design DNA (Didot + Bodoni: both Didone)
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:

Critical CSS first - Inline @font-face for above-fold fonts
Preload primary - <link rel="preload" as="font" crossorigin>
font-display: swap - Show fallback immediately, swap when loaded
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:

Set base line-height (e.g., 1.5 × 16px = 24px)
All spacing (margin, padding) as multiples of 24px
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.