Room for translations

When you're designing a product that will be translated into multiple languages, there are a few things to consider...

Translations shrink and expand

The number of words and characters will change, as well as the width of the individual characters. Use the slider to see the same word translated between 10 different languages.

Stay flexible, let them wrap

The best way to handle this variability is to accomodate text wrapping to multiple lines. Do this smartly, and you can preserve much of the aesthetics and symmetry you intended with your original design. In the following design, we keep the card heights the same.

But in some UI, you might want to avoid text wrapping

In this case, we want to keep our button labels uniform and on a single line. Unfortunately, our primary button in yellow wraps to two lines in a few languages.

An ellpsis to keep things tidy and on one line is tempting – but don't do it. This can cut-off the copy early and obscure the meaning.

Instead, rethink the UI

But how do you know that you might have a space issue in the first place?

If you're designing a UI that is rigid and you want to avoid any wrapping (e.g. a horizontal main navigation), your best bet is to do the following:

• Leave about 100% extra space. This seems like a lot, and it's much more than the rule of thumb you might have heard in the past that mentions '50% extra space', but this is closer to what I saw in my test data (see Appendix below).
• Test in Russian and German early. Russian and German translations run long, and also include lengthy words that might require hyphenating in tight spaces. Use Google Translate or find a plugin for your design application that will let you preview your design in a different language.

Use these as a starting point when you're designing your UI. But remember that translation lengths vary wildly. You need to work with your translators to communicate space constraints up front, and then once the translations are in place, there is no substitute for testing.

---

Appendix

This table collects a sampling of words and phrases I found repeated across popular sites. In each column of the table below, we take the word and translate it in to ten different languages. These are then sorted from shortest to longest.

The color bar shows the difference between the length of the English translation and the longest translation. The percentage is measured in pixels. Other discussions usually draw conclusions using character counts, but that doesn't take into the character widths and letter-spacing that affect the final rendering.