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,
- 宋体, Song Ti, a serif font very common in site font declaration
- 黑体, Hei Ti, a sans-serif. (We picked this one for body text)
- 幼圆, You Yuan, a rounded font like comic-sans without the stigma.
- 隶书, Li Ti, a brush script.
- 微软雅黑, Microsoft Ya Hei a sans-serif, supposedly not fully supported yet designy
Some [updated] Chinese Website tips:
- 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;
- Standard chinese sans-serifs are: 黑体 (Hei ti), 微软雅黑 (MS Yahei)
- The standard chinese serifs is: 宋体 (Song ti)
- Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html” charset=”utf-8″>
- My final recommendation for a sans-serif font stack is: font-family: arial, 黑体, 微软雅黑, 宋体, sans-serif;
References:
Leave a Reply to idaho falls web design Cancel reply