1  # Typography & Spacing Quick Reference
  2  
  3  **Print this mentally before every design task.**
  4  
  5  ---
  6  
  7  ## Font Sizes (Never Deviate)
  8  
  9  ### Web/Mobile
 10  - Display: 48-72px
 11  - H1: 36-48px
 12  - H2: 28-36px
 13  - H3: 20-24px
 14  - Body: **16-18px** (minimum 16px)
 15  - Small: 14-16px
 16  
 17  ### Slides
 18  - Title: 80-120px
 19  - Section: 56-72px
 20  - Heading: 36-48px
 21  - Body: **24-32px** (minimum 24px)
 22  - Caption: 18-20px
 23  
 24  ---
 25  
 26  ## Line Heights (Match to Size)
 27  
 28  - 48px+: **1.1-1.2**
 29  - 24-48px: **1.2-1.3**
 30  - 16-20px: **1.5-1.6** (never less than 1.5)
 31  - 14px: **1.6-1.7**
 32  - CJK: Add +0.1
 33  
 34  ---
 35  
 36  ## Spacing Scale (Only Use These)
 37  
 38  **4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128**
 39  
 40  ### Common Patterns
 41  
 42  **Text blocks:**
 43  - Heading → Body: **12-16px**
 44  - Paragraph → Paragraph: **16-24px**
 45  - Section → Section: **48-64px**
 46  
 47  **Images:**
 48  - Text → Image: **24-32px** ⬆️
 49  - Image → Caption: **12-16px** ⬇️
 50  - Caption → Next: **32-48px** ⬇️
 51  
 52  **Containers:**
 53  - Card padding: **24-32px**
 54  - Section padding: **48-64px** (V) × **24-48px** (H)
 55  - Button padding: **12px** (V) × **24px** (H)
 56  
 57  **Components:**
 58  - Form fields: **16-24px** gap
 59  - List items: **12-16px** gap
 60  - Grid items: **24-32px** gap
 61  
 62  ---
 63  
 64  ## Font Weights (2-3 Maximum)
 65  
 66  - **400**: Body text
 67  - **600**: Subheadings, buttons
 68  - **700**: Main headings
 69  
 70  Never: 100, 300, 900 (unless brand-specific)
 71  
 72  ---
 73  
 74  ## Critical Rules
 75  
 76  1. ✅ All vertical spacing = multiples of 8px
 77  2. ✅ Body text ≥ 16px (web) or ≥ 24px (slides)
 78  3. ✅ Body line-height ≥ 1.5
 79  4. ✅ Image top margin ≥ 24px
 80  5. ✅ Section breaks ≥ 48px
 81  6. ✅ Max 2-3 font weights
 82  7. ✅ Line length ≤ 65ch for body text
 83  
 84  ---
 85  
 86  ## Pre-Screenshot Checklist
 87  
 88  Before taking the final screenshot, verify:
 89  
 90  - [ ] Body text size correct
 91  - [ ] Line heights correct
 92  - [ ] Heading → body gaps: 12-16px
 93  - [ ] Paragraph gaps: 16-24px
 94  - [ ] Image spacing: 24-32px top, 12-16px bottom
 95  - [ ] Section breaks: 48-64px
 96  - [ ] All spacing from scale
 97  - [ ] All spacing multiples of 8px
 98  - [ ] Only 2-3 font weights used
 99  
100  **If any fails, fix before delivery.**
101  
102  ---
103  
104  ## CSS Variables Template
105  
106  ```css
107  :root {
108    /* Sizes */
109    --text-display: 64px;
110    --text-h1: 48px;
111    --text-h2: 32px;
112    --text-h3: 24px;
113    --text-body: 18px;
114    --text-small: 14px;
115    
116    /* Line heights */
117    --lh-tight: 1.2;
118    --lh-normal: 1.5;
119    --lh-relaxed: 1.6;
120    
121    /* Spacing */
122    --space-xs: 4px;
123    --space-sm: 8px;
124    --space-md: 12px;
125    --space-base: 16px;
126    --space-lg: 24px;
127    --space-xl: 32px;
128    --space-2xl: 48px;
129    --space-3xl: 64px;
130    --space-4xl: 96px;
131    
132    /* Weights */
133    --weight-normal: 400;
134    --weight-semibold: 600;
135    --weight-bold: 700;
136  }
137  ```
138  
139  Copy this into every HTML file.
140  
141  ---
142  
143  ## Debug Grid (Development Only)
144  
145  ```css
146  body.debug-grid {
147    background-image: 
148      repeating-linear-gradient(
149        to bottom,
150        transparent 0,
151        transparent 7px,
152        rgba(255, 0, 0, 0.1) 7px,
153        rgba(255, 0, 0, 0.1) 8px
154      );
155  }
156  ```
157  
158  Add `class="debug-grid"` to verify 8px rhythm. Remove before delivery.