Arabic Website Design Guide — RTL, Typography and UX
Right-to-left layout, Arabic-optimised typography, icon placement, bilingual information architecture and Arabic SEO for websites serving the Gulf market.
Designing for Arabic requires right-to-left layout, Arabic-optimised fonts (Cairo, Noto Kufi Arabic, Tajawal), proper text alignment, and careful icon placement. Bilingual sites need separate content strategies per language — never serve translated English content as Arabic. Add dir="rtl" and lang="ar" to the HTML element, mirror directional icons, and test with Arabic screen readers.
RTL layout fundamentals
Right-to-left layout is not simply mirrored English design. It changes how users scan pages, where their eyes naturally start, and how they expect navigation, forms and content to behave. The most common RTL mistake is building the English layout first and flipping it mechanically for Arabic, which produces a readable but awkward experience.
Start with these RTL fundamentals: set dir="rtl" on the <html> element (not just a wrapper), use logical CSS properties (margin-inline-start, padding-inline-end) instead of physical ones (margin-left, padding-right), reverse the flex-direction on navigation and card grids, and align form labels to the right. Test every page by scanning it from top-right to bottom-left — if your eye does not naturally follow that path, the layout needs adjustment.
Arabic typography and font selection
Arabic typography is fundamentally different from Latin. The script is cursive, letter shapes change based on position (initial, medial, final, isolated), and baseline alignment is more complex. Fonts designed for Latin scripts do not render Arabic well — they often lack the proper glyphs, weights and hinting required for screen reading.
| Font | Style | Best for | Free |
|---|---|---|---|
| Cairo | Sans-serif, geometric | Body text, headings | Yes (Google Fonts) |
| Noto Kufi Arabic | Sans-serif, comprehensive | Body text, multilingual sites | Yes (Google Fonts) |
| Tajawal | Sans-serif, modern | Headings, branding | Yes (Google Fonts) |
| IBM Plex Sans Arabic | Sans-serif, corporate | Business sites, professional | Yes (Google Fonts) |
| Readex Pro | Sans-serif, variable | Performance-conscious sites | Yes (Google Fonts) |
| Amiri | Serif, traditional | Editorial, long-form content | Yes (Google Fonts) |
Avoid using fonts that claim to support Arabic but are actually Latin fonts with minimal Arabic glyphs. Test every font choice with real Arabic content at multiple sizes, not just a few words. Arabic text at 16px may look dramatically different from the same font at 24px.
Icon and imagery considerations
Icons that imply direction or movement must be mirrored for Arabic users. An arrow pointing right on an English site signals forward or next — on an Arabic site it should point left. Play buttons, pagination arrows, back/forward navigation and progress indicators all need mirroring. Culturally neutral icons — phone, envelope, search, home — do not need mirroring.
Avoid text within icons or images wherever possible. If you must use text, provide separate Arabic versions. For photographs, be aware that images containing people, hand gestures or culturally specific scenes may need different crops or alternatives for the Arabic version. Test icons with Arabic-speaking users to confirm they are interpreted correctly.
Bilingual information architecture
A bilingual Arabic-English website is not two parallel sites — it is one site with two content strategies. Navigation labels, CTAs and primary content should be independently authored for each language, not translated. A navigation structure that works for English users (short, action-oriented labels) may not work for Arabic users (longer, descriptive labels).
Decide how users switch between languages. The most common pattern is a toggle in the header, clearly labelled with the language name (not flags, which can be ambiguous or politically sensitive). Use the hreflang attribute to tell search engines which version to serve and set the correct lang and dir attributes on every page.
Arabic SEO
Arabic SEO requires keyword research conducted in Arabic by native speakers, not translated from English. Google applies Arabic-specific stemming and morphology rules. The meta description, title tag and URL slug should use Arabic characters — a URL like /khidmat-tasmin-mawaqi is weaker than the Arabic equivalent in terms of relevance signals.
Hreflang tags must use the correct Arabic locale code: ar-bh for Bahrain, ar-sa for Saudi Arabia, ar-ae for the UAE. Even if the Arabic content is identical across countries, separate hreflang annotations help Google serve the right version based on the user’s location.
Common Arabic web design mistakes
The most frequent mistakes we see in Arabic website design are: using left-to-right alignment on Arabic pages (the text reads right-to-left but everything else stays left-aligned), choosing fonts that lack proper Arabic glyphs, mirroring the design mechanically without considering content length differences, placing language selectors in hard-to-find locations, and failing to test with Arabic screen readers or on Arabic-localised devices.
Another common error is using machine translation for Arabic content. Google can detect machine-translated content and may rank it lower. More importantly, machine-translated Arabic often uses the wrong register (too formal or too colloquial) and misses the cultural context that native writing provides. Invest in native Arabic content creation for your Arabic site.
Frequently asked questions
You can use the same layout framework, but the design must adapt to RTL. Navigation reverses direction, text alignment flips, icons that imply direction (arrows, play buttons) need mirroring, and spacing must account for Arabic text being typically 15–25% shorter or longer than the same content in English. A true bilingual design system handles both directions without compromise.
For web use, choose fonts designed specifically for screen rendering. Cairo, Noto Kufi Arabic, Tajawal, IBM Plex Sans Arabic and Readex Pro are all excellent free options with multiple weights. For display headings, traditional fonts like Alef, Droid Arabic Kufi or Amiri can add character. Avoid using fonts designed for print or other scripts.
Icons that imply direction should be mirrored: arrows pointing right on an English site should point left on the Arabic version. Icons that are culturally neutral — phone, envelope, search — do not need mirroring. Avoid using text within icons, as it would need to be translated and redesigned for each language.
Use the bidirectional (bidi) algorithm built into HTML. Wrap English phrases or numbers within Arabic text in or tags so the browser renders them correctly. Numbers, email addresses and URLs are especially prone to misrendering in RTL layouts without explicit direction markup.
Yes. Arabic keyword research must be conducted in Arabic by native speakers, not translated from English. Google applies Arabic-specific stemming rules that affect keyword matching. The meta description, title tags and URL slugs should all use Arabic characters, not transliterated English. Hreflang tags must use the correct Arabic locale code (ar-bh, ar-sa, ar-ae).