November 24, 2011#

WP SinoType Plugin – An experiment in Chinese Web Safe fonts

What is WP SinoType?

WP SinoType is a simple WordPress plugin for WordPress website owners with little or no knowledge of how to edit CSS, and more importantly have no knowledge of Chinese web-safe fonts. The plugin is a tool to select a Chinese and English font stack to target HTML heading tags (H1-H6) and the HTML body tag. This works for multi-language websites in Chinese and English and also provides an English font fallback for numbers and and English words on native Chinese sites.

What is the Experiment?

Through researching web-safe fonts, the findings are extremely limited in what works seamlessly across multiple browsers and operating systems. Modern mac machines have a larger range and variation of Chinese fonts, and Windows machines have a limited range with a different defaults for OS versions.

While we know we are not about to solve any overall issues of complete cross compatibility with web-safe typefaces in the greater picture, what we aim to achieve is to experiment with using mixtures of web-safe fonts that stack nicely to provide a Mac, Windows (Chinese) and English typeface that maximize the potential of design.

What we Hope to Achieve!

We hope with what we provide in the current version of our plugin, that we can allow website owners to have more options with Chinese typography.

We also hope that we will generate a discussion, get your feedback, find out what works best. We would love to hear what Chinese/English font stacks you are already using.

How does it work?

The plugin inserts CSS in to the header.php file of your WordPress theme files.

The order of the fonts displayed are:

1. English web safe font stack. (custom CSS field available)
2. Mac Chinese web safe font stack.
3. Windows Chinese web safe font stack.

body {font-family:Georgia, Sans-Serif, Hei, SimSun;}

h1,h2,h3,h4,h5,h6 {font-family:Georgia, Sans-Serif,
Hei, SimSun;}

h1>*,h2>*,h3>*,h4>*,h5>*,h6>* {font-family:Georgia,
Sans-Serif, Hei, SimSun;}

The CSS added by the plugin will not work if an element has a CSS class with a font-family assigned to it.

Mac fonts included

CSS font family OS 9 OS X 10.2 10.3 10.4 10.5 10.6 10.7
Hei x x x x x x x
STHeiti x x x x x x
STKaiti x x x x x x
“Heiti TC” x x
“Arial Unicode MS” x x x
BiauKai x x x x x x x
STSong x x x x x x
STFangsong x x x x x x
Kai x x x x x x x

Windows fonts included

CSS font family 2000 XP Vista 7
“Microsoft JhengHei” v5.00 v6.02
MingLiU v3.00 v3.21 v6.02 v7.00
DFKai-SB v3.00 v3.00 v5.00 v5.00
“Microsoft YaHei” v5.00 v6.02
SimHei v2.10 v3.02 v5.01 v5.01
SimSun v2.11 v3.03 v5.00 v5.03
SimSun-ExtB v5.00 v5.00
FangSong v5.01 v5.01
KaiTi v5.01 v5.01
FangSong_GB2312 v2.00 v2.00
KaiTi_GB2312 v2.00 v2.00

Web-safe font information sources:

Whats coming in the next versions?

In the next version we plan to have samples (not live) of the typefaces used in the plugin, so for example if you’re a Windows user you will be able to see how much better typography (not just in English) is on a Mac.

Apart from that we will be waiting to hear your feedback, and be making adjustments based on what the people say.

One Comment

  1. This is helpful – however which fonts work with traditional Chinese?

Leave a Comment