Designing for Multilingual Content

by NoD Staff | August 5, 2008

When designing for multilingual content there are a number of factors that will affect your composition and typographic choices. Knowing these ahead of time allows for a smooth transition of content from one language to another. Whether it is print or web, it is best to know exactly which languages you will be working with, and how the viewer will encounter these language options before you begin with the layout. We will go into web-specific issues later, but first, here are a few key universal points to keep in mind when determining the layout and typography for your composition.

Typeface Selection:
If you are working primarily with the Latin alphabet, your concern should be that the typeface you select has the accents available for French, Spanish,German or other languages as required. If content will be translated into Russian, you need to look for a typeface with a character set that contains the Cyrillic alphabet, if it is Greek then the Greek alphabet, and so on. Watch out, because a number of the display fonts available from boutique foundries will not have this amount of language support!

FontShop.com is a great place to start because it provides fonts in a wide range of character sets and also offers a preview of the full character set before purchase. You may want to search exclusively for OpenType fonts, as these are designed to perform best with multilingual font sets.

Text Lengths:
The length of your copy will vary dramatically between different languages. This can have a potentially disastrous effect if it is not take into consideration ahead of time. As an example, we can look at character counts for the word “Welcome” in 6 different languages:

We see here that one line of text in Chinese, can easily become three to four lines in Russian. So a design which will be used for both these languages should accommodate a certain amount of growth in the text regions before the text will run into other elements on the page.

Text Styling:
Text alteration like kerning, italics, or bolding can dramatically affect legibility, particularly with Arabic or Asian characters. Unless you have someone around who can check whether the text is readable, it is generally best not to modify or overly style these languages. Text alignment is also an issue with Arabic in particular, since it flows from right to left and
thus requires a complete reversal of composition for accommodation from an English based layout.

Typographic Puns:
Turning the dot of the “i” into a flame for the word “inferno” is great for English, but not so much for Chinese “地獄”. One could argue that these puns should generally be avoided in design compositions, but in the instance of multilingual content they should specifically be avoided.

Typeface Selection for the Web:
System text, system text, system text. The more you use default fonts installed with operating systems, the less you will have to prepare text headings as images. If you are preparing a site in 5 different languages, those heading images can become pretty bothersome. Therefore it is always best to specify a system font wherever possible: headers, subheaders, menu items, captions, etc.

Character Encoding for the Web:
This is a vast topic that goes beyond the scope of design considerations, however the most basic bit of advice on multilingual web content is to encode your pages as UTF-8 (Unicode). With this encoding, most characters will show up for most people. One day, this encoding may allow all characters to show up for all people. But until that time, this is the best encoding we have. To use UTF-8 encoding, simply place this block of text in between your html tags:

This post was authored by NoD staff. Notes on Design is a design industry blog sponsored by Sessions College for Professional Design.

NoD Newsletter

Enhance your inbox with our monthly newsletter.
NOD Newsletter - Divi Bar
Sending