Sunday, March 23, 2008

Rich Fonts In Your Web Sites

Font selection is perhaps on of the biggest deciding factors in the success of any given design. Using CSS we have the ability to modify existing fonts significantly. Unfortunately, we're still limited to a small number of browser safe fonts.

The sIFR typography module uses flash actionscripts and javascript to replace existing fonts with rich typography. It's an incredibly powerful tool. The module is free and available under a general public liscense.

How does it work?

sIFR downloads flash .swf files containing a custom font that is then held in the browser cache. This means you can effectively patch your user's browser with a new font that doesn't exist in their computer's font library. Crucially sIFR can handle dynamic content since the .swf is a font library, rather than a simple static flash movie.

Degradation/Compatibility

sIFR degrades gracefully into default CSS fonts for those users who have their Javascript of flash disabled. It's also fully accessible to screenreaders and other assistive technologies. Matt May from the W3C has fully endorsed it as an accessible method to create rich typography on the web.

In terms of compatibility, sIFR works on Firfox, IE5+, Opera 7+, Safari and many other browsers. 90% of machines are said to be compatible. On non-compatible machines the module simply does not take effect.

Limitations

I've found there to be some minor speed issues. It's generally advisable only to use the module on small headlines etc rather than whole paragraphs. Loading speeds are excellent though if used properly, and are invisible to the user.

Overall impression

I love this module. I'll be using it in many of my future websites. This tool can make your websites stand out from the crowd by displaying fresh looking typography. It's important though to remember that small proportion of people who can't run the module, and make sure that the default CSS styles are also up to today's high standards.

I think that sIFR is an excellent stop-gap measure. It's badly needed as designer’s grapple with current font limitations. In the long-term however, browsers will have to find a way to support rich typography ranges.

Article source: http://www.grumpycoder.co.uk

Original article: http://www.grumpycoder.co.uk/replace-browser-safe-fonts/

2 comments:

e-Definers Technology - Web Design Company said...
This comment has been removed by the author.
Jannah Delfin said...

Great post. I hope you write more good stuff like this article.

graphic design danvers ma