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 (冬青黑体简体中文)
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 (微软雅黑)
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.
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, 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.
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
font-family: Arial,'Hiragino Sans GB',STXihei,'Microsoft YaHei',sans-serif
Best Practice and Tips
- Windows：choose 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 X：we 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 “华文黑体”.
- Linux：use “文泉驿微米黑” as the web font. If the user’s OS does not have “文泉驿微米黑” installed, browsers will automatically recognise other default fonts.
- Android：browsers 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.