Typography System
🔗 See Typography In Action
Universal Typography Laws
Typography is not about aesthetics - it's about cognitive load reduction and visual hierarchy enforcement. These size locks are derived from readability research and platform-specific screen reading behavior.
Universal Font Size Hierarchy
The 3-Tier Text System
TIER 1: Hook / Headline
Purpose: Stop scroll, grab attention, communicate primary value
Size Range: 48-72px
Max 8-12 words, high contrast required
TIER 2: Supporting Text / Benefits
Purpose: Explain, persuade, provide context
Size Range: 28-42px
Max 20-30 words, medium contrast acceptable
TIER 3: CTA / Micro Text / Handle
Purpose: Direct action, provide attribution, footer info
Size Range: 18-28px
Short phrases, high visibility placement required
Platform-Specific Font Size Locks
LinkedIn (Professional Reading)
HEADLINE
54-62px
Professional, authoritative
BODY TEXT
32-38px
Easy desktop reading
CTA / HANDLE
22-26px
Clear but not dominant
Facebook Ads (Scroll Interruption)
HOOK
56-68px
MUST stop scroll
BENEFIT TEXT
34-42px
Clear value prop
CTA BUTTON
24-28px
Action clarity
Instagram (Visual-First Platform)
HEADLINE
48-58px
Lighter, aspirational
SUPPORTING TEXT
28-36px
Secondary to visual
MICRO TEXT
18-24px
Minimal text philosophy
WhatsApp (Mobile-First, Private)
HOOK
52-68px
Stop-scroll essential
BENEFITS
30-36px
Mobile readability
CTA
38-44px
Larger for touch
Font Weight Hierarchy Rules
DO: Clear Weight Contrast
Headline: Bold (700-900)
Body: Regular or Medium (400-500)
CTA: Semibold or Bold (600-700)
Minimum difference: 200-300 weight units between tiers
DON'T: Similar Weights
Headline: Medium (500)
Too light, won't grab attention
Body: Semibold (600)
Too bold, competes with headline
Using 3+ different weights
Creates visual chaos
Line Height (Leading) Standards
| Text Type | Line Height | Reason |
|---|---|---|
| Headlines (1-2 lines) | 1.0 - 1.2x font size | Tight spacing = visual impact |
| Body Text (3+ lines) | 1.4 - 1.6x font size | Readable, reduces cognitive load |
| CTA Buttons | 1.2 - 1.3x font size | Compact but clickable |
| Micro Text / Handles | 1.3 - 1.5x font size | Compensate for small size |
Common Typography Mistakes That Kill Conversions
1. Text Too Small for Platform
Using 24px headlines on Facebook ads where 56px+ is required = invisible
2. No Weight Contrast
Headline and body both Medium (500) = no visual hierarchy = confusion
3. Tight Line Height on Body Text
1.1x line height on 3+ lines = cognitive overload = reader fatigue
4. Too Many Font Sizes
Using 5+ different sizes in one design = visual chaos = unprofessional
5. CTA Text Too Small
18px CTA on WhatsApp = unclickable on mobile = lost conversions
6. Desktop Sizes on Mobile Platforms
Using LinkedIn sizes on Instagram Stories = platform mismatch
Quick Reference Chart
| Platform | Headline | Body/Benefits | CTA/Micro |
|---|---|---|---|
| 54-62px Bold | 32-38px Regular | 22-26px Semibold | |
| Facebook Ads | 56-68px Bold | 34-42px Regular | 24-28px Bold |
| Facebook Retargeting | 60-72px Bold | 36-44px Medium | 26-30px Bold |
| Instagram Feed | 48-58px Bold | 28-36px Regular | 18-24px Semibold |
| Instagram Stories | 52-64px Bold | 30-38px Medium | 24-28px Bold |
| WhatsApp Broadcast | 52-68px Bold | 30-36px Regular | 38-44px Bold |