Webfonts have been a boon to web designers the world over since font-face landed in browsers in 2010. Although they add to the download size for users, the ability to accurately reflect a brand online truly transformed what was possible for web designers.
Regardless of the pros and cons, they can be essential for multilingual websites if system fonts lack the wide character set required to display your content.
In his article Webfonts on the Prairie in September 2016, Richard Fink said:
…you can’t and won’t be able to count on the local operating system of every device to support all of the languages demanded by a truly worldwide web.
That being the case, as the designers of global websites we need to consider how we can use webfonts responsibly to publish content in different languages.
Broaden the character set
If you’re just getting started with multilingual web design, you may not realise that “English-only” fonts (containing just the Latin 1 block known as ISO-8859-1) represent only a tiny subset of the huge range of Unicode characters available in modern standards like UTF-8.
This means that, to accommodate other languages, the first thing you need to check is whether your current font includes the glyphs you need. And although Latin 1 includes accents and other diacritics used in western European languages, that doesn’t mean that the font you’re using automatically includes all of those marks.
A good rule of thumb is that classic fonts from well-known foundries will usually work well. On Monotype’s fonts.com the legendary (yes, legendary) Frutiger has Latin 1 plus four supplements and Greek/Coptic ranges.
Only include the glyphs you need
Assuming the font you’re using does have a wide enough range, bear in mind that every additional glyph will increase the download size. Some services (such as Adobe Typekit) allow you to subset a wide-ranging font and include only the characters required for particular languages. This is a great idea because it means your users only have to download enough to display the language they are reading.
If you are targeting audiences speaking Chinese, Korean or Japanese as well as European languages, the character range is going to be huge. Compared to the 229 characters in Latin 1, Simplified Chinese has around 31,000 glyphs! Clearly a combined font for both character sets is out of the question and this means that webfonts have traditionally been off the table for East Asian sites.
However, in 2015 Adobe teamed up with Google’s type team to create “Source Han Sans” and released it for free via Typekit. Unfortunately with so many glyphs on board the Simplified Chinese version was impractical at almost 9Mb in size. To solve this problem Typekit introduced a new feature called “dynamic subsetting”. Amazingly, this means that Typekit dynamically inspects your page on the fly and downloads only the glyphs required. This dramatically reduces the download size to only 12Kb for a starting set of the Regular and Bold weights. Incredible work.
Don’t forget the fallbacks
Font stacks allow designers to specify fallback fonts when the chosen font is not available. This will not be news to anyone. Here is an example:
font-family: "Frutiger 45 Light", Helvetica, Arial, sans-serif;
However, what you might not have realised is that browsers render fonts character by character. This means that, if a glyph is not available, the browser will go to the next font in the stack right in the middle of a word. This is good for users because, as long as you have included broad enough system fonts in your stack, the text will at least be readable. However, from a design perspective it will give some surprising results as the browser is forced to cobble together some typography from whatever it can find. I’ve seen it, and it ain’t pretty.
Go forth and kern!