Designing for text expansion in translated pages

How much text grows

The W3C article on text size in translation reproduces average expansion figures from IBM's guidelines for global design ¹:

The pattern matters more than any single number. A full paragraph grows modestly in proportion, but a two-word button label can double or triple. The article adds that the smaller the English text, the more likely it is to be squeezed into a small space ¹, which is exactly where buttons, tabs and menu items live.

These are averages across European languages, not predictions for your text. They are useful for setting design allowances, not for promising that a German page will be a particular length.

Where layouts break

Expansion causes trouble in predictable places:

• Navigation bars. Five English menu items that fit in one line may need two lines in German.
• Buttons with fixed widths. A label that fits "Book now" overflows with a longer equivalent.
• Cards with fixed heights. Summaries that end neatly in English spill over in French.
• Headings set very large. German compound words cannot break between letters without hyphenation, so a single long word can force a heading wider than a phone screen.
• Tables and comparison grids. Column headers grow and squeeze the data below.

The language demo shows six short interface phrases side by side, with the character count and percentage change against English for each, so you can see the effect on real labels.

Layout habits that absorb growth

Let containers grow with their content

Use layouts that wrap and stretch: flexible boxes that allow items to move onto a second line, grids whose rows grow with their content, and cards whose height follows their text. Fixed heights and fixed widths are what turn longer text into overflow.

Size buttons by padding, not width

A button with generous horizontal padding and no fixed width fits any label. Give it a sensible minimum width so short labels do not look cramped, and let it grow.

Allow hyphenation for long words

Setting hyphens: auto on body text lets browsers break long words using the language's hyphenation rules, provided the page declares its language with lang. That is one more reason the language attribute matters beyond accessibility. For headings, test whether hyphenation reads well or whether a smaller font size on narrow screens is the better fix.

Keep words out of images

Text inside images cannot be translated by changing a string, and it does not reflow. Where an image must contain words, plan one image file per language and record which files belong together.

Separate content from presentation

The W3C advice is to separate presentation and content so that font sizes and line heights can be adapted for translated text ¹. In practice that means styles that can be adjusted per language where needed, such as a slightly smaller heading size for German, without touching the content or the templates.

Test with the longest language

Design reviews done with English text alone approve layouts that may fail in production. Once the first translated text exists, run the review again with the longest version of each page. Before translation, a useful stand-in is to take the English text and lengthen it according to the table above: double short labels, add a third to paragraphs. It is crude, but it exposes the fixed widths.

Check these specifically:

1. The main navigation at every breakpoint.
2. Every button and tab label.
3. Card grids on the home page and section pages.
4. Headings on a narrow phone screen.
5. Form labels, especially beside checkboxes.
6. Error messages, which can be long and appear in tight spaces.

Shorter languages too

Expansion is the concern when English text becomes German, French or Italian, but text can also shrink, for example from German into English. A layout tuned to long German headings can look sparse in English. Flexible containers handle both directions; designs that assume a fixed length fail in both.

When to shorten the source instead

Sometimes the right answer is to rewrite the English. If a button needs four words in English, it will need more in German. Short, plain source text translates more cleanly and leaves more room. Agree length limits for interface strings before translation, and tell translators about them in the handover; our handover guide explains what to send.