Typography

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:

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

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:

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...