42d5c51473
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 18s
Deploy Internet for Kids / Deploy (push) Successful in 5s
Deploy Internet for Kids / Health Check (push) Successful in 2s
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 2s
- Nav shows About + Topics links again - Language switcher is a proper dropdown (current lang + translations) - Article sidebar with sticky TOC + recent articles list - Wider content area (64rem) with 240px sidebar - Responsive: sidebar hidden on mobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
114 lines
3.3 KiB
Markdown
114 lines
3.3 KiB
Markdown
# 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)
|
|
|