How to handle text in limited space with multiple languages and long words

Question

We have english and german versions of a few pages, and the issue I've come across is that often, there are german words that have many more characters than their english translation. Laying the pages out in a way that fits both seems almost impossible due to length of some words, or translation length adding extra words. See attached examples.

I could shrink font size based on language, I suppose, but that seems to be cutting off my nose to spite my face...

English Version

German Version

Answer 1

There is no silver bullet here, but from my experience there are only two solutions:

1. Make a responsive layout. All elements are "rubberish", can adjust to the content without breaking the design. Layout is adaptive to browser page size.
2. Work with translators to shorten the words. When translators are not clear on boundaries they come up with long words. If you indicate the max number of characters allowed they will start coming up with common abbreviations, shorter words etc.

Combining both may help.