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.

  /* 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"; 

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:

Learning to write characters can be really hard. As part of Tasty Mantou’s goal to be the best online Chinese Dictionary, we created custom animations for over 10,000 Chinese characters.

The animations are great for learning the correct stroke order for just about any Chinese character and they work on mobiles, tablets, and desktops.

Home Page Character Animations

The first place you might see a character animation is on our home page where they look like this:

Just click on the character and its animation will start.

Definition Page Animations

You’ll also find animations when you search for Chinese words. If you searched for , then you’ll end up seeing a a large-font version like the one below on it’s definition page.

When you see a character like this tap it, click it, or hover over it to see the animation.

Pretty cool, right?

Daily Chinese Characters

Finally, you’ll find our character animations on our Daily Chinese (where they started out). If you’re looking at the Chinese word of the day, then animations will work just like they do when looking at a definition page.

If you’re on a Daily Chinese Character page, then you’ll see an animation that looks like the one on the homepage (plus a bunch of controls to view each individual stroke).

  • /

Tell us what you think

Do you like Tasty Mantou’s character animations? Send us a note. Or if you notice any mistakes in an animation, please let us know. We’re constantly tweaking and fixing these characters.

;tldr Tasty Mantou’s dictionary is faster and has more features than before.

Tasty Mantou’s dictionary just got an upgrade.

What is 疯狂凤凰

疯狂凤凰 (Say that 10 times fast) is the 6th version of my Dictionary API service. It’s replacing 恶狗, the 5th iteration of my Dictionary API service.

At the time, 恶狗 was the most impressive Dictionary API I had ever created. It allowed the usage of multiple dictionaries and let me create simple plugins that improved results (e.g. a number plugin that helps you look up the definition for any number).

A few months back, I started taking a close look at Tasty Mantou’s performance. One of the big takeaways: Tasty Mantou could be pretty slow. Originally, some pinyin searches, like ‘ji’, took over 15 seconds. Crazy, right?

In March, I spent a weekend on speed improvements and made 恶狗 1x - 8x faster. But that still meant pinyin searches would still take 1 - 2 seconds. Much better, but not good enough.

As I started thinking about how to improve things, I realized I’d need a better, simpler architecture for the Dictionary service.

That service became 疯狂凤凰, the last dictionary service I plan on creating. It’s faster, better tested, and easier to improve.

Performance Comparison

I decided to put 疯狂凤凰 to the test.

Search Term 恶狗 Response Time (ms)疯狂凤凰 Response Time (ms)

Chinese based searches are 18.1x - 59.6x faster. Pinyin based searches are 20.5x - 48.5x faster. The slowest searches for 疯狂凤凰 are faster than the fastest searches for 恶狗!

This speed increase has had a significant impact on throughput, too. With 恶狗, a typical deployment could handle ~ 8 users per second. 疯狂凤凰 can handle ~ 50 users per second.

Some Notes about Response Time:

  1. Chinese words vary on how complex the definition is. Words with definitions or more example sentences take the API longer.
  2. Pinyin searches always take longer than Chinese searches because they use two indexes, one for pinyin and then one for Chinese.

What can you look forward to?

Things will be faster. That’s good for everyone. The extra speed will allow Tasty Mantou to expand its dictionary services beyond this website. (One area I’m currently looking at: dictionary chat-bots.)

In the coming months, I’ll be adding another major feature to the dictionary based on some secret features of 疯狂凤凰.

Tasty Mantou Chinese has one goal: become the best online Chinese Dictionary ever created.

If you are learning Chinese, I know you’ll find the site useful. If you like (or love) Tasty Mantou, then send us a message. Heck, if you find a mistake on Tasty Mantou, you can let us know, too!

Thanks and good luck learning Chinese.