Font Hybridization in HTML 5

Over this Christmas break, I was over at a friends house and got to sit down and tinker with my friends Mac. I’d forgotten how good fonts look, and I suddenly realized why so many sites are now using custom web fonts. Since I primarily use Windows at work and at home, I get annoyed by fonts that are difficult to read or that don’t render well on the screen. Somehow, I’ve never been 100% happy with font rendering on windows. It’s been getting better, but it’s still not as good as a Mac is. Maybe its the screen, maybe its the OS, maybe its the app, maybe its a combination of all of the above. Because I’ve been on this HTML kick, and I’m on windows, I’ve tended toward Cufon as my font replacement tool of choice when building sites since it’s the only one that produces a “more-reasonable” output on my machine.

But Cufon by it’s nature has several drawbacks. First, you can’t copy and paste text rendered with Cufon. With most of the newer browsers you can select it, but there’s not much more you can do beyond that. So, I usually limit Cufon usage to titles, headers, and the more “design-ery” aspects of a page. Second, because Cufon is image based, if someone zooms in on your text beyond 100% Cufon rendered text gets all fuzzy the same way it would if you zoomed in on an image. And finally, because Cufon renders with javascript on the client, there’s no way to cache the text. Javascript is fast, but when you’re rendering a large amount of text on a phone, there’s usually not a good way around a flash of unstyled content. And it happens each time you go to a new page because it can’t be cached.

Web fonts on the other hand, allow you to use fonts in a very similar manner as if you had them installed on your device with native rendering by the OS. You can select, copy, paste, and use it as you would any other piece of text. Web fonts are cacheable, so although you could get a flash of unstyled content when you first visit a page, subsequent visits should render immediately. The disadvantage however, is the OS. On windows, the rendering of fonts just… Sucks. So people don’t use it.

But what if there was a way to do a hybrid between Cufon and Web Fonts?

Besides the rendering issue, Web Fonts are the best option. They’re the most flexible and the most future proof. But they still suffer on Windows, some phones, and on older browsers that don’t support the new @font-face CSS syntax. So what if we did a hybrid? Use @font-face, then fall back on Cufon for older browsers, and for windows. The advantage is that on a new browser the@font-face‘s will be cached, used for the initial rendering of the page, and then cleaned up with Cufon later.

Using Modernizr and a little custom javascript to do user agent testing I put together a page to test out the hybrid font idea:

http://www.paulrohde.com/demo/cufon-hybrid/demo.html

It’s a rough draft. I have some screen shots below from both Mac and PC’s (click for full size versions).

Mac


PC


For simplicity, the javascript code to test and load Cufon and my custom cufon polyfill looks like this:

  1.  
  2. function rendersNiceFontface() {
  3. result = navigator.appVersion.indexOf("Win") != -1
  4. || navigator.appVersion.indexOf("Android") != -1;
  5. return result;
  6. }
  7.  
  8. var supportsNiceFontface = !rendersNiceFontface();
  9.  
  10. Modernizr.load([
  11. {
  12. test : Modernizr.fontface && Modernizr.canvas && supportsNiceFontface,
  13.  
  14. nope : [ 'cufon-yui.js', 'BebasNeueRegular_400.font.js', 'cufon-polyfill.js' ]
  15. }
  16. ])
  17.  

Using the Modernizr yepnope.js, I’m able to completely skip loading Cufon at all if the browser supports good @font-face rules. There’s more that I’d have to do to clean it up before I’d use it in a real setting, but it demonstrate the concept, and is something I could definitely use later as a @font-face polyfill. It does have some drawbacks though, you have to maintain both your CSS rules and your Cufon replacement calls, and Cufon doesn’t work well with a large amount of body text, so if you don’t support @font-face, I’d fall back to a good secondary font and forgo Cufon in those cases.

I hope this got some gears turning, I’m looking forward to some comments.

One thought on “Font Hybridization in HTML 5

  1. From what I gather, like most web developers, your emphasis is on the next generation of web pages as it relates to fonts. In other words, how to use webfonts to breakaway from the dependence on system fonts. This is the world of the Latin script.

    Those who use double-byte characters like Indians are still in the infancy of the web development struggle. There is something magical that Open Type and webfonts has for them. Combining these two, I made a smartfont. It was made in 2004 when only Notepad in Windows could show it. What I found was that if you transliterate the language carefully, you can make a smartfont that makes all those complex letter shapes happen in places that you would normally see regular Latin text.

    Go to my web site and click on the link that says ‘Latin Script’ a few times to see how the fonts change from Plain Latin to thousands of combined letters. I would like to look at this web site and tell me what you think. Most browsers except Safari are in different stages of supporting OpenType font rendering. IE is the one farthest behind. I have blocked it showing Singhala because it is painful to see the massacre.

    Thanks

    Naena

Leave a Reply

Your email address will not be published. Required fields are marked *