Mirroring an English layout is not the same as designing in Arabic. A short checklist of what to flip, what to leave alone and how to set Arabic type.
Most Arabic versions of apps are built the same way: take the English design, hit mirror, ship. The result reads almost right, and almost right is what makes users feel the product was not made for them. Here is the checklist I run on every RTL screen.
Flip anything that shows direction or order
- The whole layout: navigation, sidebars and the reading order of cards start from the right.
- Back and forward arrows, chevrons in lists and the arrow inside a 'Next' button.
- Progress bars, steppers and sliders. Progress grows from right to left.
- Icons that point or move, like send, reply, undo, a list with bullets or text alignment icons.
- Horizontal carousels and tab order.
Leave alone anything that shows the real world
- Media controls. Play, fast forward and rewind follow the direction of tape, not of text.
- Clocks and circular progress that mimic a clock.
- Logos, brand marks and product photos.
- Checkmarks, a phone handset, a magnifying glass and other icons with no direction.
- Numbers. Phone numbers, prices and dates stay left to right even inside an Arabic sentence.
Set Arabic type on its own terms
- Arabic looks smaller than Latin at the same point size. Go 1 to 2px larger for body text.
- Give it more line height: around 1.6 to 1.8 for body, 1.2 to 1.4 for headings, so dots and marks above and below the line do not collide.
- Never add letter spacing. Arabic letters connect, and tracking breaks the joins.
- There is no uppercase. Labels that rely on CAPS in English need size or weight in Arabic instead.
- Pick a family made for screens, like IBM Plex Sans Arabic, and pair it with a Latin font of a similar weight and x-height.
Watch the mixed lines
Arabic interfaces are full of English words: brand names, emails, code. When a Latin word sits at the start or end of an Arabic line, punctuation and numbers can jump to the wrong side. In code, wrap those runs in a bdi element or give them dir='ltr'. In Figma, check every mixed string by reading it out loud from the right.
Do this once as a checklist and it becomes habit. Your Arabic screens stop looking translated and start looking designed.