In the UAE, a website often needs to work equally well for Arabic and English readers. The mistake is to design in English and translate at the end. Arabic reads right to left, uses a different script with different rhythms, and deserves a layout that feels designed for it rather than flipped into it.
Right-to-left is a layout, not a setting
Switching a page to right-to-left mirrors far more than the text. Navigation, reading order, icons that imply direction such as arrows and progress bars, carousels, form labels and even the side your eye lands on first all change.
Not everything should flip. Logos, phone numbers, video controls and many numerals stay as they are. Deciding what mirrors and what doesn't is a design decision, and it needs to be made for every component, not left to the browser.
If the Arabic version looks like the English version in a mirror, it wasn't designed. It was reflected.
Typography in two scripts
Arabic and Latin letterforms have different proportions, so the same font size and line height rarely suit both. We pair typefaces designed to sit well together, tune sizes and spacing per language, and test headlines in both, because an Arabic headline may be much shorter or longer than its English equivalent.
- Paired typefacesA Latin and an Arabic face with matching weight and character.
- Per-language spacingLine heights and letter spacing tuned for each script.
- Flexible layoutsComponents that handle text growing or shrinking without breaking.
Content, not just translation
Word-for-word translation often reads awkwardly and can miss the tone that works for an Arabic-speaking audience. The strongest bilingual sites treat Arabic as its own content, written or adapted by native writers, with its own headlines and calls to action. The structure stays shared; the voice belongs to each language.
Neither version should feel like the translation.
Building it properly
On the build side, CSS logical properties (start and end instead of left and right) let one stylesheet serve both directions. Each language gets its own URL, connected with hreflang so search engines show the right version. The CMS lets editors manage both languages side by side, and the language switcher keeps people on the equivalent page instead of sending them back to the home page.
