Arabic–English website design: RTL, fonts and SEO done properly

UI/UX3 min readBy BytGlen Team
Illustration for: Arabic–English website design: RTL, fonts and SEO done properly

For many businesses in Dubai, Abu Dhabi and Sharjah, an Arabic version of the website is not optional. Done well, it builds trust and reaches customers who search in Arabic. Done badly — machine-translated text in a layout built for English — it does the opposite. Here is what a proper Arabic–English website needs.

Right-to-left is a layout, not a setting

Arabic reads right to left, so the whole interface mirrors: navigation, columns, form labels, breadcrumbs, sliders and the direction of arrows. Setting the page direction to right-to-left is the start, not the end. Build the site with logical spacing and alignment (start and end rather than left and right), so the same components work in both languages.

  • Mirror arrows, chevrons and progress indicators that show direction.
  • Do not mirror logos, media play buttons, clocks or images of real objects.
  • Check every form: labels, validation messages, phone fields and dropdowns.
  • Test long Arabic words and short English ones in the same component.

Typography

Arabic letters join and vary in height, so pair an Arabic typeface with your brand fonts rather than relying on system fallbacks. Families such as Noto Sans Arabic, IBM Plex Sans Arabic, Cairo or Tajawal are common starting points. Increase line height for Arabic text and check how numbers display — decide whether to use Western digits (1, 2, 3) or Eastern Arabic digits for your audience.

Give each language its own address — for example /ar/ for Arabic — and connect the versions with hreflang tags so Google shows English searchers the English page and Arabic searchers the Arabic page. Translate titles, meta descriptions, image alt text and structured data, not just the visible copy. Research Arabic keywords separately: people often search differently in each language.

Translation and review

Use a professional translator for public pages, and have someone who knows your business review the Arabic before launch. Machine translation is useful for drafts, not for your home page. Keep a simple workflow so new pages are published in both languages at the same time.

A language switcher that respects people

  • Keep visitors on the same page when they switch language.
  • Label the switcher in each language (English / العربية), not with flags.
  • Do not redirect visitors automatically by location; let them choose.

Test before you launch

Test every template in both directions on phones and desktops, including menus, popups, WhatsApp buttons, checkout and emails. Most bilingual problems appear in the small parts: error messages, date pickers and order confirmations.

A bilingual website is two experiences built on one system — not one website with a translate button.

Build it with us

BytGlen designs and builds bilingual English–Arabic websites for businesses in Dubai, Abu Dhabi, Sharjah and across the UAE, from our studios in Kochi and Bangalore. See website design for Dubai and the UAE, or read what drives the cost of a website in the UAE.

Work with BytGlen

Have a project in mind?

Website, brand, AI creatives or marketing — tell us what you are planning and we will reply within one business day.

Keep reading

All articlesAll articles
Keep scrolling
to learn more
All articles Next page