docs: merge typography research into design-philosophy

- Add Typography System section with type scale rationale
- Add line-height guidelines and font pairing categories
- Add spacing system (8px grid) explanation
- Add e-commerce typography patterns (Baymard research)
- Delete standalone typography.md (redundant)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

docs/research/design-philosophy.md

@@ -71,6 +71,77 @@ Each preset targets a specific aesthetic/use case:
 
 The principle: expose choices that are hard to get wrong, lock down choices that require design expertise.
 
+## Typography System
+
+### Type Scale Rationale
+
+We use the **Major Third (1.25) ratio** for our type scale. Common ratios and their use cases:
+
+| Ratio | Name | Best Use Case |
+|-------|------|---------------|
+| 1.125 | Major Second | Dense UIs, dashboards |
+| **1.25** | **Major Third** | **E-commerce (our choice)** |
+| 1.333 | Perfect Fourth | Editorial, content-heavy |
+| 1.5 | Perfect Fifth | High-contrast headlines |
+| 1.618 | Golden Ratio | Luxury, creative projects |
+
+Major Third provides sufficient hierarchy without oversized mobile headings.
+
+### Line-Height Guidelines
+
+Line-height follows an inverse relationship with font size—larger text needs tighter leading:
+
+| Context | Line-height |
+|---------|-------------|
+| Large headings (32px+) | 1.1–1.2 |
+| Subheadings (20–28px) | 1.2–1.3 |
+| Body text | 1.5–1.6 (WCAG minimum) |
+| Small text (<14px) | 1.4–1.5 |
+
+### Font Pairing Categories
+
+Our 7 typography presets draw from these research-backed pairing styles:
+
+| Style | Heading Font | Body Font | Use Case |
+|-------|-------------|-----------|----------|
+| Clean | Manrope | Inter | Default, versatile |
+| Editorial | Playfair Display | Raleway | Fashion, magazines |
+| Modern | Space Grotesk | Inter | Tech, contemporary |
+| Classic | Cormorant Garamond | Source Serif | Traditional, luxury |
+| Friendly | Fraunces | Work Sans | Playful, approachable |
+| Minimal | DM Sans | Source Serif | Ultra-clean |
+| Impulse | Raleway | Inter | Fashion editorial |
+
+**Key research finding**: Serif fonts increase perceived quality by 13% and reliability by 9% (Monotype/Neurons research). We use serifs for editorial and classic presets.
+
+### Spacing System
+
+We use an **8px baseline grid** (Material Design, iOS standard):
+- Most screen sizes divide evenly by 8
+- Scales cleanly to @1x, @2x, @3x resolutions
+- Reduces decisions to: 8, 16, 24, 32, 40, 48px
+
+Body text at 16px with 1.5 line-height = 24px (3 × 8), keeping text on the grid.
+
+## E-commerce Typography Patterns
+
+Research from Baymard Institute (200,000+ hours of UX testing):
+
+### Product Page Hierarchy
+- **Product title**: Largest text (20–28px), semi-bold to bold
+- **Price**: High prominence near Add to Cart, 4.5:1 minimum contrast
+- **CTA buttons**: Clean sans-serif, 14–16px, action verbs ("Add to basket")
+- **Body descriptions**: 16–18px, 1.5 line-height, structured with subheadings
+
+### Mobile Requirements
+- **Touch targets**: 44×44px minimum (WCAG AAA)
+- **Body text**: 16px minimum (prevents iOS input zoom)
+- **Avoid horizontal tabs**—27% of users overlook them
+
+### Scanning Patterns
+- **F-pattern** (product pages): Horizontal top, shorter line below, vertical down left
+- **Z-pattern** (landing pages): Top-left → top-right → diagonal → bottom-right
+
 ## Combination Count
 
 With current options, the system offers: