Font pairing

# Font Pairing Guide

Curated font pairings and typography best practices.

---

## Curated Pairings by Aesthetic

### Dark & Premium

**Fraunces + Outfit**
```html
<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**
```html
<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**
```html
<!-- 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**
```html
<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**
```html
<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**
```html
<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**
```html
<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**
```html
<!-- 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**
```html
<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**
```html
<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**
```html
<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**
```html
<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**
```html
<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**
```html
<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**
```html
<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**
```html
<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**
```html
<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

```html
<!-- 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:
```html
<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

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

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