Arabic Typography
Best practices for beautiful, readable Arabic typography in web applications.
Font Selection
Choose fonts that support Arabic script with proper glyph rendering:
Recommended Arabic Fonts
- Cairo: Modern, clean, great for UI
- Tajawal: Professional, highly readable
- Noto Sans Arabic: Excellent glyph coverage
- IBM Plex Sans Arabic: Corporate, professional
Text Rendering
Proper Arabic text requires attention to spacing and line height:
Typography Guidelines
- • Use 1.6-1.8 line-height for better readability
- • Increase letter-spacing slightly (0.01em - 0.02em)
- • Minimum font size: 16px for body text
- • Ensure proper diacritical mark rendering
- • Test with real Arabic content, not placeholder text
Number Formatting
Handle both Latin and Eastern Arabic numerals appropriately:
Examples:
السعر: 1,234.56 ريال (Latin numerals)
السعر: ١٬٢٣٤٫٥٦ ريال (Eastern Arabic)
Common Mistakes
Do
- ✓ Test with native speakers
- ✓ Use proper Arabic fonts
- ✓ Increase line-height for clarity
- ✓ Support diacritical marks
- ✓ Use real Arabic content in tests
Don't
- ✗ Using fonts without Arabic glyphs
- ✗ Too tight line-height (< 1.4)
- ✗ Mixing Latin and Arabic fonts
- ✗ Ignoring diacritical marks
- ✗ Copy-pasting from design tools