Designing for Internationalization: Text Expansion and Layout Flexibility

We underestimated text expansion badly on our first internationalized project, a European retail app. English labels averaged five to eight characters; the German translations frequently ran 40% to 60% longer, and several button labels wrapped to two lines or got visually clipped. The fix wasn't a translation problem, it was a layout problem — we had designed fixed-width buttons and pills around English word lengths and never tested against longer language variants.

Our working rule now is to design primary UI text containers to comfortably hold roughly 35% more characters than the English source, since German, Finnish, and several other common target languages routinely expand by that much or more. For anything even tighter — tab labels, nav items, badges — we test against German specifically during design review, since if a layout survives German it typically survives everything else in our client base's usual language set.

Right-to-left languages required a different kind of rework than we expected. It's not just mirroring text alignment; icon direction matters too — a 'forward' arrow, a chevron indicating expand, a back button all need to flip, but icons with no inherent directionality, like a search magnifying glass, should stay put. We built an RTL checklist per component rather than assuming a blanket CSS mirror would handle it, because a blanket flip mirrored several icons that shouldn't have moved and looked obviously wrong to Arabic-speaking testers.

Date, number, and currency formatting caused more support tickets post-launch than actual translation quality did. We now treat locale-aware formatting as a design system token, not a late-stage engineering detail — date components in Figma carry explicit locale variants so a designer reviewing a screen for the Japanese market sees YYYY年MM月DD日 in the mockup, not a US-format placeholder that ships broken.