Chinese Web Fonts – Part 1

4 Comments

Choosing and applying fonts to web design is an important aspect of both User Experience and User Interface design. There are a wide range of Latin script web fonts (including services like typekit which will be discussed in part 2) available to select from – this gives western designers a comprehensive set of fonts to use and communicate the information effectively, while amplifying the aesthetics of the design. However, due to the enormous size of the Chinese character set, the selection of web fonts is very limited for designers working with Chinese websites, more so, there are almost zero information on Chinese web fonts for western designers. This is the first part of a two part series where we will be proving information, best practice and recommendations from our personal experience on Chinese typography.

Below are the most popular Chinese web safe fonts:

  • Hiragino Sans GB (冬青黑体简体中文)
  • Microsoft Yahei (微软雅黑)
  • Simsun (宋体)
  • Simhei (黑体)

Hiragino Sans GB (冬青黑体简体中文)

chinese web fonts 1

Hiragino Sans GB is a font used in Mac OS X systems, which started from OS X 10.6. It has been given a Chinese name 冬青简体中文 starting from OS X 10.7. Apple used ’华文黑体STHeiti’ for a very long time before OS X 10.6. Post OS X 10.6, STHeiti was completely revamped (combining 华文黑体STHeiti and 华文细黑STXihei) and renamed as Hei SC to be used as a default font in Mac systems. However, Hiragino Sans GB is recognized as the best Chinese font on website so far, although it has not been considered as the default font for Chinese Mac system.

Microsoft Yahei (微软雅黑)

chinese web fonts 2

In Window systems, the main Chinese web font is Microsoft Yahei. This font works extremely well in Windows largely due to the ClearType feature which was implemented for Windows Vista by default. However, this feature is turned off by deafult on Windows XP, majority of Chinese users will now know how to turn this feature on in Windows XP. Unfortunately, Microsoft Yahei is not visually pleasing in front of users who do not use ClearType in XP, or the users in a Mac OS X environment.

chinese web fonts 4

Simsun (宋体)

chinese web fonts 3

There are still a huge amount of users on the windows XP platform in China and the default font in XP is Simsun. In order to display Chinese fonts properly across all platforms, including older Operation Systems, Simsun is still the most popular option used for content on Chinese websites.

As a backup for XP users that have not installed Microsoft Yahei, developer can set Simsun or Hei as fall back in the font family in CSS properties. In a minimalist oriented modern design era, sans serif Chinese typeface is very popular, while in fashion and luxury sector, serif typeface is being used more often.

Sans-Serif typefaces refer to skeleton-only typeface. Microsoft Yahei, Hei. Serif typeface can be spotted by strokes with decorative lines and curves. Simsun is serif typeface.)

Simhei (黑体)

chinese web fonts 5

Simhei, usually recognized as Hei, was created by 北京中易中标电子信息技术有限公司. It comes with the Simplified Chinese version Windows XP and Microsoft Office as the default Chinese Hei font. Many users pointed out that the form of this typeface is as trivial as the Simsun font. The use of western Simhei font should be avoided, as the letters are not composed properly when typing. Which is the same problem as Simsun font when used in a western context. When we are creating bilingual content, the differences between western letters in Chinese web font should always be one of the main considerations.

chinese web fonts 6

Font Size

One of the most common mistakes made by English designers when creating Chinese websites is the use of English font size standard on Chinese fonts, which disrupts the balance of the entire design. The standard size of Chinese body text should be circa 12px, but with the increase of average screen resolutions recently, Chinese body copy can be 14px, (on mobile screens we should keep this to 12px). Headers normally will be no more than 36px and be in Bold. Of course, as with anything creative, you should take this as a guide rather than a strict rule.

Chinese web font HTML/CSS Markup

Don’t forget to put English in front of Chinese fonts in the HTML/CSS Markups, and using the “English Names” of the Chinese fonts where possible. For example:

font-family: Helvetica, Tahoma, Arial, “STXihei”, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif

Or

font-family: Arial,'Hiragino Sans GB',STXihei,'Microsoft YaHei',sans-serif

Best Practice and Tips

  • Windowschoose between “中易宋体” (safe font) (“SimSun”) and “微软雅黑”(web font) (“Microsoft YaHei”). For bold or bigger sized fonts will prefer “微软雅黑”. If the user is using an OS without “微软雅黑” installed, browsers will automatically recognise the safe font “中易宋体”.
  • OS Xwe always prefer using “华文黑体”(safe font) ( “STXihei”) and “冬青黑体简体中文” (web font) (‘Hiragino Sans GB’). If the user does not have “冬青黑体简体中文” installed, it will automatically recognise the safe font “华文黑体” .
  • iOS: browsers will automatically recognise the default font “华文黑体”.
  • Linuxuse “文泉驿微米黑” as the web font. If the user’s OS does not have “文泉驿微米黑” installed, browsers will automatically recognise other default fonts.
  • Androidbrowsers will automatically use the font “Droid Sans” which supports both English and Chinese.

We are currently using the following Markup on a majority of Chinese websites:

font-family: (English web font inserting at the front), Arial, Helvetica, "Hiragino Sans GB", "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif;

This Markup also supports all systems with a stylised web font and also a web safe font for backup.

4 Comments on this article

  • Suna October 5, 2015

    Thanks for your post which is very useful and helpful.
    I like Hiragino Sans GB font and would like to use it for any company’s design project.
    And I’ve got a question.
    Is its copyright free for using on any company’s design work(print material)?
    Please let me know if you know anything about it.
    I will be waiting for your replay 🙂

    Reply

    • Shane October 5, 2015

      Hi Suna,

      Thank you and I’m very glad that you find it useful and helpful.
      Online application and offline application are two different things. As a part of the system font, Hiragino Sans GB is free to the system users, utilising this font markup is just to show the font you already have in your system. If you want to use this font accross all mediums including print materials I’m afraid you will have to get in touch with the company who design this font – (Hiragino Sans GB is designed by JIYUKOBO Ltd. in Japan and HANYI (汉仪) in China)

      Reply

      • Suna October 5, 2015

        Hi Shane.
        Really thank you for your reply.
        It was also very helpful for me.
        If I want to use this Hiragino GB font on print material, I should buy the font in JIYUKOBO website. Is it right?
        Well, I’m sorry. I will ask you one more thing.
        Could you recommend me some chinese fonts that have free copyright on print material?
        It’s not my own language so very complicated.
        Thanks for reading this. 🙂

        Reply

        • Shane October 6, 2015

          Hi Suna,

          Sorry for the late response.
          Here’s the list of the Chinese fonts for free commercial use, it is very limited but hopefully can help you.
          方正黑体 FZHei-B01S
          方正书宋 FZShuSong-Z01S
          方正仿宋 FZFangSong-Z02S
          方正楷体 FZKai-Z03S
          You mentioned you like Hiragino Sans GB so for you I would say the option is to use FZHei-B01S which is also sans-serif.

          Reply

Add a comment