A button that reads “Save” in English becomes “Speichern” in German and “Guardar cambios” in Spanish. If your layout was designed around the English length, translation breaks it — usually after launch, in a market you can’t easily test.
How much does text grow?
Short strings grow the most. IBM’s long-standing guidance: strings up to 10 characters can grow 100–200%, 11–20 characters around 80–100%, and paragraphs over 70 characters about 30%. German averages roughly 30% longer than English; Spanish and French around 15–25%.
The CSS that breaks
- Fixed widths on buttons, tabs, labels and badges (width: 120px).
- white-space: nowrap combined with overflow: hidden, which silently cuts text off.
- Nav bars that assume every item fits on one line.
- Table headers with fixed column widths.
- Building sentences from pieces (“You have ” + n + “ items”) — word order changes between languages.
Resilient alternatives
- min-width instead of width, and allow buttons to grow taller (min-height, line-height ~1.2).
- flex-wrap on navs and action rows; horizontally scrollable tab bars instead of squeezed tabs.
- overflow-wrap: anywhere plus hyphens: auto with the correct lang attribute, so long German compounds break cleanly.
- Stack labels above fields when space runs out instead of giving labels a fixed width.
- Truncate with an ellipsis only for user data (names, file names) — and expose the full text.
Catch it early with pseudo-localization
Before translations exist, replace English with accented, padded and bracketed text: “Save” becomes “⟦Šáṽé lorem⟧”. Clipped brackets reveal truncation, unaccented text reveals hard-coded strings, and the padding simulates expansion. Run it in your design reviews and visual tests.
Don’t forget
- Dates, numbers and currencies change format by locale — use Intl.DateTimeFormat and Intl.NumberFormat.
- Right-to-left languages mirror the layout; use logical properties (margin-inline-start) from day one.
- Set the lang attribute on the page (and on any mixed-language fragment) so screen readers pronounce text correctly.