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 indefinitelyAccessibility 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:
@importfor 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.*