Designing Arabic-First: The RTL Guide for GCC Products (2026)

What does “Arabic-first” actually mean?

It is a build order, not a translation setting. Your design sprint runs in Arabic. Your components are designed around Arabic text length and shaping. Your user tests run in Arabic first. English becomes the adaptation.

This sounds radical until you look at the numbers: for most consumer products in Saudi Arabia, the Arabic-speaking user base is the majority, and in segments outside tech-forward Riyadh it is close to everyone. Designing for the minority first and patching the majority in afterwards is a strange way to build, once you say it out loud.

What makes RTL different from LTR design?

Mirroring is the part everyone knows: navigation flows right to left, back buttons point right, progress bars fill rightward, and the “next” chevron flips. The parts people miss are the interesting ones.

Numbers stay left-to-right even inside Arabic sentences, which makes mixed strings (prices, dates, phone numbers, “خصم 20%”) a layout stress test. Bidirectional text breaks in ways that only appear with real content, which is why placeholder text hides every RTL bug until launch day. And icons split into three groups: directional ones that must flip (arrows, back/forward, reading progress), universal ones that never flip (search, clock, phone), and brand marks that must stay untouched.

Which fonts work for Arabic interfaces?

Use a typeface designed for screens, not for print headlines. IBM Plex Sans Arabic, Cairo, Tajawal, and Noto Kufi Arabic all survive small UI sizes; decorative display fonts do not. Two rules cover most failures: set Arabic text about 10% larger than the equivalent Latin text at the same hierarchy level, and never let a Latin font “fall back” into rendering Arabic. Fallback Arabic looks like nobody cared, because functionally nobody did.

How do Arabic users actually read interfaces?

Same F-pattern scanning as everyone else, mirrored. Attention starts top-right, and the right edge of the screen is prime territory. The practical consequence: the conventions of your English layout cannot just be flipped wholesale. A filter panel that lived on the left now lives on the right. A floating action button moves corners. Test the Arabic layout as its own design, because it is one.

What are the most common Arabic UX mistakes?

The ones we find in nearly every audit of a translated product: error messages still in English (worst at payment, where trust is thinnest), forms that reject Arabic names or ask for “first name / last name” in a culture of long compound names, dates and phone numbers mangled by bidi bugs, Arabic text set smaller than the English beside it, and icons pointing the wrong way. None of these are exotic. All of them tell the user the Arabic-speaking customer was not in the room.

Should I design in Arabic or English first?

Arabic, if the majority of your users are Arabic speakers. Arabic text runs longer than English for the same meaning, so a layout that survives Arabic survives English easily, while the reverse produces truncated buttons and broken cards. Think of Arabic as your stress case: design for it and everything else fits.

How do I test an Arabic interface properly?

With Arabic-first participants, running tasks in Arabic, moderated by a researcher who is natively fluent. And a rule we enforce in our own practice: the Arabic test happens before the English one. Whatever breaks, breaks early, when it is still cheap. How we run bilingual testing rounds.

Do bilingual products need two designs?

No. They need one design system built bilingually: components with RTL-aware spacing, tokens for both type scales, and content rules for both languages. Done once, this makes every future screen cheaper. Skipped, it makes every screen a negotiation. This is design-system work, and it is the unglamorous kind that pays for years.

Build your next product Arabic-first

If your roadmap assumes Arabic users and your process assumes English design, that gap is worth closing before the next release. Send us your product and we will run a bilingual design review: what is working, what is translated rather than designed, and what to fix first.