internetforkids/TYPOGRAPHY_QUICK_REFERENCE.md

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

/* Headings */
font-family: 'Crimson Text', Georgia, serif;

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

Option B (Dario Amodei style):

/* All text */
font-family: 'Newsreader', Georgia, 'Times New Roman', serif;

Option C (Blowfish compatible):

/* 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)