Google Web fonts and Hanyu Pinyin

Back in the last century, getting Web browsers to correctly display Pinyin was such a troublesome task that I remember once even employing GIFs of first- and third-tone letters to get those to look right. So there were a whole lotta IMG tags in my text. Sure, I put the necessary info in ALT tags (e.g., “alt=’a3′”), just in case. But, still, I shudder to recall having to resort to that particular hack.

Things are better now, though still far from ideal. Something that promises to considerably improve the situation of website viewers not all having the same font you may wish to use is CSS3’s @font-face, which allows those creating Web pages to employ fonts that are provided online. Google is helping with this through its Google Web Fonts. (Current count: 252 font families.)

But is anything in Google’s collection capable of dealing with Hanyu Pinyin? Armed with a handy-dandy Pinyin pangram, I had a look at what Google has made available.

Not surprisingly, most of the 29 font families marked as offering the “Latin Extended” character set failed to handle the entire Hanyu Pinyin set. The ??? group is the most likely to be unsupported at present, with third-tone vowels also frequently missing.

Here are the Google Web fonts that do support Hanyu Pinyin with tone marks:
Serifs

  • EB Garamond (227 KB)
  • Gentium Basic (263 KB — and about the same for each of the three accompanying styles: italic, bold, bold italic)
  • Gentium Book Basic (267 KB — and about the same for each of the three accompanying styles: italic, bold, bold italic)
  • Neuton (56 KB — and about the same for each of the five accompanying styles: italic, bold, light, extra light, extra bold)

screenshot of the Pinyin fonts above

Note:

  • Neuton has relatively weak tone marks, so I wouldn’t recommend it for Web pages aimed at beginning students of Mandarin.

Sans Serifs

  • Andika (1.4 MB)
  • Ubuntu (350 KB) — available in eight styles

screenshot of the Pinyin fonts above

Some Ubuntu sample PDFs: Ubuntu regular, Ubuntu italic, Ubuntu bold, Ubuntu bold italic, Ubuntu light, Ubuntu light italic, Ubuntu medium, Ubuntu medium italic.

Andika sample PDF.

Note:

  • Andika’s relatively large size (1.4 MB) makes it unsuitable for @font-face use because of download time. (Its license, however, would permit someone with the time and energy to crack it open and remove lots of the glyphs not needed for Pinyin, thus reducing the size.) More fundamentally, though, I don’t much like the look of it; but YMMV.

Since Google is likely to expand the number of fonts it offers, I’m including the list of all 29 faces I tried for this experiment, which should make it easier for those wanting to test only new fonts. (It is possible, however, that Pinyin support will be added later to some fonts that fail in this area now. If anyone hears of any such changes, please let me know.) Use of bold indicates Pinyin support; everything else failed.

Display Faces with Latin Extended (all fail)

  • Abril Fatface
  • Forum
  • Kelly Slab
  • Lobster
  • MedievalSharp
  • Modern Antiqua
  • Ruslan Display
  • Tenor Sans

Handwriting Faces with Latin Extended (all fail)

  • Patrick Hand

Serif Faces with Latin Extended

  • Cardo
  • Caudex
  • EB Garamond
  • Gentium Basic
  • Gentium Book Basic
  • Neuton
  • Playfair Display
  • Sorts Mill Goudy

Sans Serif Faces with Latin Extended

  • Andika
  • Anonymous Pro
  • Anton
  • Didact Gothic
  • Francois One
  • Istok Web
  • Jura
  • Open Sans
  • Open Sans Condensed
  • Play
  • Ubuntu
  • Varela

Additional resource: SIL Fonts for downloading (including the full versions of Andika and Gentium).

Taoyuan International Airport to adopt new style for signs

Taoyuan International Airport (or “Taiwan Taoyuan International Airport” as it is called in Taiwan’s official Chinglish form) will be replacing its signage, adopting a new color scheme and typeface.

Currently, the signs in the airport have a black background and yellow or white letters.

The new signs will be modeled after those in the Hong Kong International Airport, with white letters on a blue background. But signs for facilities such as restrooms and restaurants will have white letters on a dark red background. (Perhaps like these?)

Taiwan will also duplicate Hong Kong’s choice of font face: Fang Song (fǎng-Sòngtǐ / 仿宋體). One of the reasons for this is that some Chinese characters — such as for yuán (園) and guó (國) — appear similar if viewed from a distance, according to the president of the Taoyuan International Airport Corp. “Passengers can clearly see the words on the [new] signs even if they view them from 30 meters away,” he added.

The new signs will start to go up in August, with the change scheduled to be complete by the end of 2012.

I’ve made some samples (which, by the way, contain both 園 and 國) in three typefaces to help illustrate the look of Fang Song. Sorry not to have the right color scheme.

DF Fang Song:
sample of the typeface in three weights, with the text of '台灣桃園國際機場'

DF Kai Sho:
sample of the typeface in three weights, with the text of '台灣桃園國際機場'

DF Ming:
sample of the typeface in three weights, with the text of '台灣桃園國際機場'

sources

stories:

font samples:

additional material:

By the way, the contrast between the traditional and simplified versions of the of fǎng-Sòngtǐ (仿宋體 / 仿宋体) is a good illustration that to the untrained eye the conversion from one system to another is not necessarily self apparent.

vs.