# Typography Quick Reference Guide
## For internetforkids.org Redesign

### THE THREE APPROACHES

#### Approach 1: Sam Altman (Classic Contrast)
```
BEFORE:                           AFTER:
[Heading in default font]    -->  [HEADING in Crimson Text]
Body text in same font      -->  Body text in Oxygen sans-serif
16px, 1.5 line height       -->  16px, 1.6 line height
Wide width (800px+)         -->  500px max width (focused)
```
**Best for:** Pure, elegant simplicity | Strong serif/sans contrast

---

#### Approach 2: Dario Amodei (Literary Warmth)
```
BEFORE:                           AFTER:
[Heading]                   -->  [Heading in Newsreader serif]
Body text                   -->  Body text in Newsreader serif (same)
16px, 1.5 line height       -->  20px, 1.6 line height
White background            -->  Warm cream (#f0ede6)
Dark gray text              -->  Dark brown (#1f1e1d)
```
**Best for:** Literary, sophisticated feel | Unified serif throughout

---

#### Approach 3: Blowfish Evolution (Modern)
```
BEFORE:                           AFTER:
[Congo default]             -->  [Blowfish with serif headings]
Sans-serif body             -->  San-serif body (improved)
16px                        -->  18px
1.5 line height             -->  1.7 line height
Current spacing             -->  Generous whitespace/padding
```
**Best for:** Modern tech aesthetic | Easier migration path

---

### IMMEDIATE VISUAL CHANGES

**Typography improvement boils down to 3 things:**

1. **Font Selection**
   - Headings: Switch from default to serif (Crimson Text, Merriweather, or Georgia)
   - Effect: Instant premium feel, 80% of the improvement

2. **Spacing** (line-height + margins)
   - Increase body line-height from 1.5 to 1.6-1.7
   - Increase margins between sections
   - Effect: More breathing room, easier to read

3. **Color & Width**
   - Option: Keep pure white OR add warm cream background
   - Reduce max-width to 700-850px (narrower = more readable)
   - Effect: Better focus, more intimate feel

---

### MEASUREMENTS COMPARISON

```
METRIC                  Sam Altman    Dario Amodei    Congo (Current)
Body Font Size          16px          20px            14-16px
Body Line Height        1.6 (25.6px)  1.6 (32px)      ~1.5
Heading Font Size (H1)  50px          36px            Varies
Heading Weight          400           600             Varies
Content Width           500px         800px+          800px+
Paragraph Margin        24px          20px            ~15-20px
Background              #fff          #f0ede6         Avocado scheme
Text Color              #555          #1f1e1d         Varies
```

---

### FONT STACK EXAMPLES

**Option A (Sam Altman style):**
```css
/* Headings */
font-family: 'Crimson Text', Georgia, serif;

/* Body */
font-family: 'Oxygen', -apple-system, BlinkMacSystemFont, sans-serif;
```

**Option B (Dario Amodei style):**
```css
/* All text */
font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
```

**Option C (Blowfish compatible):**
```css
/* Headings */
font-family: 'Merriweather', Georgia, serif;

/* Body */
font-family: 'Inter', system-ui, -apple-system, sans-serif;
```

---

### ONE-SENTENCE SUMMARY

Sam Altman = **Classic elegance** (serif + sans contrast)
Dario Amodei = **Warm literacy** (unified serif, cream background)
Blowfish = **Modern readability** (clean sans + serif accents)