Arabic Typography for Graphic Designers: Fonts, RTL Layout & Workflow
The complete guide to designing with Arabic text — font selection, RTL layout principles, bilingual design, Photoshop & Illustrator tips, and Arabic typography rules.
Arabic typography is one of the most beautiful and technically complex areas of graphic design. Working with Arabic script in design tools requires understanding unique principles: right-to-left text direction, connected letter forms, script-specific OpenType features, and the cultural context that makes Arabic design meaningful. This guide is your complete reference for professional Arabic graphic design work.
Arabic Font Categories for Design
Arabic fonts fall into distinct stylistic categories, each appropriate for different design contexts:
Naskh Fonts (نسخ) — Classic, Readable
The most widely used Arabic script style. Appropriate for:
- Book and magazine body text
- Websites and digital content
- Formal documents and reports
- Quran printing (specialized Naskh)
Top Naskh fonts: Scheherazade New, Amiri, Traditional Arabic (Windows), Noto Naskh Arabic
Kufi Fonts (كوفي) — Geometric, Bold
Angular, geometric style with roots in early Islamic epigraphy. Appropriate for:
- Logos and brand identity
- Display text and headlines
- Architecture and signage design
- Islamic geometric art integration
Top Kufi fonts: Tharwat, Reem Kufi, Jomhuria, Rakkas
Modern Arabic Fonts — Contemporary, Sans-serif
Clean, minimal designs that work well alongside Latin fonts. Appropriate for:
- Tech product interfaces and apps
- Modern corporate branding
- E-commerce and retail design
Top modern fonts: Cairo, Tajawal, Almarai, IBM Plex Arabic, Dubai (free for commercial use)
Display/Decorative Fonts — Expressive
Highly stylized, used for artistic expression. Appropriate for:
- Posters and artistic prints
- Social media graphics
- Cultural and festival marketing
Key Arabic Typography Design Rules
1. Never Override Arabic Letter Connections
Arabic letters MUST connect in their natural way. Increasing letter spacing (tracking/kerning) breaks Arabic letter connections, making text unreadable. Unlike Latin typography where wide letter spacing is a design tool, with Arabic you must keep letter spacing at 0 or allow the font's built-in kerning to work naturally.
2. Line Height for Arabic
Arabic descenders (below-baseline elements) are often deeper than Latin. Use line height of 1.5x to 1.7x the font size — more than the typical 1.2-1.4x used for Latin. If lines look crowded, increase line height before reducing font size.
3. Bidirectional (BiDi) Text Layout
When a design contains both Arabic and Latin text, the design direction is typically set by the dominant language. For Arabic-first designs:
- Main text block flows RTL
- Logo and navigation: consider both directions
- Numbers remain LTR even in RTL layouts (the Unicode BiDi algorithm handles this)
4. Choosing Companion Latin Fonts
When pairing Arabic and Latin type in bilingual designs, consider visual harmony:
| Arabic Font Style | Good Latin Companion |
|---|---|
| Naskh (traditional serif-like) | Georgia, Garamond, Times New Roman |
| Modern Arabic (sans-serif) | Inter, Helvetica Now, Roboto |
| Kufi (geometric) | Futura, Gill Sans, Avenir |
| Cairo (humanist) | Source Sans, Myriad Pro |
Arabic Typography in Adobe Illustrator
- Go to Edit → Preferences → Type and enable "Show Indic Options"
- In the Paragraph panel, set text direction to RTL
- Use Type → Area Type Options to set text frame direction for RTL
- Middle East Edition (ME) of Illustrator has the best Arabic support; the standard edition requires workarounds
Arabic Typography in Adobe Photoshop
- Go to Edit → Preferences → Type → Enable "Middle Eastern" text direction
- When creating a text layer, click the RTL direction icon in the character panel
- Choose an Arabic-compatible font (the font dropdown only shows fonts that support Arabic when you type Arabic text)
Arabic Typography in Figma
Figma has improved Arabic support significantly:
- Type Arabic text in any text frame — automatic letter connecting works natively
- Set text alignment to "Right" for RTL paragraphs
- Figma's text engine uses HarfBuzz for Arabic shaping, so connected forms display correctly
- The Figma plugin "Arabic RTL Support" provides additional RTL layout tools
🔤 Generate Styled Arabic Text for Your Designs
Type Arabic and apply decorative font styles — then export as PNG.
Open Font GeneratorFrequently Asked Questions
Yes. All Google Fonts (including Arabic fonts like Cairo, Tajawal, El Messiri, Noto Naskh Arabic, and Amiri) are released under the SIL Open Font License or Apache License 2.0, which allow free use in commercial projects including logo design, print materials, packaging, and websites.
This usually means Arabic text shaping is not working — letters appear isolated (not connected) or in wrong order. Causes: (1) your software doesn't have RTL/Arabic shaping engine; (2) the setting "Show Middle Eastern/Indic options" isn't enabled; (3) you're using an older font format (Type 1) that doesn't support Arabic OpenType shaping. Solution: use a modern OpenType Arabic font and enable Middle Eastern text engine in Adobe apps.
Persian (Farsi) uses the same Arabic script but with 4 extra letters. Persian typography tends to have more pronounced curves and a more flowing style, especially in the Nastaliq script (which is uniquely Persian/Urdu). When designing for Persian audiences, Nastaliq or Naskh-based Persian fonts should be used rather than Arabic-specific fonts, as they contain the additional letters and have aesthetic conventions tailored for Persian.