Chinese Fonts

Making Chinese fonts is grueling as this QZ article illustrates. For websites using Chinese (like Tasty Mantou), selecting fonts is tough, too.

Thank Goodness for Chinese fonts

In the old days of computing, Chinese fonts didn’t always come with the operating system. Users would go through long tutorials just so that Chinese didn’t show up as blank boxes. Luckily, all modern operating systems have pretty decent Chinese language support, including fonts.

Usability > Beauty

At Tasty Mantou we care about beautiful typography, but we care about ease of use and ease of recognition more. That’s why we prefer modern, blocky sans-serif fonts like Pingfang, YaHei, and Heiti that have less style and flourish than fonts based on calligraphic styles like, Songti or Mingti. While we love the look of classical fonts (Kaiti is my favorite), we realize they make Chinese characters hard to recognize and decipher at smaller sizes (like on mobile devices).

Chinese Font Best Practices

Tasty Mantou Chinese also use best practices like tagging all Chinese and pinyin and applying appropriate fonts depending on a users operating system and script preference (and Traditional or Simplified Chinese). For older systems that means providing backup fonts if our preferred font isn’t available. Considering how many operating systems and fonts there are, that can get prety complex. Here’s a sample of the styles we use for displaying Chinese fonts.


  <style>
  /* Simplified Chinese */
  .zhs {
    font-family: Helvetica, Arial, "微软雅黑", "正黑体", SimHei, SimSun, "Pingfang SC", "Heiti SC", STHeiti, STSong, Hei, "Droid Sans Fallback", "Arial Unicode MS", "隶书", "宋体", "WenQuanYi Micro Hei", "文泉驿微米黑", "AR PL UKai CN"; 
    }
    /* Traditional Chinese */
  .zht {
    font-family: Helvetica, Arial, "微软雅黑", "正黑体", SimHei, SimSun, "Pingfang TC","Heiti TC", "LiSong Hei", "Droid Sans Fallback", PMingLiU, MingLiU, "新细明体", "细明体", "WenQuanYi Micro Hei", "文泉驿微米黑", "AR PL UKai TW MBE"; 
    }
  </style>

Chinese Webfonts Anyone?

I have mixed feelings about webfonts. In theory, they provide a lot of benefits:

  • consistency across operating systems and devices
  • webfonts are often nicer than fonts supplied by the user’s operating system

Sadly, I don’t expect to start using a webfont anytime soon. Webfont loading isn’t perfected yet: either the page flashes when the font switches out, or the user is stuck staring at a blank page until the font finishes downloading.

The QZ article mentions loading time, but it’s hard to fathom. The average page on Tasty Mantou has about ~300K of data. A webfont would add 5-20MB on to that payload. That’s far too big. It’s so big that mobile browsers won’t store it in the cache, which means it would need to be downloaded for every page. Even using advanced techniques like limiting the character range would require large downloads, not to mention the work that would be required to use features.

Finally, Chinese webfonts are expensive. For Tasty Mantou, a free website, the price just isn’t worth it.

Further Reading

Typography matters, especially for a language as complicated as Chinese. That’s why I took the time to research font readability, and go through the arduous process of tagging all our Chinese text so that we can add tone colors and other features. Truthfully speaking, I hope our users don’t think of our fonts, but if you do wish to learn more about Chinese fonts, you should check out these resources: