We recently completed a site for a client with content in several languages. I’m no stranger to internationalization, but the majority of multilingual sites I’ve worked on used a default language and then included content in only one or two more languages. This time around, the client had content available in English, Russian, Chinese, German and a few others that also used a Latin character set.
The design comps used a web-safe non-system font called Canaro, which we set as the default in our sans-serif font stack. The client provided a Chinese language font that was unfortunately not web-safe, so we set Hiragino Sans GB and Microsoft YaHei as the other two fonts in the stack.
Hiragino is a beautiful font and the latest version of OSX El Capitan does some pretty nifty stuff with it when you’re typing in Japanese (so I hear). However, we started to get bug reports that the Russian language site was looking a little odd in Safari on OS X.
At first, I thought it was an issue with the dynamic text resizing in El Capitan, since I hadn’t duplicated the issue in Yosemite. However, some major cache clearing ensued and I was finally able to duplicate it and quickly figured out (thanks to Google) that while Hiragino Sans includes Cyrillic characters, they are kerned at the width of the kanji blocks.
Kerning is the word for the space between letters. If you know anything about typography, you might say that kerning is the word for the relationship between letters (don’t even get me started on ligatures).
Changing the kerning via CSS wasn’t really an appropriate solution for this issue; it’s resource intensive and is better used sparingly on larger text like headlines.
Adding more fonts via @font-face wasn’t really ideal either, especially considering the difficulties we’d had with custom fonts in non-Latin alphabets not being web-safe.
So I changed the font stack.
.body {
font-family: "Canaro", sans-serif;
}
.body.ru {
font-family: Helvetica, Arial, sans-serif;
}
.body.cn {
font-family: "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
Now we’re relying on system fonts for Russian and Chinese and the custom font for any language using a Latin character. In this instance we’re using WPML for internationalization, but the two other WordPress plugins I’ve used for this also set the country code as the body class, so it makes styling for specific languages easier.
That’s it! One weird edge case I may not encounter again, but it’s worth a mention if you’re developing sites with multilingual content that uses characters other than the Latin alphabet. Windows and OSX offer system fonts that display beautifully in any alphabet, but you may need to define different fonts based on the language being used.