Arabic and English websites: how to build one that works in both

Design right-to-left from the start

Arabic reads from right to left, so layouts, navigation, icons and even progress bars need to mirror. Planning this from the first wireframe is far cheaper than flipping a finished English design.

Choose type for both scripts

Pick an Arabic typeface designed for reading on screens, and pair it with your Latin type so both languages feel like one brand. Arabic usually needs a slightly larger size and more line spacing to read comfortably.

Give each language its own addresses

Use separate addresses for each language, such as /en/ and /ar/, link the two versions of each page together, and tell search engines which is which with hreflang tags. Visitors and search engines then always find the right language.

Adapt, don’t just translate

Write or adapt each language for its readers instead of translating word for word. Headlines, examples and calls to action often need to change to work well.

Check forms, numbers and dates

Phone numbers, card numbers and amounts usually stay left-to-right inside Arabic text. Test every form and donation journey in both languages on real phones.