# Story 9.2: Typography System

## Epic Reference
**Epic 9:** Design & Branding Implementation

## User Story
As a **user**,
I want **professional, readable typography**,
So that **the platform feels polished and content is easy to read**.

## Acceptance Criteria

### Arabic Fonts
- [ ] Primary: Cairo or Tajawal (Google Fonts)
- [ ] Weights: Light (300), Regular (400), SemiBold (600), Bold (700)

### English Fonts
- [ ] Primary: Montserrat or Lato
- [ ] Weights: Light (300), Regular (400), SemiBold (600), Bold (700)

### Font Hierarchy
- [ ] H1: Bold, 2.5rem (40px)
- [ ] H2: SemiBold, 2rem (32px)
- [ ] H3: SemiBold, 1.5rem (24px)
- [ ] Body: Regular, 1rem (16px)
- [ ] Small: Regular, 0.875rem (14px)

### Performance
- [ ] Line height: 1.6 body, 1.3 headings
- [ ] font-display: swap
- [ ] Preload critical fonts

## Technical Notes

```css
/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Montserrat:wght@300;400;600;700&display=swap');

@theme {
  --font-arabic: 'Cairo', 'Tajawal', sans-serif;
  --font-english: 'Montserrat', 'Lato', sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
}

/* Dynamic font selection */
html[lang="ar"] body {
  font-family: var(--font-arabic);
}

html[lang="en"] body {
  font-family: var(--font-english);
}
```

## Definition of Done
- [ ] Fonts load correctly
- [ ] Arabic fonts work with RTL
- [ ] English fonts work with LTR
- [ ] Font hierarchy applied
- [ ] Performance optimized
- [ ] Tests pass

## Estimation
**Complexity:** Medium | **Effort:** 3 hours