Notes on Font Stacks for CJK
Working on a client project, we needed a font stack that would work for Chinese, Japanese, and Korean, (aka CJK) along with all the usual Latin locales.
The client’s previous approach was to simply strip the entire font stack for CJK locales, letting the browser handle it. This meant a serif style. Times New Roman, you had your time to shine.
In researching how others handle it, I noticed that most sites provide individualized font stacks for each locale. There’s a Chinese font stack, there’s a Japanese font stack, and so on.
With multilingual projects like this—especially with English being the primary language—these Asian locales would likely have some Latin language (English, in particular) alongside them. In which case, using a font stack that ignored Latin would mean losing the consistency across those locales.
This is the font stack I ended up going with. I haven’t put it through its paces, so don’t take it as gospel. This is more documenting what I did for my future self.
/* Latin stack */
"Open Sans", "Trebuchet MS", Verdana, Tahoma,
/* Chinese Stack */
"Microsoft YaHei New", "Microsoft Yahei", SimHei,
/* Japanese */
"Hiragino Kaku Gothic Pro", "MS UI Gothic", "MS PMincho",
/* Korean, et al */
sans-serif;
Potential Problems
As I write this, I recognize that there are issues with this font stack.
It hasn’t been properly reviewed
Unfortunately, I couldn’t get many people to review the content to ensure that it looked and felt natural. Like most user experience issues, testing is the best way to surface problems.
My knowledge is so limited that while I know there is simplified and traditional Chinese writing, I couldn’t tell you which is which. (I think the font stack is for simplified.)
No Korean fonts specified
Mostly, I was happy with the fallback font that was being displayed and those that could read Korean didn’t raise any alarm bells with what they saw.
Potential CJK conflicts
There are some characters that are used across all of CJK but have slight differences in how they’re drawn. Thus, the font stack will prefer the Chinese fonts over Japanese or Korean. This also means that there could very well be font style changes as it renders some characters using one font and other characters using another font. This was the issue that I was most on the lookout for and chose a font stack that minimized this issue.
No localized fonts included
Based on my research, I found that there are localized names for some fonts. For example, Microsoft Yahei has 微软雅黑. I didn’t know what all the alternative names were, so I left them out. Fingers crossed that decision doesn’t come back to bite me.
Possible Alternative
As this project progresses, we’ll see if this font stack works out okay. The alternative would be to go the route that others have taken: split the font stack for each locale.
In which case, I’d still want to specify the Latin set first and then the Chinese, Japanese, or Korean second. (Most Latin fonts don’t include CJK but most CJK fonts include Latin.)
Other resources
Here are the resources I used: