Insights

RTL and Arabic UX patterns that actually feel native

Layout, typography, and interaction details that make bilingual MENA products feel intentional — not mirrored as an afterthought.

rtl ux design

Flipping an English layout is not localisation. Arabic-first and bilingual products need typography, spacing, and navigation models designed for how people actually read and scan.

Common mistakes

  • Mirroring icons that should stay directional (play, charts, media controls)
  • Undersized Arabic type with cramped line height
  • Mixing LTR numbers and dates inside RTL paragraphs without consistent rules

Patterns we use

  1. Bidirectional components — Build cards, forms, and nav with logical properties (margin-inline, text-align: start).
  2. Script-aware type scales — Arabic often needs +1 step size and more generous leading vs. Latin.
  3. Content parity checks — If Arabic strings are 30% longer, layouts must flex without truncation.

Test with real content early

Use production copy in both languages during wireframes, not placeholder lorem. RTL issues discovered in QA are already too late.