73 lines
1.7 KiB
Markdown
73 lines
1.7 KiB
Markdown
# 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
|