Typography¶
Overview¶
BrainSAIT's typography system ensures clear, professional communication across all platforms.
Font Families¶
Primary Font (English)¶
Inter - Clean, modern sans-serif - Excellent screen readability - Wide range of weights
Primary Font (Arabic)¶
IBM Plex Sans Arabic - Designed for Arabic - Matches Inter aesthetics - Bilingual harmony
Type Scale¶
| Name | Size | Weight | Line Height | Usage |
|---|---|---|---|---|
| Display | 48px | 700 | 1.1 | Hero headlines |
| H1 | 36px | 700 | 1.2 | Page titles |
| H2 | 28px | 600 | 1.3 | Section headers |
| H3 | 22px | 600 | 1.4 | Subsections |
| H4 | 18px | 600 | 1.4 | Card titles |
| Body | 16px | 400 | 1.6 | Paragraphs |
| Small | 14px | 400 | 1.5 | Captions |
| Tiny | 12px | 400 | 1.4 | Labels |
Font Weights¶
- 400 (Regular) - Body text
- 500 (Medium) - UI elements
- 600 (Semi-bold) - Subheadings
- 700 (Bold) - Headings
Code Typography¶
Font: JetBrains Mono - Monospace for code - Clear differentiation - Good ligatures
Guidelines¶
Hierarchy¶
- Clear visual hierarchy
- Consistent sizing
- Purposeful emphasis
Readability¶
- Adequate line height
- Reasonable line length (60-80 char)
- Proper contrast
Bilingual¶
- Match Arabic/English sizes
- Consistent alignment
- Proper RTL support
Related Documents¶
Last updated: January 2025