I was recently working on a website design and I naturally based my work on the content supplied by my customer.

I knew from the beginning that the site will be accessible in different languages but didn't think it would be a big issue.

Finally, it appears that while the majority of the site looks OK in other languages (like longer paragraphs of text, or menu items), some parts are not displaying well at all. This is due to the different length of words/phrases between the different translations.

I would like to know how you generally handle such cases. Is using different font sizes a viable option? What can be done early in the project to avoid such problems?

2 Answers 2


Localization should be taken into consideration at the beginning of the project. That means:

1) Expanding layout wherever possible or use "More" link. Depending on the source and the target language, the text length can vary by as much as 50% legitimately. In the case of English to common EU languages, the translation is usually 10 to 30% longer. This is legitimate and should be expected.

If you like a fixed layout, you can cut after a certain number of words (use characters for languages like japanese or Thai which have no word delimiters, and fade out the last few charactes because you can't predict if you will be in the middle of a word/concept) and add a "more" link point to a separate article page

2) Plan for plenty of white space then determine the max length (in characters) for menus, boutons, and other small strings.

When ordering the translation, these strings must be extracted and translated separately. Usually, these strings are put in an Excel file and the max length is indicated in a cell beside it so that the translator knows that there is a size limit and can work with it.

| Item type  | Length       | Source (EN-US)    | Target -FR-FR   | target chars|
| Menu       | 15 chars     | Home              | Accueil         |  7          |

If you can, write a small macro which counts the characters in the target and displays it in a separate column. This will help your translators keep to your limits where possible

The translator will do his best, but languages are what they are and he can't invent words, so if you limit the space too much, the translator will have to use abbreviations or acronyms which are often rather obscure, use the source word (not usually understood) or a related word that may be completely off the mark.

3) Keep in mind that just because a word is short in English it does not mean it will be short in the target language. For instance, "car" becomes "voiture" or "automobile" in French. It can be abbreviated to "Auto" in most EU languages, but occasionally, there just isn't a short translation in the target language, so irrespective of the length of the English word, allocate a fair number of characters for the translation. As a guideline, the average length of a word in English is 5 characters. In French 5.13. German, 6.26. Russian 6.36. Those are averages. If you are tight in space, I would recommend to assume 10 characters (for a single word string like a menu).

At the end of the day, the translator can only do so much. Either the word exists or it doesn't, so be flexible right from the beginning and use plenty of padding/white space in your design.

In your case, it is of course too late for preparation. Try to fit the text as much as possible without damaging your design (a bit small is not an issue, but too small, of course...), make a list of the items which definitely can not fit in your design and send them back to the translator mentionning the length limit (and of course pay him for the extra work, it wasn't his mistake)

  • @user568458 Thanks. Sometimes, being a translator helps. ;)
    – Sylverdrag
    Oct 24, 2012 at 12:42

Sylverdrag's answer is way better than this, but I wanted to chip in something that can work as a safety measure:

I had a nav menu where I used Calibri, which is typically a bit narrower than other fonts. I realized that if people didn't have that, the spacing of some of the fonts down the stack could be less than ideal. So I used jQuery to get the width of each menu item, and if one was too wide, I knocked the font size of every menu item down enough so that everything would fit and look nice.

JavaScript penetration is usually estimated to be in the high nineties, so it's not a solution for that small percent that would speak a language with long words and not have JavaScript on. But like I said, it's more of a fallback thing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.