1  # Typography & Spacing: Implementation Examples
  2  
  3  > **Load when:** Building any design where text and spacing quality matters
  4  > **Purpose:** Provide copy-paste CSS patterns that implement correct typography and spacing
  5  > **Prevents:** Inconsistent font sizes, broken vertical rhythm, awkward image spacing
  6  
  7  ---
  8  
  9  ## CSS Variables Setup
 10  
 11  Start every design with these variables:
 12  
 13  ```css
 14  :root {
 15    /* Font sizes - Web */
 16    --text-display: 64px;
 17    --text-h1: 48px;
 18    --text-h2: 32px;
 19    --text-h3: 24px;
 20    --text-body-lg: 20px;
 21    --text-body: 18px;
 22    --text-small: 14px;
 23    
 24    /* Font sizes - Slides */
 25    --slide-title: 96px;
 26    --slide-section: 64px;
 27    --slide-heading: 48px;
 28    --slide-body: 28px;
 29    --slide-caption: 20px;
 30    
 31    /* Line heights */
 32    --lh-tight: 1.2;
 33    --lh-normal: 1.5;
 34    --lh-relaxed: 1.6;
 35    
 36    /* Spacing scale */
 37    --space-xs: 4px;
 38    --space-sm: 8px;
 39    --space-md: 12px;
 40    --space-base: 16px;
 41    --space-lg: 24px;
 42    --space-xl: 32px;
 43    --space-2xl: 48px;
 44    --space-3xl: 64px;
 45    --space-4xl: 96px;
 46    --space-5xl: 128px;
 47    
 48    /* Font weights */
 49    --weight-normal: 400;
 50    --weight-medium: 500;
 51    --weight-semibold: 600;
 52    --weight-bold: 700;
 53  }
 54  ```
 55  
 56  ---
 57  
 58  ## Typography Patterns
 59  
 60  ### Pattern 1: Article/Blog Post
 61  
 62  ```css
 63  article {
 64    max-width: 65ch; /* Optimal line length */
 65    font-size: var(--text-body);
 66    line-height: var(--lh-normal);
 67    color: #1a1a1a;
 68  }
 69  
 70  article h1 {
 71    font-size: var(--text-h1);
 72    font-weight: var(--weight-bold);
 73    line-height: var(--lh-tight);
 74    margin-bottom: var(--space-base); /* 16px */
 75  }
 76  
 77  article h2 {
 78    font-size: var(--text-h2);
 79    font-weight: var(--weight-semibold);
 80    line-height: var(--lh-tight);
 81    margin-top: var(--space-3xl); /* 64px - section break */
 82    margin-bottom: var(--space-md); /* 12px */
 83  }
 84  
 85  article h3 {
 86    font-size: var(--text-h3);
 87    font-weight: var(--weight-semibold);
 88    line-height: 1.3;
 89    margin-top: var(--space-2xl); /* 48px */
 90    margin-bottom: var(--space-md); /* 12px */
 91  }
 92  
 93  article p {
 94    margin-bottom: var(--space-lg); /* 24px between paragraphs */
 95  }
 96  
 97  article p + p {
 98    margin-top: var(--space-base); /* 16px for consecutive paragraphs */
 99  }
100  ```
101  
102  ### Pattern 2: Landing Page Hero
103  
104  ```css
105  .hero {
106    padding: var(--space-4xl) var(--space-2xl); /* 96px vertical, 48px horizontal */
107    text-align: center;
108  }
109  
110  .hero h1 {
111    font-size: var(--text-display);
112    font-weight: var(--weight-bold);
113    line-height: 1.1;
114    margin-bottom: var(--space-lg); /* 24px */
115    letter-spacing: -0.02em; /* Tighter for large text */
116  }
117  
118  .hero p {
119    font-size: var(--text-body-lg);
120    line-height: var(--lh-normal);
121    color: #4a4a4a;
122    margin-bottom: var(--space-2xl); /* 48px before CTA */
123    max-width: 60ch;
124    margin-left: auto;
125    margin-right: auto;
126  }
127  
128  .hero button {
129    font-size: var(--text-body);
130    font-weight: var(--weight-semibold);
131    padding: var(--space-md) var(--space-lg); /* 12px × 24px */
132  }
133  ```
134  
135  ### Pattern 3: Slide Deck
136  
137  ```css
138  .slide {
139    width: 1920px;
140    height: 1080px;
141    padding: var(--space-4xl); /* 96px all sides */
142    display: flex;
143    flex-direction: column;
144    justify-content: center;
145  }
146  
147  .slide h1 {
148    font-size: var(--slide-heading);
149    font-weight: var(--weight-bold);
150    line-height: var(--lh-tight);
151    margin-bottom: var(--space-2xl); /* 48px */
152  }
153  
154  .slide p {
155    font-size: var(--slide-body);
156    line-height: var(--lh-normal);
157    margin-bottom: var(--space-xl); /* 32px */
158  }
159  
160  .slide ul {
161    font-size: var(--slide-body);
162    line-height: var(--lh-relaxed);
163  }
164  
165  .slide li + li {
166    margin-top: var(--space-lg); /* 24px between list items */
167  }
168  ```
169  
170  ---
171  
172  ## Image Spacing Patterns
173  
174  ### Pattern 1: Image in Article
175  
176  ```css
177  article img {
178    width: 100%;
179    height: auto;
180    margin-top: var(--space-xl); /* 32px after text */
181    margin-bottom: var(--space-base); /* 16px before caption */
182    border-radius: 8px;
183  }
184  
185  article figcaption {
186    font-size: var(--text-small);
187    color: #666;
188    text-align: center;
189    margin-bottom: var(--space-2xl); /* 48px before next element */
190  }
191  ```
192  
193  ### Pattern 2: Hero Image
194  
195  ```css
196  .hero-image {
197    width: 100%;
198    max-width: 1200px;
199    margin: var(--space-3xl) auto; /* 64px top and bottom */
200    border-radius: 12px;
201    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
202  }
203  ```
204  
205  ### Pattern 3: Image Grid
206  
207  ```css
208  .image-grid {
209    display: grid;
210    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
211    gap: var(--space-xl); /* 32px between images */
212    margin-top: var(--space-2xl); /* 48px after heading */
213    margin-bottom: var(--space-3xl); /* 64px before next section */
214  }
215  ```
216  
217  ---
218  
219  ## Common Spacing Scenarios
220  
221  ### Scenario 1: Card Component
222  
223  ```css
224  .card {
225    padding: var(--space-xl); /* 32px inside */
226    border-radius: 12px;
227    background: white;
228    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
229  }
230  
231  .card h3 {
232    font-size: var(--text-h3);
233    font-weight: var(--weight-semibold);
234    margin-bottom: var(--space-md); /* 12px */
235  }
236  
237  .card p {
238    font-size: var(--text-body);
239    line-height: var(--lh-normal);
240    color: #4a4a4a;
241    margin-bottom: var(--space-lg); /* 24px */
242  }
243  
244  .card button {
245    margin-top: var(--space-base); /* 16px */
246  }
247  
248  /* Cards in a grid */
249  .card-grid {
250    display: grid;
251    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
252    gap: var(--space-xl); /* 32px between cards */
253  }
254  ```
255  
256  ### Scenario 2: Form Layout
257  
258  ```css
259  .form-group {
260    margin-bottom: var(--space-lg); /* 24px between fields */
261  }
262  
263  .form-group label {
264    display: block;
265    font-size: var(--text-body);
266    font-weight: var(--weight-medium);
267    margin-bottom: var(--space-sm); /* 8px */
268  }
269  
270  .form-group input,
271  .form-group textarea {
272    width: 100%;
273    font-size: var(--text-body);
274    padding: var(--space-md) var(--space-base); /* 12px × 16px */
275    border: 1px solid #ddd;
276    border-radius: 6px;
277  }
278  
279  .form-actions {
280    margin-top: var(--space-2xl); /* 48px before submit button */
281    display: flex;
282    gap: var(--space-base); /* 16px between buttons */
283  }
284  ```
285  
286  ### Scenario 3: Section Breaks
287  
288  ```css
289  section {
290    padding: var(--space-3xl) var(--space-lg); /* 64px vertical, 24px horizontal */
291  }
292  
293  section + section {
294    margin-top: var(--space-3xl); /* 64px between sections */
295  }
296  
297  section h2 {
298    font-size: var(--text-h2);
299    margin-bottom: var(--space-2xl); /* 48px after section heading */
300  }
301  ```
302  
303  ---
304  
305  ## Vertical Rhythm Verification
306  
307  Use this CSS to visualize your 8px baseline grid during development:
308  
309  ```css
310  /* DEBUG ONLY - Remove before delivery */
311  body.debug-grid {
312    background-image: 
313      repeating-linear-gradient(
314        to bottom,
315        transparent 0,
316        transparent 7px,
317        rgba(255, 0, 0, 0.1) 7px,
318        rgba(255, 0, 0, 0.1) 8px
319      );
320  }
321  ```
322  
323  Add `class="debug-grid"` to body, then verify:
324  - All text baselines align to red lines
325  - All margins/paddings are multiples of 8px
326  - Remove the class before delivery
327  
328  ---
329  
330  ## Common Mistakes & Fixes
331  
332  ### Mistake 1: Inconsistent Paragraph Spacing
333  
334  ❌ **Wrong:**
335  ```css
336  p { margin-bottom: 20px; } /* Random value */
337  ```
338  
339  ✅ **Correct:**
340  ```css
341  p { margin-bottom: var(--space-lg); } /* 24px from scale */
342  ```
343  
344  ### Mistake 2: Image Too Close to Text
345  
346  ❌ **Wrong:**
347  ```css
348  img { margin: 10px 0; } /* Too tight */
349  ```
350  
351  ✅ **Correct:**
352  ```css
353  img { 
354    margin-top: var(--space-xl); /* 32px */
355    margin-bottom: var(--space-base); /* 16px */
356  }
357  ```
358  
359  ### Mistake 3: Tiny Body Text
360  
361  ❌ **Wrong:**
362  ```css
363  p { font-size: 14px; } /* Too small for body */
364  ```
365  
366  ✅ **Correct:**
367  ```css
368  p { 
369    font-size: var(--text-body); /* 18px */
370    line-height: var(--lh-normal); /* 1.5 */
371  }
372  ```
373  
374  ### Mistake 4: Insufficient Line Height
375  
376  ❌ **Wrong:**
377  ```css
378  p { 
379    font-size: 18px;
380    line-height: 1.2; /* Too tight for body text */
381  }
382  ```
383  
384  ✅ **Correct:**
385  ```css
386  p { 
387    font-size: 18px;
388    line-height: 1.5; /* Comfortable reading */
389  }
390  ```
391  
392  ### Mistake 5: Too Many Font Weights
393  
394  ❌ **Wrong:**
395  ```css
396  h1 { font-weight: 900; }
397  h2 { font-weight: 700; }
398  h3 { font-weight: 600; }
399  p { font-weight: 400; }
400  small { font-weight: 300; }
401  /* 5 weights = confusion */
402  ```
403  
404  ✅ **Correct:**
405  ```css
406  h1 { font-weight: 700; }
407  h2 { font-weight: 600; }
408  h3 { font-weight: 600; }
409  p { font-weight: 400; }
410  small { font-weight: 400; }
411  /* 3 weights = clear hierarchy */
412  ```
413  
414  ---
415  
416  ## Quick Reference Table
417  
418  | Element | Font Size | Line Height | Margin Bottom | Use Case |
419  |---------|-----------|-------------|---------------|----------|
420  | Display | 64px | 1.1 | 24px | Hero headlines |
421  | H1 | 48px | 1.2 | 16px | Page titles |
422  | H2 | 32px | 1.2 | 12px | Section headings |
423  | H3 | 24px | 1.3 | 12px | Subsections |
424  | Body | 18px | 1.5 | 24px | Paragraphs |
425  | Small | 14px | 1.6 | 16px | Captions |
426  | Image | — | — | 32px (top), 16px (bottom) | After text |
427  | Section | — | — | 64px | Between sections |
428  
429  ---
430  
431  ## Before Delivery Checklist
432  
433  Run through this list before taking the final screenshot:
434  
435  1. **Font sizes**: All text uses values from the scale
436  2. **Line heights**: Body text ≥ 1.5, headings ≥ 1.2
437  3. **Spacing**: All margins/paddings are multiples of 8px
438  4. **Image spacing**: 24-32px top, 12-16px bottom
439  5. **Section breaks**: 48-64px minimum
440  6. **Font weights**: Using only 2-3 weights
441  7. **Body text**: Never smaller than 16px (web) or 24px (slides)
442  8. **Line length**: Body text max-width 65ch
443  9. **Vertical rhythm**: Enable debug grid, verify alignment
444  10. **Consistency**: Same elements have same spacing throughout
445  
446  If any item fails, fix it before delivery.