Kellie Kowalski

Lessons in International Typography

I used to work in an agency with a number of clients with locations throughout Asia. I learned a lot about working with CJK fonts in my time there, as I had to design in Chinese, Japanese and Korean.

Mostly, I learned that I've forgotten a lot of the Japanese I'd learned in in my 20's.

You know how some brand standards give you fallbacks for email, since emails rarely render custom fonts? Sometimes, you'll need to account for fonts that have more characters than your standard Latin or Cyrillic set. If your brand font doesn't have the character you need, it'll show up as "tofu" - that empty rectangle I'm sure you've seen from time to time.

What do you mean by CJK fonts?

CJK is shorthand for Chinese, Japanese, and Korean. We refer to CJK fonts when we need to typeset Kanji, Hiragana, Katakana, or Hangul characters.

You may have seen this referenced when packaging InDesign files - in that you can't copy them to your package folder.

The difference between Mandarin, Cantonese, Traditional and Simplified Chinese.

When I first started working on an account for resort in Macau, I didn't know anything about the two sets of Chinese characters, Traditional and Simplified.

Both are used across Mandarin and Cantonese, with the character set being determined by the location, rather than the dialect. Simplified characters are used in Mainland China, while Traditional is used in Hong Kong, Macau, Taiwan, and abroad.

Switching between the two can change certain characters. If the font for the typeface you're using doesn't have both a Traditional and Simplified version, you can end up with the wrong or missing characters.

Implementing on the web

CJK web fonts have come a long way in the past several years, but whether you should implement them depends on your project's need and audience.

Performance considerations

East Asian font families have a ton of characters. Let's take Japanese as an example (as it's the only one I have a basic level of proficiency in). Written Japanese essentially has 3 alphabets:

Hiragana has 46 basic characters, plus 68 gojūon (modified forms for different sounds). Same goes for Katakana, which primarily gets used in writing foreign loan words. That brings us to 228 letter forms.

Then there's Kanji, the characters adopted from Chinese, which has thousands of characters. As you can imagine, these font files are huge.

Google and Adobe Fonts have a few options for comprehensive font families, and while they're tempting, I've found that the safest bet is to keep sticking to the system fonts. As I've learned from designing emails, you can do a lot with a solid type hierarchy in a system font.

Unless you're purposefully doing something experimental, in which case go wild. There are some beautiful CJK web fonts out there.

Accessibility considerations

Make sure the language attribute matches the language you're working in. You'd be surprised how often I forget to do this and then find out when I run the page through an automated accessibility checker.

<html lang="ja">	

Also, CJK fonts don't have upper and lower cases, and are often monospaced. This will change your line lengths from your english language CSS styles, and have fewer characters per line.

Helpful CSS rules

One thing that's super cool when designing in other languages, is having fun with CSS rules I rarely use in my day to day english language layouts.

Like changing the type to read right to left:

.foo {direction: rtl;}

Like changing the type to read right to left and set itself vertically:

.foo {writing-mode: vertical-rl;}

This is a pretty rare usage, since Western colonialism made horizontal, left to right writing more common. As a result, horizontal left to right has become fairly common on websites, because the technology to do so wasn't around in the early days of computing and the web. However, vertical writing is still frequently used in Hong Kong, Japan, Macau, Korea, and Taiwan, so you may end up using vertical typography in these projects.

I'm by no means an expert in internationalization, or these languages, but I've been thrown in the deep end on projects that required me to get up to speed quickly. And as a type nerd, I love to geek out about letter forms.

If you're keen to learn more, this is one of the more comprehensive Japanese web font articles I've seen. I still reference it whenever I have to dust off these skills for a new project. Busuu also has a great case study on how they handle multi-language websites.

Accessibility for Designers

Next Post