Chinese language tips for web design

Standard

Update 2010, Oct 26 – New discoveries, much better font reference confidence

Recently I needed to work with some Chinese and we had tons of trouble trying to figure out which fonts to use and how to specify them in CSS. After a lot of detective work and comparing long font lists we found some basic font choices that should work on both PC and Macs that have Chinese language packs active. The process was PAINFUL…

After several months, this is coming up again as we define our style guide. I found a new article which describes and provides screen-shots for 5 common mandarin fonts. He lists in order,

  1. 宋体, Song Ti, a serif font very common in site font declaration
  2. 黑体, Hei Ti, a sans-serif. (We picked this one for body text)
  3. 幼圆, You Yuan, a rounded font like comic-sans without the stigma.
  4. 隶书, Li Ti, a brush script.
  5. 微软雅黑, Microsoft Ya Hei a sans-serif, supposedly not fully supported yet designy

Some [updated] Chinese Website tips:

  1. Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters. font-family: futura, arial, Hei, “微软雅黑”, “宋体”, sans-serif;
  2. Standard chinese sans-serifs are: 黑体 (Hei ti), 微软雅黑 (MS Yahei)
  3. The standard chinese serifs is: 宋体 (Song ti)
  4. Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html” charset=”utf-8″>
  5. My final recommendation for a sans-serif font stack is: font-family: arial, 黑体, 微软雅黑, 宋体, sans-serif;

References:

11 thoughts on “Chinese language tips for web design

  1. Great article – however perhaps you should clarify that the fonts are for simplified Chinese.

    For Traditional Chinese (Taiwan, Hong Kong and Macau) – the css stack could include:
    + “微軟正黑體”, “Microsoft JhengHei”,
    + “蘋果儷中黑”, “Apple LiGothic Medium”
    + “儷黑 Pro”, “LiHei Pro Medium”

  2. Nick

    Hi Yukiko,

    Thanks for posting such a helpful article. It helps me a lot understanding how font stack works for Chinese character.
    Just got one question for you. You recommend arial comes first in the font stack but because arial doesn’t support Chinese the characters will be taken from the browser’s default font instead of passing to the second font family in the font stack. In other words, in the font stack mentioned, “黑体, 微软雅黑, 宋体, sans-serif” will never gets picked up!
    I am still testing to prove my theory so your comment will be more than welcome!

    • Hi Nick,
      The characters that aren’t available in arial should be picked up by the fallback fonts. Make sure you use the meta tag for character encoding otherwise you may not get any chinese characters at all.

Leave a Reply

Your email address will not be published. Required fields are marked *