Published by

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):

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.

MediaWiki’s multilingual support is great and we’re using it for the menu, but for the page content we wanted to have both the English and Chinese displayed at the same time. The simplest solution was to have these exist in the same text field, but this meant that I couldn’t use CSS to separately style the two types of content. I ended up using Javascript to wrap every emphasised character within the range \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.

¯\_(ツ)_/¯

Side note:

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.