Translated text is often longer or shorter than English. How do you design and build layouts that survive translation?

Plan for text that grows, and never size UI around the English string.

How much text changes:

• German and Finnish are often about 30% longer than English.
• Short strings grow the most. A 4-letter button label like "Save" can double or triple in length.
• Chinese and Japanese are shorter, but their characters often need a larger font size and line height to stay readable.
• Arabic and Thai have marks above and below letters that can be clipped by tight line heights.

How to build for it:

• Don't give text elements a fixed width or height. Let buttons, tabs and labels grow, with min-width if needed.
• Allow wrapping to two lines, and let the layout grow vertically.
• Use flexbox and grid with flex-wrap, so items move to the next row instead of overflowing.
• Use text-overflow: ellipsis only where cutting is acceptable, and show the full text in a tooltip.
• Never put text inside images.
• Use overflow-wrap: anywhere for long words and URLs.

How to test it: run the app in a pseudo-locale that makes every string about 30–40% longer. Broken layouts show up before any real translation exists.