Pinyin font: Noticia Text

Since my last examination of the selection at Google Web Fonts the number of font families for Latin Extended has reached 98 [edit: May 31, 2012: 188], with one new face capable of rendering Hanyu Pinyin with tone marks: Noticia Text.

image showing the font Noticia Text in action on a Hanyu Pinyin sample text

Here are the Pinyin-friendly font faces at Google Web Fonts.

Serif

  • EB Garamond
  • Gentium Basic
  • Gentium Book Basic
  • Neuton
  • Noticia Text

Sans Serif

  • Andika
  • Ubuntu
  • Ubuntu Condensed
  • Ubuntu Mono

For future reference, the font most recently added to the Latin Extended group is Ruda [edit in May 2012: Chau Philomene One], which doesn’t support Pinyin with diacritics (except, perhaps, through combining diacritics).

See also

Pinyin font: Flexion Pro

Today I’d like to introduce a highly individualistic font family that supports Hanyu Pinyin: Flexion Pro. This one, however, isn’t free.

sample of the Flexion Pro font being used for text in Hanyu Pinyin

Flexion was originally designed for the movie The DaVinci Code, which is apt, given how the main character, Robert Langdon, was named after Flexion’s designer (and ambigram specialist) John Langdon. Hal Taylor completed the font.

Here’s part of Taylor’s description:

Flexion is possibly the only symmetrical type design currently available. In keeping with John’s well-know propensity for ambigrams, many of the characters are mirrored to become other characters; the B is a reversed E, the C is reversed to become a D, G is a mirrored P, the K is a reversed N, and so on.

Of course, some of the tone marks will complicate making this work for ambigrams. But since Chinese-English bilingual ambigrams are possible, making Pinyin ambigrams, even with tone marks, shouldn’t be out of the question.

Flexion comes in four weights.

Pinyin fonts at the Open Font Library

A search for Pinyin fonts at the Open Font Library currently yields 15 font families.

Not all of those, however, really do support Hanyu Pinyin with tone marks. Here are the ones that work, though not always without problems:

And here’s a PDF of all of those Unicode Pinyin font families in action.

I’ve previously mentioned more than one of these: Pecita and the various Gentium faces. I’ll write more about the latter in another post on the work coming out of SIL.

Serif

screenshot of the serif font 'crimson' in action on a sample Pinyin text

screenshot of the serif fonts 'Gentium' and 'Gentium Book' in action on a sample Pinyin text

screenshot of the serif font 'Judson' in action on a sample Pinyin text

screenshot of the serif font 'Libertinage' in action on a sample Pinyin text

screenshot of the serif font 'Wirewyrm' in action on a sample Pinyin text

Sans Serif

screenshot of the sans-serif font 'Designosaur' in action on a sample Pinyin text

screenshot of the sans-serif font 'News Cycle' in action on a sample Pinyin text

screenshot of the sans-serif  font 'Pfennig' in action on a sample Pinyin text

Monospace

screenshot of the monospace sans-serif font 'Consola Mono' in action on a sample Pinyin text

Script

screenshot of the script font 'Pecita' in action on a sample Pinyin text

Full list (including fails), for future reference:

  1. Anahi/Abbey
  2. Consola Mono
  3. Crimson
  4. Designosaur
  5. Douar Outline
  6. Futhark Adapted
  7. Gentium
  8. Judson
  9. Libertinage
  10. Logisoso
  11. News Cycle
  12. Pecita
  13. Pfennig
  14. Vegesignes
  15. WireWyrm

Google Web fonts and Pinyin — December 2011 update

When I put up my first post on Google Web fonts (Google Web fonts and Hanyu Pinyin), that site offered 252 font families, 29 of which cover at least parts of Latin Extended. Now, some three months later, the total has grown to 342 font families, with 70 of those covering at least parts of Latin Extended.

Only two of the new families, however, support Hanyu Pinyin with tone marks: Ubuntu Condensed and Ubuntu Mono. That brings the total to eight Google Web fonts that support Hanyu Pinyin: four serifs and four sans serifs.

Serif

  • EB Garamond
  • Gentium Basic
  • Gentium Book Basic
  • Neuton

Sans Serif

  • Andika
  • Ubuntu
  • Ubuntu Condensed
  • Ubuntu Mono

Here’s what the two new families, Ubuntu Condensed and Ubuntu Mono, look like next to the earlier Ubuntu.

example of Ubuntu, Ubuntu Condensed, and Ubuntu Mono in action on Hanyu Pinyin

For reference, here’s the total list of Latin Extended, with Pinyin-compliant fonts in bold.

Serif Faces

  1. Bitter
  2. Cardo
  3. Caudex
  4. EB Garamond
  5. Enriqueta
  6. Gentium Basic
  7. Gentium Book Basic
  8. Neuton
  9. Playfair Display
  10. Radley
  11. Sorts Mill Goudy

Sans Serif Faces

  1. Andika
  2. Anonymous Pro
  3. Anton
  4. Chango
  5. Didact Gothic
  6. Francois One
  7. Fresca
  8. Istok Web
  9. Jockey One
  10. Jura
  11. Marmelad
  12. Open Sans Condensed
  13. Open Sans
  14. Play
  15. Signika Negative
  16. Signika
  17. Tenor Sans
  18. Ubuntu
  19. Ubuntu Condensed
  20. Ubuntu Mono
  21. Varela
  22. Viga

Display Faces (all fail)

  1. Abril Fatface
  2. Arbutus
  3. Bubblegum Sans
  4. Butcherman Caps
  5. Chicle
  6. Eater Caps
  7. Forum
  8. Kelly Slab
  9. Knewave
  10. Lobster
  11. MedievalSharp
  12. Modern Antiqua
  13. Nosifer Caps
  14. Piedra
  15. Passion One
  16. Plaster
  17. Rammetto One
  18. Ribeye Marrow
  19. Ribeye
  20. Righteous
  21. Ruslan Display
  22. Stint Ultra Condensed

Handwriting Faces (all fail)

  1. Aguafina Script
  2. Aladin
  3. Devonshire
  4. Dr Sugiyama
  5. Fondamento
  6. Herr Von Muellerhoff
  7. Marck Script
  8. Miss Fajardos
  9. Miss Saint Delafield
  10. Monsieur La Doulaise
  11. Mr Bedford
  12. Mr Dafoe
  13. Mr De Haviland
  14. Mrs Sheppards
  15. Niconne
  16. Patrick Hand

Script font for Pinyin

Unfortunately, relatively few fonts support Hanyu Pinyin (with tone marks, that is). So I was surprised to come across Pecita, by Philippe Cochy. This is the first script typeface I recall seeing that covers Pinyin … and a lot more.

It might be too individualistic for much Pinyin use. But I’m very glad to know it exists and hope to see many more creations like it.

GIF of Pecita in action: A-Z, a-z, plus the diacritics used in Pinyin and a pinyin pangram

Pecita is licensed under the SIL Open Font License, Version 1.1.

Additional links:

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).