1.7 KiB

Raw Blame History

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

/* 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

1.7 KiB Raw Blame History