12 Arabic RTL Web Design Rules That Actually Matter (2026)
Most "Arabic" websites aren't Arabic. They're English websites with the text translated and dir="rtl" slapped on the body tag. Native Arabic speakers notice in under three seconds and leave. The trust you just lost took years to build.
Here are the 12 rules we apply on every CloudTopia bilingual build. None of them are opinion — they're the difference between a site that reads natively and one that reads like a rushed translation.
The 12 rules
1. Use Arabic-first fonts, not just any Arabic-capable font
Cairo is the default everyone reaches for, but it's not ideal for every context. For body copy at small sizes, IBM Plex Arabic and Noto Sans Arabic read more comfortably. For editorial/long-form, Amiri or Noto Naskh Arabic are more natural. Changa works well for modern UI. Cairo is best for display/headings, not long paragraphs.
Rule: pick a font designed for Arabic, not a Latin font with Arabic glyphs bolted on.
2. Mirror the layout, not just the text
RTL isn't a text property — it's a layout property. Navigation, sidebars, form labels, icons, progress indicators, breadcrumbs, and calling out arrows all need to flip. In CSS terms, use logical properties (margin-inline-start, padding-inline-end, inset-inline) instead of margin-left/margin-right. In Tailwind, use ms-4/me-4 instead of ml-4/mr-4.
3. Flip directional icons
Arrows, back/forward buttons, chevrons, send arrows, undo/redo — all flip in RTL. But not every icon flips. A shopping cart doesn't flip. A calendar doesn't flip. Logos don't flip. A play button on video doesn't flip (it still points right, because media is still read left-to-right in the timeline sense).
Rule: flip icons that indicate direction of motion in your UI. Keep icons that represent objects.
4. Use Arabic-Indic numerals where expected
"Eastern Arabic" digits (٠١٢٣٤٥٦٧٨٩) vs "Western Arabic" digits (0123456789) is a real design decision. Guidelines:
- Prices and amounts: usually Western digits (0-9). Most Gulf shoppers are fluent in both and prefer Western for numeric clarity.
- Dates (Hijri context): Arabic-Indic are more natural.
- Phone numbers: Western digits, because they match keypads and international formats.
- Page numbers, counts, quantities in body text: either works; pick one and be consistent.
5. Right-align everything by default, but allow exceptions
Body text, form labels, button text — right-align (start-align in logical terms). Tables get right-aligned column labels for text columns, but numeric columns stay right-aligned (Arabic and English agree on that). Don't center-align long body copy just because "it looks balanced" — it breaks reading rhythm.
6. Forms: labels above, not to the left
In English forms, labels often sit to the left of the input. In Arabic forms, labels on top (above the input) read more naturally than mirroring labels to the right. The field visually anchors below the label, and the eye flow matches the way Arabic forms are traditionally filled out.
7. Line height is higher for Arabic
Arabic letterforms have strong ascenders and descenders (think ي, ج, ط, ظ). A line height that works for Latin (1.4) looks cramped in Arabic. Use 1.7–1.9 for Arabic body text. If you're rendering both languages from the same CSS, set a separate line-height for the [lang="ar"] scope.
8. Mixed LTR content inside RTL needs Unicode isolation
URLs, English brand names, code snippets, phone numbers with + — these are LTR islands inside RTL text. Wrap them in <bdi> or use the Unicode control characters / (RLM/LRM). Otherwise, punctuation flips incorrectly ("contact us at [email protected]." becomes visually broken).
9. Dates: show both Gregorian and Hijri when relevant
For Saudi audiences, especially for government, religious, and civic content, showing both calendars respects the reader. Format: 24 أبريل 2026 (6 ذو القعدة 1447). For most ecommerce and SaaS, Gregorian alone is fine — don't force Hijri where it doesn't add value.
10. Currency formatting matches Arabic conventions
SAR 250 in English becomes 250 ر.س in Arabic — note the symbol after the number. Some designs prefer ﷼ 250. Be consistent per context. For prices on product cards, match what Salla, Zid, and Amazon.sa use — that's the pattern your users already know.
11. Buttons and CTAs: translate intent, not words
"Click here" translated literally to Arabic reads wrong. "Get started" literally becomes robotic. Write the Arabic CTA from scratch for what you want the reader to feel: ابدأ الآن, تواصل معنا, احجز الآن. Good Arabic copy for a button is rarely a direct translation — it's a native-language rewrite.
12. Test with real Arabic users, not just Google Translate
Machine translation is better than ever but still produces phrases that no native speaker would use. Before launch, have at least one native Arabic speaker — ideally from the target Gulf country — read every page. Khaleeji, Egyptian, Levantine, and Maghrebi Arabic all exist; modern Standard Arabic (MSA) is the safe default for UI, but tone varies by region.
What we see when we audit Arabic sites
| Site | RTL quality | Typography | Forms | Copy | Overall |
|---|---|---|---|---|---|
What we build RTL-first from day one, native Arabic typography, flipped icons, Arabic-Indic where appropriate, forms rebuilt right-aligned, copy by native Gulf Arabic writer. | Native | IBM Plex + Cairo | Native | Native | ★★★★★ |
WordPress with Arabic plugin dir='rtl' applied but theme layout broken in places. Icons often unflipped. Copy often machine-translated. | Plugin-level | Theme default | Flipped text only | Translated | ★★ |
Shopify with 'Arabic-ready' theme Theme RTL mostly works but checkout and email templates frequently break. Typography mediocre. | Partial | Theme default | Broken at checkout | Translated | ★★★ |
Wix / Squarespace with RTL toggle Surface-level RTL only. Typography poor, icons not flipped, forms awkward. | Surface | Poor | Poor | Translated | ★ |
The 3 worst mistakes we see
- Same line-height for Arabic and English. Tightly-stacked Arabic letters look cramped and unreadable. Fix:
line-height: 1.8for[lang="ar"]. - English brand name rendered RTL inside Arabic text. "Apple Pay" becomes "yaP elppA" visually. Fix: wrap in
<bdi>or use CSSunicode-bidi: isolate. - Arabic copy that reads like a translation of English marketing phrases. "Unleash your potential" literally translated is cringe. Fix: write Arabic copy natively.
Implementation checklist for developers
<html lang="ar" dir="rtl">
<!-- or toggle via locale in Next.js [locale] segment -->
- [ ]
dirattribute set on<html>, not<body>(so form controls and scrollbars inherit) - [ ] Use CSS logical properties throughout (
margin-inline-start, notmargin-left) - [ ]
font-familyscoped to[lang="ar"]with Arabic-first stack - [ ]
line-heighthigher for[lang="ar"] - [ ] Icon flipping: class-based (
.rtl-flip) applied to directional icons only - [ ] Numeric content wrapped in
<bdi>or CSSunicode-bidi: isolatewhere mixed - [ ] Form labels top-aligned
- [ ] Currency format verified with native tester
- [ ] Emails and PDF invoices rebuilt RTL, not just the website
For Next.js App Router specifically, our multilingual SEO post covers how to wire dir via the locale segment cleanly.
Common questions about Arabic RTL web design
Cairo is great for headings and UI display, but it's too decorative for long body text. For body copy use IBM Plex Arabic or Noto Sans Arabic; for editorial long-form use Amiri or Noto Naskh Arabic. Mix fonts by role, not by reflex.
The honest summary
An Arabic website isn't a translation — it's a parallel design. Same information architecture, different layout mirror, different typography, different tone, different numeric conventions. Teams that treat Arabic as a translation layer ship sites that native speakers bounce from. Teams that treat Arabic as a first-class design target ship sites that convert.
If you're adding Arabic to an existing English site, budget 25–35% of the original design and dev cost for the Arabic layer. It's the investment that actually lets you compete in Gulf markets.
