5 must see techniques for sexier web fonts.

April 5, 20090 Comments
Facebook Twitter Pinterest Plusone

fontFor creative graphic designers, fonts on the web have always been (and probably always will) be a bone of contention. Essentially typography on the web has been limited to a small subset of fonts that exist on the three major platforms (Win / Mac / Linux) – and thus creative use of these has come from changing css properties such as letter spacing, or font-weight.

If you wanted to use a particular font within a web document, you have two choices. Embed it in an image (assuming its a small part of the document) or use a similar font that is web safe, and attempt to modify it to closely match your “fancy” font with CSS. Not great options. All of this changed when a web standards safe solution came along, combining javascript and flash, known as Sifr. This allowed designers to embed the font within a flash file (license permitting) and provide alternative web safe text for search engines.  A perfect compromise, and a solution that has gained widespread respect and notoriety in the web community.

This solution has morphed into various alternatives over time, some of the taking different approaches. I’ve listed these below. Hopefully as the web advances and technologies such as silverlight gain adoption, we’ll see further solutions to this problem. Something that still needs solved with each of these libraries, is the addition of multiple colours within the text replaced.

Fahrner Image Replacement

This was the project that made it all happen. It is still used widely within the web development community as an alternative when the below technique cannot be used. It’s primary benefits are that it doesn’t require the hard work of the below techniques and you can easily use multiple colours in your text. It does have it’s criticisms however, and care should be taken to ensure that screen readers are catered for.

http://en.wikipedia.org/wiki/Fahrner_Image_Replacement
http://stopdesign.com/archive/2003/03/13/flawed.html
http://www.kryogenix.org/code/browser/lir/
http://moronicbajebus.com/playground/cssplay/image-replacement/
http://www.mezzoblue.com/tests/revised-image-replacement/
http://css-tricks.com/nine-techniques-for-css-image-replacement/

Scalable Inman Flash Replacement

Whilst Sifr was originally developed by Shaun Inman, it was further improved by Mike Davidson and Mark Wubben into its current incarnation. The below articles should give you some guide on how to set it up. One thing I would say with any of these techniques is please please don’t overuse. Creative web text should be used sparingly, and only in titles as a general rule. The rendering speed of your page will be negatively affected otherwise.

http://www.mikeindustries.com/sifr/

http://wiki.novemberborn.net/sifr/

http://designintellection.com/2008/this-is-how-you-get-sifr-to-work/

http://jquery.thewikies.com/sifr/
http://www.sifrvault.com/ – Collection of Sifr safe fonts

Cufon

Sifr relies heavily on Flash in order to function. Cufon on the other hand has developed further so it requires only client side technologies (javascript). For the geeks amongst you it uses canvas and VML to render the fonts, breaking the font shape down into VML paths, and then a JSON representation. It’s actually an extremely clever technique.

http://wiki.github.com/sorccu/cufon/about

http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/

http://wiki.github.com/sorccu/cufon/usage

http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/

Facelift image replacement

Facelift image replacement is another project that is similar to cufon, in that it doesn’t require flash to work. It does however require PHP, and an image is generated server side to that end.  It is written by Cory Mawhorter and released under the GNU public license. Font generation with server side scripts can however put unnecessary load on your server, so as before, use sparingly.

http://facelift.mawhorter.net/
http://facelift.mawhorter.net/detailed-examples/
http://www.designlessbetter.com/blogless/posts/facelift-image-replacement

Typeface.Js

As with Cufon, typeface.js relies heavily on Canvas in javascript for its operation. Typeface.js supports more CSS properties than Cufon, but the differences between the two are minimal. Cufon is however about 40kb smaller in total, making it the streamlined options. Best to perhaps try them side by side for your project.

http://typeface.neocracy.org/
http://typeface.neocracy.org/examples.html

http://blog.brokenfunction.com/2008/10/28/typefacejs/

Further Reading

http://www.apaddedcell.com/web-fonts

http://fontforge.sourceforge.net/

http://webdesign.maratz.com/lab/multi_color_sifr/ – Multi-colour sifr, however appears to be broken in Firefox.
http://www.sitepoint.com/forums/showthread.php?t=600738&page=2 – Web Safe fonts in 2009
http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

Filed in: Web Design
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Leave a Reply

Back to Top