Most bilingual sites in the region are built by designing in English and then flipping the result. The mechanical part of that works — modern CSS handles direction well. What does not survive the flip is everything typographic, and that is what makes Arabic pages feel like a translation rather than an original.
Arabic needs different type settings
Arabic letterforms carry more detail than Latin ones at the same nominal size, and they sit on a different vertical rhythm. At the point size that reads comfortably in English, Arabic tends to look slightly small and cramped. Line height that looks generous in Latin is often tight for Arabic, because ascenders, descenders and dots need vertical room. Negative letter-spacing — routine for tightening Latin display headings — actively damages Arabic, where letters connect and cannot be pulled together.
- Increase Arabic body size slightly relative to Latin at the same nominal setting.
- Increase line height for Arabic paragraphs; tight leading damages legibility quickly.
- Set letter-spacing to zero for Arabic — never inherit a negative Latin value.
- Do not synthesise italics. Arabic has no italic tradition; use weight for emphasis instead.
Text length changes the layout
Arabic translations of the same content frequently differ in length from the English, and the difference is not consistent — some phrases contract, others expand. A navigation bar, button or card designed to fit English exactly will break somewhere in Arabic. Layouts need to be tested with real Arabic content at the narrowest supported width, not with placeholder text of a convenient length.
Numbers, dates and mixed content
Numbers, Latin brand names, email addresses and URLs remain left-to-right inside right-to-left text. Without isolation, the bidirectional algorithm reorders characters around them and a phone number can render with its segments in the wrong order. Wrapping such runs in an isolating element is a small change that prevents a class of bug that is easy to ship and embarrassing to discover.
Directional icons
Icons that encode direction — next arrows, back chevrons, progress indicators — must mirror. Icons that do not encode direction should not: a mirrored clock, magnifying glass or logo simply looks wrong. This distinction has to be made icon by icon, which is why blanket transforms on an icon set produce awkward results.