Bilingual Arabic and English website design
Arabic is not a translation task at the end of a build. It is a design decision at the start. Here is what changes when a site has to work in both directions, and what breaks when nobody plans for it.
Machine-translated Arabic reads like machine translation
You can push an English site through a translation tool and have Arabic back in a minute. It will look like Arabic. It will not read like Arabic to the person you are selling to. Word order gives it away first: Arabic often leads with the verb, adjectives follow the noun, and a headline built to land in English arrives flat. Register gives it away second. A trademark firm and a burger shop do not sound the same in Arabic, and a translation engine gives both the same neutral voice.
The visible failures are worse. Arabic is a joined script, so every letter changes shape according to its neighbours, and a font without proper shaping support breaks a word into disconnected letters. Numerals are the next trap: dates and percentages read naturally as ٢٨ يوليو and ٢٥٪, while a phone number should stay in Western digits so a customer can dial it. And Arabic sets shorter in most sentences but taller on every line, so a headline that wrapped to two lines in English wraps to three and pushes your call to action below the fold.
The fix is not exotic. A person who writes Arabic professionally writes it, from the intent of the English rather than its grammar, and the layout is then tested with the real words in place. That is how a bilingual storefront like Al Badawi sells handmade leather to Cairo and to London from one catalogue.
Right-to-left is a layout mirror, not a text swap
Set dir="rtl" and the browser flips the text. It does not flip your design. The composition has to mirror: the logo moves to the right of the navigation, sidebars swap sides, tables start their first column on the right, and every margin stops being left or right and becomes start or end. Directional icons mirror too — back arrows, carousel controls, progress bars. The W3C guidance on structural markup and right-to-left text is worth handing to whoever builds it.
What must not move matters as much. Your logo stays as drawn, unless someone has deliberately made an Arabic lockup. Phone numbers read left to right in every language, and so do email addresses, URLs, code, and Latin brand names such as Google, Shopify, Fawry, Paymob, InstaPay and WhatsApp. Put any of those in an Arabic paragraph and you are in bidirectional text, where the browser usually gets it right and the punctuation at the boundary usually does not. The W3C write-up on inline bidirectional markup explains why.
| Mirrors in Arabic | Stays exactly as it is |
|---|---|
| Navigation, sidebars and the page grid | Your logo, unless an Arabic lockup exists |
| Margins, padding and text alignment | Phone numbers, including the country code |
| Table column order and list markers | Email addresses, URLs and file paths |
| Back, next and carousel arrows | Latin brand names: Google, Shopify, Fawry, Paymob, InstaPay |
| Progress bars and sliders | Code samples and anything monospaced |
This is why bolting Arabic on at the end costs more than building for it. Every hard-coded left has to be found, every icon checked, every component looked at twice. It is not difficult work, but it does not compress into the last week of a project — one reason a custom build holds up where a retrofit does not.
Arabic typography is a separate decision, not a fallback
The display typeface on this site is Clash Display. It has no Arabic glyphs at all. Feed it an Arabic heading and the browser falls back to whatever the device has, Noto Naskh on Android and Geeza Pro on an iPhone, so two visitors see two different brands and neither sees yours. A fallback stack does not fix that. You choose an Arabic face on purpose and pair it. Google Fonts filtered to the Arabic subset is the practical starting point: IBM Plex Sans Arabic, Cairo, Almarai, Tajawal and Noto Kufi Arabic.
Pair on proportion, not on name. Body copy comfortable at 1.5 line height in Inter usually wants 1.75 to 1.85 in Arabic, because the dots below the line need somewhere to go. Set letter-spacing to zero: tracking that flatters a Latin heading pulls joined Arabic letters apart. Arabic has no capitals, so hierarchy built on all-caps labels moves to weight and size — and drops a step, because Arabic reads heavier at the same nominal weight. A second family is also a second download, which is where page speed on a mid-range Android over Egyptian mobile data is won or lost.
Bilingual SEO: two languages need two addresses
This is where most bilingual sites in Egypt lose the traffic they think they have. A toggle that swaps text in the browser with JavaScript leaves you one URL, one title and one description. Google indexes that single page, in one language, so your Arabic has no address of its own and cannot rank. Google renders JavaScript well now; the problem is that content which never has a URL has nothing to put in the index, as Google's JavaScript SEO basics sets out.
We learned that on our own site. An earlier version of ymsstudio.com held both languages behind a toggle and stored the choice in the browser. Crawlers have no browser memory, so the Arabic was invisible. English now lives at /page and Arabic at /ar/page, each static HTML with its own title, description and canonical, each pointing at the other with reciprocal hreflang and an x-default. Reciprocal is the word that matters: if the Arabic does not point back, Google's documentation on localised versions says the annotation may be ignored.
Translating the page is not the same as translating the search. Egyptians type تصميم مواقع, not the literal Arabic of a phrase like web design agency, so Arabic titles, descriptions, headings and alt text have to be written for real queries rather than converted word for word. That is the point of building for search and AI visibility, and it is where hosted builders run out of room: platform limits show up first in multilingual URLs and hreflang control.
Five languages, still running
IGBS is the largest trademark and intellectual property firm in Egypt, and its clients read Arabic, English, French, Spanish and Chinese. We built the public site in five languages with full Arabic right-to-left: mirrored layout, an Arabic typeface chosen rather than inherited, Arabic written by a person, separate indexable URLs per language, and hreflang tying them together. It has been live and maintained since, which is the test that means anything. If you are comparing studios, the question is not whether they can produce Arabic. It is whether the Arabic was designed or translated. Switch any bilingual site on your phone and look at the navigation, the buttons and the line breaks.
Frequently asked questions
Can I use Google Translate for the Arabic version of my site?
For an internal document, yes. For the site you sell from, no. Machine translation gets the words and misses the word order, the register and the rhythm, and an Egyptian business owner spots it in one sentence. A plugin that generates Arabic at view time also gives Google nothing stable to index.
What has to flip in a right-to-left layout, and what must not?
Flip the composition: navigation, sidebars, table column order, form labels, list markers, and every left and right margin. Flip directional icons — back and next arrows, carousel controls, progress bars. Do not flip your logo, phone numbers, email addresses, URLs, code, or Latin brand names such as Google, Shopify, Fawry, Paymob, InstaPay and WhatsApp.
Which Arabic font pairs with my English brand typeface?
Whichever one matches its proportions, not its name. Most Latin display faces, Clash Display included, hold no Arabic glyphs, so the browser substitutes a system font and your Arabic pages stop looking like your brand. IBM Plex Sans Arabic, Cairo, Almarai, Tajawal and Noto Kufi Arabic are dependable. Give Arabic more line height, set letter-spacing to zero, and expect to drop one weight step.
Should my Arabic site be a subfolder, a subdomain, or a .com.eg?
For most Egyptian firms a subfolder on one .com is the right call. It keeps every link and every bit of earned authority on one property, and it does not tell a Gulf client the site is aimed elsewhere. A .com.eg is a genuine advantage if Egypt is your only market. A subdomain is the weakest of the three: the same setup work, and the signal is split anyway.
Will Google index my Arabic pages if I use a JavaScript language toggle?
Usually not, and it is the most common reason an Arabic version brings in no traffic. If the toggle swaps text on the same URL, there is one page to index and one title to rank. Give each language its own URL, serve both as HTML, write a separate Arabic title and description, and link them with reciprocal hreflang plus x-default.