Chinese web font research
Did some research on Chinese web font best practices a while back when working on Memory Machine for Tyler Coburn + Asia Art Archive with Luke Gould. It was an interesting challenge. This was my overall takeaway from the research:
- Self-hosted fonts are out, the font files are prohibitively enormous due to the number of characters
- The Great Firewall can cause issues with most font services, so no Google Fonts or Typekit
- If you need to render a mixture of Latin and Chinese characters and want them to use different fonts, the font stack structure and naming is critical (see article by Kendra Schaefer for more info)
- Bold and italic should never be used for emphasis on Chinese characters since it distorts their meaning
A few resources I found useful (would like to find more):
- ASK DN: Where to find Korean, Japanese and Chinese fonts? (Designer News, August 2016)
- Complete Beginner’s Guide to Chinese Fonts (Envato Tuts+, March 2015)
- A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese (Kendra Schaefer, June 2012)
- List of CJK fonts (Wikipedia)
This is the font stack we ended up with:
font-family: "Cutive Mono", Courier New, Courier, "STYuanti-TC-Light", "PingFang TC", "Microsoft JhengHei", "Microsoft JhengHei UI", monospace;
The emphasis issue was harder to sort out. We wanted to retain the default italic font style on Latin characters within
em tags. Italics aren’t appropriate for Chinese, so at minimum we wanted to reset the font style to normal for Chinese characters. Ideally, we also wanted to apply an emphasis mark.
\u3400-\u9FBF in a
span so that they could be styled individually.
In terms of CSS, I considered using the
text-emphasis property (see MDN web docs) but we weren’t pleased with the overall look, and I wasn’t happy with the browser support. I ultimately ended up applying an absolutely-positioned pseudo element with
content: "\00B7"; before each span.
See an example of the result on the Memory Machine About page.
Not necessarily an ideal solution, but OK considering the parameters.
Memory Machine was my first experience working with MediaWiki. It was interesting, and a little weird. A cool platform of course, but extremely fiddly IMO to skin.
It was also my first experience developing something A) for a primarily non-western audience, B) hosted on non-western servers, and C) that I didn’t deploy myself. It’s pretty slow to load here in London, which I’d imagine has to do with the server location. Makes me feel like I need to look in to CDNs much more seriously.