A type stack that survives translation

German is longer than English — roughly a third longer in running text — and it hides that length inside single words. A compound noun cannot be wrapped politely by a browser that has not been told which language it is reading.

Five rules

1. Never set a fixed height on anything that contains a sentence.
2. Let headlines wrap. Two lines in English will be three in German, and three lines are not a bug.
3. Set the language attribute on every page, then let the browser hyphenate. Without it, hyphenation is either absent or wrong.
4. Give buttons and navigation items room to grow by a third.
5. Test the longest word in the catalogue, not the average one. The average never breaks a layout.

A button label is the worst case in any interface: short, centred, and usually boxed in by a fixed width somebody chose while looking at the English word. Two words in English regularly become one very long word in German.

Design the longest label you can imagine, then add four characters.

Numbers, dates and money

A thousand and a half is written differently in the two languages, the currency symbol changes side, and the date order changes with it. None of this is typography, but all of it lands in the same paragraph you are setting, so it is worth agreeing on the formats before the first page is written.

What survives all of this is a plain, boring stack: one serif for headlines, one sans for text, one monospace for labels, and generous line height. Nothing narrow, nothing condensed, nothing that only works in one language.