internetforkids/TYPOGRAPHY_RESEARCH.md

Typography Research: Premium CEO/Founder Blog Design

Research for internetforkids.org Redesign

REFERENCE SITES ANALYZED

1. Sam Altman's Blog (blog.samaltman.com)

Platform: Posthaven (custom blog hosting) Typography Profile:

• Body Text: Oxygen sans-serif, 16px, line-height 25.6px (1.6x)
• Headings: Crimson Text serif (elegant classical serif), 50px (h1), 26px (h2), font-weight 400
• Content Width: 500px (tight, focused reading)
• Color: Dark gray (rgb(85,85,85)) on white
• Margins: 80px bottom margin between articles
• Visual Style: Minimal sidebar nav, clean article focus, serif headings create premium feel
• Key Feature: Perfect contrast between serif headings and sans-serif body - typography-driven design

2. Dario Amodei's Site (darioamodei.com)

Platform: Webflow (custom-built) Typography Profile:

• Body Text: Newsreader 24 Pt (custom serif typeface), 20px, line-height 32px (1.6x)
• Headings: Same Newsreader font, 28.8px, font-weight 600
• Background: Warm off-white (rgb(240,238,230)) - cream/tan color
• Content Width: Max content appears ~800-900px
• Paragraph Spacing: 20px bottom margin
• Color: Very dark brown (rgb(31,30,29))
• Visual Style: Essay-focused, clean list navigation, warm palette, generous whitespace
• Key Feature: Unified serif typography throughout creates "literary" aesthetic

3. Medium CEO Blog Tag

Platform: Medium.com Typography Profile:

• Body Text: Times font, 16px
• Headings: Sohne sans-serif, 42px, font-weight 500, line-height 52px
• Text Color: Dark with alpha transparency rgba(0,0,0,0.8)
• Layout: Card-based article previews with images
• Visual Style: Clean grid, image-heavy curation
• Key Feature: Sans-serif headings with generous line-height (1.24x) allows larger size without feeling cramped

---

DESIGN PATTERNS SUMMARY

TYPOGRAPHY HIERARCHY

All premium CEO blogs use this pattern:

1. Serif headings (Crimson Text, Newsreader, Times) - conveys sophistication
2. Sans-serif body or consistent serif throughout - readability focus
3. Line-height 1.6x standard (25.6px-32px) - premium spacing
4. Generous margins - breathing room between articles/sections

CONTENT WIDTH STRATEGIES

• Sam Altman: 500px - ultra-focused reading (oldest, Posthaven)
• Dario Amodei: ~800-900px - comfortable essay width
• Medium: Full-width cards, article content centered

COLOR PALETTES

• Sam Altman: Pure white background + dark gray text (classic)
• Dario Amodei: Warm off-white/cream background (rgb(240,238,230)) + dark brown (more inviting)
• Medium: White + near-black (standard web)

---

HUGO THEMES ANALYSIS

BLOWFISH (Actively maintained, Tailwind CSS)

• Typography: Tailwind default (system-ui sans-serif)
• Body: 18px, line-height 28px
• Headings: 36px, line-height 40px
• Strengths: Modern, lightweight, responsive, good for tech blogs
• Weakness: Uses sans-serif throughout, less premium feel than CEO blogs

CURRENT: CONGO THEME

• Used by: internetforkids.org
• Assessment: Functional but dated, color-scheme focused rather than typography-focused
• Issue: No special serif/sans-serif contrast, standard blog styling

---

KEY TYPOGRAPHY RECOMMENDATIONS FOR INTERNETFORKIDS.ORG

OPTION A: "Premium CEO Blog" (Dario Amodei style)

Best for: Creating premium, literary feel

• Headings: Serif font (Crimson Text, Merriweather, or Georgia)
  • H1: 28-36px, weight 600-700
  • H2: 24px, weight 600
• Body: Serif OR high-quality sans-serif
  • Font size: 18-20px
  • Line-height: 1.6-1.7 (28-34px actual)
  • Max width: 700-850px
• Background: Warm off-white/cream (rgb(240,238,230) or similar)
• Text Color: Dark brown (rgb(31-40, 30-35, 29-25))

OPTION B: "Classic Contrast" (Sam Altman style)

Best for: Clean, modern aesthetic with traditional feel

• Headings: Serif (Crimson Text)
  • H1: 48-56px, weight 400
• Body: Clean sans-serif (Oxygen, Inter, system-ui)
  • Font size: 16-18px
  • Line-height: 1.6
• Content Width: 500-600px (narrow, focused)
• Background: Pure white
• Color: Dark gray to black

OPTION C: "Modern Blowfish Evolution" (Current + Typography)

Best for: Staying with Hugo, but improving typography

• Modify Congo theme or switch to Blowfish
• Add serif Google Fonts headings
• Increase body font size to 18px minimum
• Increase line-height to 1.7
• Add generous margin/padding
• Warm color palette option

---

RECOMMENDED FONTS (Web Safe + Google Fonts)

SERIF (Headings)

• Crimson Text - Classic, elegant (Sam Altman choice)
• Merriweather - Friendly, readable serif
• Newsreader - Modern editorial serif (Dario Amodei choice, custom)
• Georgia - Web-safe fallback, built-in
• EB Garamond - High elegance, small caps

SANS-SERIF (Body)

• Inter - Modern, super readable (used by Blowfish)
• Oxygen - Friendly, humanist (Sam Altman choice)
• System-ui - OS default fonts (fastest, no load)
• Newsreader - Can use throughout (literary approach)
• Lora - Optimized for screen reading

---

SPECIFIC CSS VALUES TO IMPLEMENT

/* DARIO AMODEI INSPIRED */
body {
  font-family: Georgia, 'Newsreader', serif; /* or serif-only */
  font-size: 20px;
  line-height: 1.6; /* = 32px */
  color: #1f1e1d;
  background: #f0ede6; /* warm cream */
}

h1, h2, h3 { font-family: Georgia, serif; }
h1 { font-size: 32-36px; font-weight: 600; }
h2 { font-size: 24px; font-weight: 600; }

article {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* SAM ALTMAN INSPIRED */
body {
  font-family: 'Oxygen', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

h1, h2, h3 {
  font-family: 'Crimson Text', Georgia, serif;
  font-weight: 400;
}

article {
  max-width: 500px;
  margin: 0 auto;
}

article + article {
  margin-top: 80px;
}

---

VISUAL DISTINCTIONS

Aspect	Sam Altman	Dario Amodei	Medium
Serif/Sans	Serif headings + Sans body	All serif	Sans headings + serif body
Line Height	1.6	1.6	1.24 (headings), 1.6 (body)
Width	500px (tight)	800px+ (comfortable)	Full-width
Background	Pure white	Warm cream	White
Text Color	Medium gray	Dark brown	Near-black
Overall Feel	Classic minimal	Literary, warm	Modern, democratic

---

NEXT STEPS FOR INTERNETFORKIDS.ORG

1. Choose style direction: Premium literary (Dario) vs. classic minimal (Sam)
2. Select font family: Crimson Text (serif headings) or Newsreader (serif throughout)
3. Adjust spacing: Increase line-height from current ~1.5 to 1.6-1.7
4. Set content width: 700-850px for readability (current Congo theme likely wider)
5. Add whitespace: Increase margins/padding between sections
6. Consider background: Keep white or add warm cream tone
7. Test on live content: Ensure changes work with existing posts
8. Consider theme swap: Blowfish (modern) or custom modifications to Congo