# WooNooW Typography System

## Font Pairings

### 1. Modern & Clean
- **Heading**: Inter (Sans-serif)
- **Body**: Inter
- **Use Case**: Tech, SaaS, Modern brands

### 2. Editorial & Professional  
- **Heading**: Playfair Display (Serif)
- **Body**: Source Sans Pro
- **Use Case**: Publishing, Professional services, Luxury

### 3. Friendly & Approachable
- **Heading**: Poppins (Rounded Sans)
- **Body**: Open Sans
- **Use Case**: Lifestyle, Health, Education

### 4. Elegant & Luxury
- **Heading**: Cormorant Garamond (Serif)
- **Body**: Lato
- **Use Case**: Fashion, Beauty, Premium products

## Font Sizes (Responsive)

### Desktop (1024px+)
- **H1**: 48px / 3rem
- **H2**: 36px / 2.25rem
- **H3**: 28px / 1.75rem
- **H4**: 24px / 1.5rem
- **Body**: 16px / 1rem
- **Small**: 14px / 0.875rem

### Tablet (768px - 1023px)
- **H1**: 40px / 2.5rem
- **H2**: 32px / 2rem
- **H3**: 24px / 1.5rem
- **H4**: 20px / 1.25rem
- **Body**: 16px / 1rem
- **Small**: 14px / 0.875rem

### Mobile (< 768px)
- **H1**: 32px / 2rem
- **H2**: 28px / 1.75rem
- **H3**: 20px / 1.25rem
- **H4**: 18px / 1.125rem
- **Body**: 16px / 1rem
- **Small**: 14px / 0.875rem

## Settings Structure

```typescript
interface TypographySettings {
  // Predefined pairing
  pairing: 'modern' | 'editorial' | 'friendly' | 'elegant' | 'custom';
  
  // Custom fonts (when pairing = 'custom')
  custom: {
    heading: {
      family: string;
      weight: number;
    };
    body: {
      family: string;
      weight: number;
    };
  };
  
  // Size scale multiplier (0.8 - 1.2)
  scale: number;
}
```

## Download Fonts

Visit these URLs to download WOFF2 files:

1. **Inter**: https://fonts.google.com/specimen/Inter
2. **Playfair Display**: https://fonts.google.com/specimen/Playfair+Display
3. **Source Sans Pro**: https://fonts.google.com/specimen/Source+Sans+Pro
4. **Poppins**: https://fonts.google.com/specimen/Poppins
5. **Open Sans**: https://fonts.google.com/specimen/Open+Sans
6. **Cormorant Garamond**: https://fonts.google.com/specimen/Cormorant+Garamond
7. **Lato**: https://fonts.google.com/specimen/Lato

**Download Instructions:**
1. Click "Download family"
2. Extract ZIP
3. Convert TTF to WOFF2 using: https://cloudconvert.com/ttf-to-woff2
4. Place in `/customer-spa/public/fonts/[font-name]/`

## Implementation Steps

1. ✅ Create font folder structure
2. ✅ Download & convert fonts to WOFF2
3. ✅ Create CSS @font-face declarations
4. ✅ Add typography settings to Admin SPA
5. ✅ Create Tailwind typography plugin
6. ✅ Update Customer SPA to use dynamic fonts
7. ✅ Test responsive scaling