German text expansion.
German text is markedly longer than the Turkish and English counterparts of the same content, and in multilingual design that is a constraint that must be measured.
This is the most concrete technical problem of a multilingual design: the same sentence takes different space in every language. German, with its compound-word structure, produces especially long words, and those words cannot break at line ends.
The problem shows in three places in the design: headings spill onto more lines than expected, button labels do not fit their boxes, and table columns overflow. None of the three is visible in a design tested in one language.
A measured compensation
On this site the problem was handled by measurement. The typeface used in headings has a width axis — the letters can be narrowed without breaking the design. For German headings that axis is set to a narrower value.
The value was not chosen by guess: the Turkish and German headings were rendered at the same breakpoint and their line counts compared, and the highest width value at which the German heading stayed at the same line count was taken. The result stands as a constant in the token file.
The verification suite measures it besides: the German home page is opened at 1440 pixels wide, the hero heading’s width value is read, and the expected compensation is confirmed applied. If the value drifts one day, the test turns red.
German text is long; not measuring that means accepting the design breaking in German.
In designs without a width axis
If no variable font is used, the same problem is solved by other means, and each has a price.
- Shrinking the size — the heading size is lowered per language. The simplest, but it weakens the visual hierarchy.
- Freeing the line count — the heading spills to three lines instead of two. The layout must be ready for it.
- Shortening the text — the translation is written shorter. There is a risk of losing meaning.
- Word breaking — soft hyphens for long compound words. They must be marked by hand.
- Growing the box — for buttons and labels; the layout must be flexible.
The fourth item works especially well for German: a break point can be marked inside long compound words and the browser breaks there when needed. A long word without a break point overflows its box.
How to test
Expansion problems become visible only when tested with real text. A design made with placeholder text breaks when the translation arrives — and the breakage is usually noticed after release.
The practical method is using the longest language’s real text at the design stage. If German exists, test with German; if it fits, the others certainly fit. This should be done at the narrowest breakpoint and with the longest content.
On this site the verification suite measures text clipping in three languages separately: that no text in any language overflows or is clipped from its box is audited on every run. A layout tested in one language with the others assumed is not accepted.
Which languages expand how much
Expansion is not unique to German, and knowing which languages behave which way while designing eases the space planning. The general tendencies are these.
- German — lengthens markedly; compound words cannot break and stay in one piece.
- French and Spanish — lengthen moderately; the sentence structure is more roundabout.
- Russian — lengthens, and additionally requires a different alphabet.
- Turkish — close to English; suffixes lengthen it, but there is no compound-word problem.
- Chinese and Japanese — SHORTEN markedly; but the character height differs and the line spacing needs adjusting.
- Arabic — moderate; the real issue is not length but DIRECTION.
The fifth item produces a problem in the opposite direction, and a little-known one: shortened text looks sparse and unbalanced in a box designed for long text. Shrinkage is as much a design problem as expansion.
The practical approach is testing the layout with both the longest and the shortest language. All the languages in between stay within those two ends and require no separate check.
On this site all three languages are Latin-based and the length range is narrow; the longest is German, the shortest English. The verification suite measures text clipping in all three separately — testing in one language and assuming the others is not accepted.
What to do at the design stage
The cheapest solution to the expansion problem is taken at the design stage, and its cost is zero: building the layout not to a fixed text length but in a way that permits flexing.
- Do not use fixed-height boxes — when the text lengthens, it overflows.
- Do not assume a single line — a heading can be two lines in two languages and three in the third.
- Do not align side by side — two columns end up at different heights in different languages.
- Do not use abbreviations — abbreviations vary by language and do not translate.
- Test with the longest language — if it fits, the others certainly fit.
- Place soft hyphens — for long compound words.
The second item is the most often broken: when a heading fits two lines in Turkish and the layout is built for two lines, the German third line spills into the section below and the alignment breaks. The layout must be independent of the line count.
On this site the stage headings are built on flexible height, and for German the width axis is narrowed. The two measures together keep the same heading at the same line count in all three languages — and the verification suite measures it.
A principle to close: text length is not a content matter but a design constraint. Asking the translator to “write shorter” is sometimes right but usually sacrifices meaning. The layout flexing is always a better solution than the text being squeezed.
A final testing suggestion: there is a practical way to get the longest translation at the design stage — machine-translate the source text into the target language and measure the length. The quality may not suffice, but the LENGTH comes out realistic, and for a layout test that is enough.
That makes testing the layout possible before the real translation arrives — and layout problems caught at the design stage are nearly free to fix.