A bilingual Arabic and English website is not an English site with a translation added. Arabic reads right to left, so the layout, navigation and many icons have to mirror. The Arabic typeface has to be chosen alongside the Latin one, not found later. Arabic letters join, so the type settings that suit English break it. Mixed lines of Arabic, English and numbers need care, and each language needs its own URLs so search engines and AI answers can find it. Plan all of that before the first layout and the second language costs a fraction of what it does when it’s retrofitted.
We work with companies in Dubai, Abu Dhabi, Riyadh and Jeddah, where most sites need both languages. This is the checklist we design and build against.
1. Decide which language leads
Before any design, decide whether the site is Arabic first, English first or genuinely equal. It changes the homepage, the default URL, the order of the language switcher and which version gets written first. Writing both from the same brief beats translating one into the other: Arabic copy written as Arabic reads better than translated English, and it’s usually shorter in characters but needs more space on the page.
2. Build the layout to flip
In right to left mode the whole page mirrors. The logo and navigation move to the right, the reading order of columns reverses, and back and forward arrows swap.
On the build side, that means:
- Set the direction on the page.
<html lang="ar" dir="rtl">for Arabic pages,lang="en" dir="ltr"for English. - Use logical CSS properties. Write
margin-inline-startandpadding-inline-endrather than left and right, and the layout flips with the direction for free. Flexbox and grid follow the direction already. - Don’t flip everything. Mirror arrows, chevrons, progress bars and anything that implies reading order. Leave logos, photographs, media play buttons, checkmarks and charts with a time axis that runs left to right as they are.
Designing both directions side by side in Figma from the first round catches the layouts that only work one way, such as a hero image that crops badly when mirrored.
3. Choose the Arabic type with the Latin type
The Arabic typeface carries as much of the brand as the logo. Pick it together with the Latin face so they match in weight, stroke contrast and personality. Families designed with both scripts, such as IBM Plex Sans Arabic or Noto Sans Arabic, make this easier; a custom Latin face usually needs an Arabic partner chosen by eye.
Then set it differently:
- Size it up. At the same point size Arabic usually looks smaller than Latin text, so body copy often needs to be a step larger.
- Give it more line height. Arabic letters have tall ascenders and deep descenders and marks above and below the line.
- Never letter-space Arabic. The letters connect, and tracking pulls the joins apart. Turn off any letter spacing your Latin styles use.
- There are no capitals and no true italics. Uppercase labels and italic emphasis need another treatment in Arabic, usually weight or colour.
Our note on SaaS homepage typefaces covers how we pick the Latin side.
4. Handle mixed text and numbers
Real Arabic copy contains English product names, URLs, email addresses and numbers. The browser’s bidirectional algorithm mostly handles this, but it gets punctuation and short phrases wrong.
- Wrap embedded English, user names and anything dynamic in
<bdi>or give itunicode-bidi: isolateso it doesn’t scramble the sentence around it. - Keep phone numbers, prices with currency codes and code snippets left to right inside Arabic text.
- Decide on numerals. Many sites in the UAE and Saudi Arabia use Western digits (0 to 9) in Arabic text; others use Eastern Arabic digits. Pick one and use it everywhere, including in forms.
5. Give each language its own URLs
For search and for AI answers, each language needs its own crawlable pages. Use a folder per language, such as /ar/ and /en/, rather than switching language on the same URL with a cookie or script.
- Add
hreflangtags so each page points at its other language version, plus anx-default. - Translate the page titles, meta descriptions, image alt text and structured data, not just the visible copy.
- Make the language switcher a plain link to the matching page in the other language, not back to the homepage.
6. Test forms, inputs and edge cases
Forms are where bilingual sites break most often. Check that text fields accept and display Arabic correctly, that validation messages exist in both languages, that phone and email fields stay left to right, and that dates are formatted for the reader. Then test the pages people rarely look at: the 404, the cookie banner, email confirmations and error states.
The checklist
| Area | Question |
|---|---|
| Lead language | Have you decided which language is default, and written both from one brief? |
| Layout | Does every page work mirrored, with logical CSS properties? |
| Icons | Are directional icons mirrored and everything else left alone? |
| Type | Is the Arabic face chosen with the Latin one, sized up, with no letter spacing? |
| Mixed text | Are embedded English and dynamic values isolated? |
| Numbers | Is one numeral style used everywhere? |
| URLs | Does each language have its own folder with hreflang? |
| Forms | Do inputs, validation and emails work in both languages? |
Quick recall
What changes in a right to left layout? The page mirrors: navigation, column order and directional icons.
What shouldn’t be mirrored? Logos, photos, media play buttons and checkmarks.
Why no letter spacing on Arabic? The letters join, and tracking breaks the joins.
How should each language be published? Its own folder, such as /ar/ and /en/, with hreflang between them.
How do you stop mixed text scrambling? Isolate embedded English and dynamic values with bdi or unicode-bidi: isolate.
Written by 4080 Studio.
