Your type scale doesn't survive the switch to Arabic
Same numbers, same tokens, wrong result. What actually breaks when a design system has to carry two scripts.
4 min
Typography
When I built the text styles for my site, I started with one set: shared sizes, shared line heights, swap the typeface between languages. It seemed clean. Not a single page survived it.
Optical size isn't numeric size
Arabic at 16px looks smaller than Latin at 16px. The ratio of letter height to overall size differs, and Arabic carries finer detail in its dots and joins. The result was Arabic that looked faint in the exact layout where the English looked right.
The fix wasn't scaling everything up, it was building two scales. Mine settled around one step of difference at body sizes and almost nothing at display sizes, because the problem shows up most in small text.
Line height is a separate problem
Arabic needs more vertical room — not for aesthetic reasons, but because its letterforms extend further above and below the line than Latin does. A 1.5 line height is comfortable in English and cramped in Arabic. I took body copy to 1.8 and kept headings tighter, where lines are short anyway.
Weights don't map
500 in a Latin typeface is not 500 in an Arabic one. I tested pairs by eye until they looked equivalent, and ended up with numerically different weights across the two languages for styles that share a name. It offends the logic and satisfies the eye.
What stayed shared
Color, spacing, radii, borders. Everything that isn't a letterform stayed single. The split was typography alone — and that alone justifies two sets of styles instead of one.
The takeaway
A bilingual design system isn't one system that swaps fonts. It's two systems sharing everything except type. Once I accepted that, the pages stopped feeling like one version was a translation of the other.
Previous article




