NC Gbluejacket
Neil Gauld 8 min read

How to design an Arabic website that feels made for the people reading it

Arabic is one of the biggest audiences online and one of the least catered for, so a properly built Arabic site is a commercial opening rather than a courtesy. The numbers make the case on their own. Standard Arabic is the world's fifth most spoken language, with around 335 million speakers, yet only about 0.6% of websites publish in it. Saudi Arabia alone reached 99% internet penetration by the end of 2025, with some of the highest social media use anywhere in the world. A large, connected, commercially active audience is reading the web in Arabic, and very little of the web is answering in kind.

Istockphoto 2207665792 1024x1024

That gap is the opportunity. It is also a warning, because Arabic punishes shortcuts. Reversing a left-to-right layout and running the words through machine translation produces a site that native readers spot in seconds. What follows is how I would approach the work properly, drawn from the projects I have seen succeed and the ones I have seen come unstuck.

1. Plan the layout as a mirror, not a flip

Arabic reads right to left, so the whole interface needs to think from the right. Navigation, sliders, breadcrumbs, progress bars and form fields all reverse position. An English path of Home, About, Contact becomes Contact, About, Home in Arabic. The trap on bilingual sites is treating this as a cosmetic switch late in the build. Decide early how the layout behaves in both directions, because retrofitting right-to-left onto a structure designed only for left-to-right is where conflicts appear.

2. Choose a platform that handles right-to-left natively

Not every system copes gracefully with bidirectional content. Pick a platform with internationalisation and localisation built in rather than bolted on afterwards, one that switches direction cleanly while keeping shared content intact. On the technical side, modern CSS logical properties such as margin-inline-start and padding-inline-end adapt to text direction automatically, which removes the need to maintain a separate right-to-left stylesheet. If your platform supports that approach, much of the layout work looks after itself.

3. Choose different images for each direction

Reusing the same images and flipping them horizontally rarely works and often produces something faintly absurd, like reversed signage or a watch on the wrong wrist. Select images that suit each version. Where a photograph leads the eye into the content, that visual flow should follow the reading direction, so the version that works in English may pull the wrong way in Arabic.

4. Prototype the right-to-left layout early

Build a clickable prototype in the browser before committing to the full design. Seeing real Arabic content in a live right-to-left layout surfaces spacing, alignment and mirroring issues while they are still cheap to fix. Most current design and development tools support right-to-left, so there is little excuse for leaving these problems to be discovered after launch.

5. Allow for a different visual weight

Arabic characters tend to be shorter and wider than their Latin equivalents, and a translated line can run shorter or longer than the English it replaces. The same content can therefore sit very differently on the page across the two languages. Design with that flexibility in mind, so buttons, headings and text blocks hold their shape whichever language fills them.

Screenshot 2026 06 17 at 13 53 33

6. Know the culture, not just the language

Cultural expectations shift considerably from one country to the next, and the imagery, iconography and assumptions that feel neutral in one market can land as inappropriate, or simply alien, in another. The content of an image matters as much as its placement. I once watched a client illustrate a UAE brochure with photographs of deciduous woodland, all autumn colour, for an audience whose world is desert and coast. Nothing about it caused offence. It just announced, at a glance, that the material had been made for somewhere else. Choose visuals that belong in the reader's world, show people in a way that fits the region, and check anything you are unsure about with someone who knows the market. When in doubt, ask before you publish.

7. Translate with a human specialist

A dual-language site lives or dies on the quality of its Arabic. Clumsy or machine-literal wording can cause offence as easily as it causes confusion, and native speakers notice immediately. AI can assist the process and move a first draft along, but the judgement that makes Arabic read naturally, with the right register and cultural fit, comes from a skilled human translator reviewing and shaping the work. Treat the technology as support and keep a person accountable for the result.

8. Design mobile-first

Across the region most people meet the web on a phone, and in markets like Saudi Arabia connectivity is near universal and overwhelmingly mobile. A design that only works comfortably on a desktop is missing the way the audience actually browses. Start from the small screen and let the layout grow, rather than shrinking a desktop site down and hoping it holds together.

9. Get the typesetting and fonts right

Screenshot 2026 06 17 at 13 57 23

This is where many Arabic sites fall short, and it is the single biggest change since this advice was first written. The old default of leaning on Arial, Verdana or Tahoma no longer holds. A strong family of free, screen-optimised Arabic typefaces is now available through Google Fonts, including Noto Sans Arabic and Noto Naskh Arabic, Cairo, Tajawal, Almarai and IBM Plex Arabic, with Amiri suited to longer, more formal reading. A few practical points matter as much as the choice of face. Arabic usually needs a larger base size than English, roughly 18 to 20px for body text, and more generous line height, around 1.6 to 1.8, to give the marks above and below the letters room to breathe. On a bilingual site, pair an Arabic face with a Latin one of compatible weight and proportion so the two languages feel like one design.

10. Remember the numerals

Arabic readers will tolerate Western numerals, but if the rest of the page has been translated and the figures are left in their original form, the result looks unfinished. Carry the numerals through with everything else so the page reads as a single, coherent whole.

A worthwhile audience, treated with care

Screenshot 2026 06 17 at 13 51 51

Designing for Arabic rewards attention and exposes neglect. The audience is large, the competition for their attention online is comparatively thin, and the businesses that build for them properly stand out precisely because so few bother. Get the direction, the typography and the translation right, and an Arabic site stops feeling like a mirror image of the English one and starts feeling like it was made for the people reading it.

If you are weighing up an Arabic version of your site and want to talk it through, I am happy to help, and advice is always free.

NC Gbluejacket
Written by Neil Gauld
I take the stress out of translation projects. That's my job in a nutshell. I've been in the translation industry for quite a few years now and have tackled thousands of projects in hundreds of languages.