Bilingual Website Design: Arabic and English Done Properly

Introduction

• The problem: many bilingual sites in the Gulf are one language designed well and a second language bolted on. Arabic pages come out with broken alignment, mismatched fonts, untranslated buttons or missing content.
• Why it matters: in Oman and across the Gulf, customers switch between Arabic and English depending on the situation. If one version feels second-rate, you lose trust with that audience, and search engines may also struggle to understand which page is for whom.
• What this article covers: layout direction, typography, the language switcher, how much content each language needs, URL structure, and a checklist for reviewing your own site. The search side (hreflang) has its own guide: Bilingual SEO and hreflang.

Decide the model before you design

Before any design work, agree on how the two languages relate. There are three common models.

Whichever you choose, state it clearly to your team. Most problems come from sites that drift into an accidental half-translation.

Layout: RTL and LTR are not a simple flip

Arabic reads right to left (RTL) and English left to right (LTR). The page needs to be built to support both, not reversed by hand afterwards.

What should mirror

• Text alignment, reading order and the position of the logo and main menu.
• Navigation arrows, "next" and "back" icons, breadcrumbs and progress indicators.
• Layout of columns, sidebars, cards with an image on one side, and form labels.
• Sliders and timelines, so the sequence moves in the reading direction.

What should not mirror

• Phone numbers, email addresses, URLs, code and product model names, which stay left to right even inside Arabic text.
• Logos and brand marks, unless you designed an official mirrored version.
• Icons with real-world meaning, such as a clock, a play button, a checkmark or a magnifying glass.
• Charts with time on the x-axis are debated; keep a consistent rule and label clearly.
• Numerals: decide on one numeral style per language (Western digits or Arabic-Indic digits) and stay consistent, especially in prices and dates.

How to build it

• Set dir="rtl" and lang="ar" on the page for Arabic, and dir="ltr" and lang="en" for English.
• Use CSS logical properties (margin-inline-start, padding-inline-end, text-align: start) instead of left and right, so one stylesheet serves both directions.
• Test mixed content: an Arabic sentence containing an English brand name or a number often shows punctuation in the wrong place. Wrap the embedded part in an isolating element so it does not disturb the sentence.

Typography: where most bilingual sites fall short

Arabic is not simply "English with different letters". It has its own proportions and needs more space.

• Choose a real Arabic typeface, designed for screens, not the fallback from the operating system. Pair it with a Latin font of similar weight and height so the two feel like one family.
• Increase line height for Arabic. Arabic text with diacritics and tall letter shapes usually needs more line spacing than Latin text at the same size.
• Keep sizes comparable. At the same pixel size, Arabic can look smaller than English. Test and adjust the Arabic size rather than assuming they match.
• Avoid italics and forced uppercase for Arabic. Arabic has no uppercase, and slanted Arabic is hard to read. Use weight and colour for emphasis instead.
• Do not add letter spacing to Arabic. It breaks the connection between letters.
• Limit font weights to keep pages light; see practical website speed.

Language switcher: make it obvious and predictable

If a page does not exist in the other language, say so politely and offer the closest equivalent. A dead end or a silent redirect to the home page frustrates visitors and signals poor quality to search engines.

Content parity and tone

• Write natively, not word for word. A direct translation often sounds stiff. Keep the same facts and structure, but adapt phrasing, examples and tone for each audience.
• Translate everything visible: buttons, form labels, error messages, placeholders, cookie notices, email confirmations, image alt text and the page title and description.
• Check the pieces people forget: the 404 page, the thank-you page, invoices, and automated messages.
• Keep facts identical: services, hours, addresses and policies should match in both languages. Update both at the same time.
• Use consistent terminology. Decide the Arabic term for each service name and use it everywhere.
• Watch images with text. A banner with Arabic text baked in will not work on the English page. Use separate images or live text.

URLs and structure

A clean structure helps visitors and search engines.

• Use a separate URL for each language, for example /ar/ and /en/ sections, or two subdomains. Avoid showing different languages at the same address based on guesswork.
• Keep the path structure parallel, so /ar/services/ matches /en/services/.
• Choose readable slugs. Arabic slugs are possible, but many teams use clear transliterated or English slugs for sharing and stability; pick one rule and keep it.
• Link each page to its counterpart with hreflang tags so search engines understand the pair. The details are in Bilingual SEO and hreflang.
• Give each version its own title and description in its own language.

A review checklist

1. Open ten key pages in both languages. Is alignment correct everywhere?
2. Check menus, arrows, icons and breadcrumbs for direction.
3. Test numbers, phone numbers and English names inside Arabic sentences.
4. Compare the Arabic and English fonts side by side at body and heading sizes.
5. Click the language switcher on five different pages. Does it keep the page?
6. Submit each form in both languages and read the confirmation and error messages.
7. Compare facts (services, hours, address) between the two versions.
8. Check page titles, descriptions and image alt text in both languages.
9. Test on a real phone, not only a desktop browser.

Common mistakes

• Machine-translating the whole site and publishing without a native reader.
• Flipping the page with a hack instead of building with logical properties, causing broken details everywhere.
• Using a single font that handles Arabic poorly, or two fonts that clash.
• A language switcher that always returns to the home page.
• Leaving one language outdated after a price or service change.
• Mixing numeral styles randomly across the same page.
• Using flags for languages, which confuses visitors, for example Arabic speakers in many countries.

What does Xposio do?

1. We agree the language model first (full, core or audience-specific), so you know what will be written and maintained.
2. We build RTL and LTR from the start with logical properties, rather than patching one direction later.
3. We choose and test the Arabic and Latin typefaces together on real phones, with attention to size, spacing and weight.
4. We design the switcher and URL structure so visitors stay on the same page and search engines can pair the versions.
5. We write Arabic and English natively where content is part of the project, and we review embedded numbers and names inside sentences.

Internal link: Learn about the Website Design & Development service at /en/services/website-design-development, and the Content & Copywriting service at /en/services/content-copywriting.

You can also browse more guides at /en/blog.

Conclusion

• Pick the content model (full, core or audience-specific) before design starts.
• Build layout with logical properties so RTL and LTR share one clean codebase.
• Treat Arabic typography as its own task: font, size, spacing, and no forced italics or letter spacing.
• A language switcher should keep the visitor on the same page and say each language in its own name.
• Keep facts identical, write each language natively, and keep both updated together.
• Use parallel URLs and hreflang so search engines pair the two versions correctly.

Related reading

• Bilingual SEO and hreflang
• Arabic SEO challenges
• Mobile-first design