Font Pairing Guide

Curated font pairings and typography best practices.

---

Curated Pairings by Aesthetic

Dark & Premium

Fraunces + Outfit

<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet">

• Display: Fraunces (optical size serif, sophisticated)
• Body: Outfit (geometric sans, modern)
• Mood: Elegant, editorial, high-end

Playfair Display + Source Sans 3

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">

• Display: Playfair Display (classic serif)
• Body: Source Sans 3 (readable, professional)
• Mood: Luxurious, classic, timeless

---

Clean & Minimal

Satoshi + Satoshi

<!-- Variable font from Fontshare (alternative to Google) -->
<link href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap" rel="stylesheet">

• Single family: Satoshi (geometric, versatile)
• Use weight for hierarchy
• Mood: Clean, confident, modern

Plus Jakarta Sans + Plus Jakarta Sans

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

• Single family: Plus Jakarta Sans
• Slightly warmer than pure geometric
• Mood: Friendly, professional, approachable

Work Sans + Work Sans

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

• Single family: Work Sans
• Neutral, workhorse font
• Mood: Professional, clean, trustworthy

---

Bold & Neobrutalism

Space Grotesk + Space Mono

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

• Display: Space Grotesk (geometric, bold)
• Accent: Space Mono (technical feel)
• Mood: Technical, raw, confident

Syne + Inter

<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">

• Display: Syne (distinctive, modern)
• Body: Inter (readable fallback)
• Mood: Creative, bold, distinctive

Cabinet Grotesk + Cabinet Grotesk

<!-- From Fontshare -->
<link href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&display=swap" rel="stylesheet">

• Single family: Cabinet Grotesk
• Strong character, distinctive
• Mood: Bold, memorable, modern

---

Editorial & Magazine

Instrument Serif + Instrument Sans

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet">

• Display: Instrument Serif (elegant, readable)
• Body: Instrument Sans (matching sans)
• Mood: Editorial, refined, readable

Newsreader + Inter

<link href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&family=Inter:wght@400;500&display=swap" rel="stylesheet">

• Display: Newsreader (classic news serif)
• Body: Inter (reliable reading)
• Mood: Journalistic, trustworthy, classic

Libre Baskerville + Source Sans 3

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">

• Display: Libre Baskerville (traditional serif)
• Body: Source Sans 3 (clean reading)
• Mood: Traditional, literary, elegant

---

Y2K / Cyber

Orbitron + JetBrains Mono

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">

• Display: Orbitron (futuristic, geometric)
• Body/Code: JetBrains Mono (technical)
• Mood: Sci-fi, gaming, technical

Share Tech Mono + Rajdhani

<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;600;700&display=swap" rel="stylesheet">

• Display: Share Tech Mono (terminal style)
• Body: Rajdhani (geometric, futuristic)
• Mood: Hacker, cyberpunk, digital

---

Warm & Scandinavian

DM Serif Display + DM Sans

<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

• Display: DM Serif Display (warm serif)
• Body: DM Sans (matching sans)
• Mood: Warm, approachable, refined

Cormorant + Karla

<link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@400;600&family=Karla:wght@400;500;600&display=swap" rel="stylesheet">

• Display: Cormorant (elegant, refined)
• Body: Karla (friendly, readable)
• Mood: Lifestyle, wellness, organic

---

Creative & Playful

Bricolage Grotesque + Bricolage Grotesque

<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap" rel="stylesheet">

• Single family: Bricolage Grotesque
• Variable optical size for drama
• Mood: Expressive, creative, bold

Rubik + Rubik

<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">

• Single family: Rubik
• Slightly rounded, friendly
• Mood: Playful, approachable, modern

---

Font Classification

Serif Types

Type	Characteristics	Examples
Old Style	Diagonal stress, bracketed serifs	Garamond, Bembo
Transitional	More contrast, refined	Times, Georgia
Modern	High contrast, thin serifs	Bodoni, Didot
Slab	Thick, blocky serifs	Rockwell, Clarendon

Sans-Serif Types

Type	Characteristics	Examples
Grotesque	Early sans, quirky	Akzidenz, Franklin
Neo-grotesque	Clean, uniform	Helvetica, Arial
Geometric	Circle/square based	Futura, Century Gothic
Humanist	Calligraphic influence	Gill Sans, Frutiger

---

Performance Tips

Optimal Loading

<!-- Preconnect to Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Load only needed weights -->
<link href="https://fonts.googleapis.com/css2?family=Font:wght@400;700&display=swap" rel="stylesheet">

Font Display Options

Value	Behavior
swap	Show fallback immediately, swap when loaded
block	Hide text briefly, then show custom font
fallback	Short block, swap if loaded quickly
optional	Use custom font only if already cached

Recommended: Use display=swap for best UX.

Subset Loading

For specific languages:

<link href="https://fonts.googleapis.com/css2?family=Font&subset=latin&display=swap" rel="stylesheet">

---

Variable Fonts

Benefits

• Single file, multiple weights
• Smaller total file size
• Smooth weight transitions
• Optical size adjustments

Example Implementation

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap" rel="stylesheet">

/* Use any weight between 400-700 */
.headline {
  font-weight: 650;
}

/* Animate weight on hover */
.button {
  font-weight: 500;
  transition: font-weight 0.2s;
}
.button:hover {
  font-weight: 600;
}

---

Quick Selection Guide

Need	Recommendation
Safe, versatile	Plus Jakarta Sans
Bold, memorable	Space Grotesk or Syne
Elegant, editorial	Instrument Serif + Sans
Technical, dev	JetBrains Mono + Space Grotesk
Warm, friendly	DM Sans + DM Serif Display
Minimal, clean	Outfit or Satoshi
Luxury	Fraunces + Outfit
Brutalist	Cabinet Grotesk or Syne