Web Design Trends: Font Replacement - Examples, Techniques and Resources
Hey, I am going to be posting a series of articles of the trends which have emerged in web design in recent times. I will be covering one trend in each article. This is the first part of the series, and in this part, I will be covering font replacement.
Gone are the days when Designers are limited to using Arial, Helvetica and Verdana in the body of their websites. Although these fonts still dominate, there has been a growing trend among designers to use various font replacement techniques to upgrade the typography of the sites they build by using so called ‘non standard’ fonts on their sites generally for blocks of text and for headings.
Examples
Font Replacement Techniques
1. sIFR
sIFR (Scalable Inman Flash Replacement) uses flash and javascript to generate the text in the custom font. If a user doesn’t have flash installed then it just shows the text in a web safe font.
Advantages
- Text is selectable
- Any font can be used. (sIFR does not violate the EULA)
Disadvantages
- Requires Flash and JavaScript both to be enabled.
- Takes quite some time to load.
- Difficult to implement
Resources
- sIFR Documentation
- sIFR Generator - A tool to generate sIFR compatible .swf font files online
- sIFRvault - A Repository of sIFR fonts
- WP sIFR - A WordPress plugin that simplifies the process of setting up sIFR
2. Cufón
Cufón is a Javascript-based font replacement solution which makes use of canvas and VML.
Advantages
- Quite easy to implement
- Does not require flash
- Works with all browsers
- Rendering of text is quite fast
Disadvantages
- Not all fonts can be used ( EULA issues )
- Text is not selectable
Resources
- Cufón Documentation
- Cufón Font Generator
- Cufón Tutorial
- WP Cufon - A wordpress plugin to implement Cufón
3. Typeface.js
Typeface.js uses a browsers’ vector drawing capabilites to draw text in HTML documents. It is quite similar to Cufón in the way it works.
Advantages
- Easy to implement
- User does not have to have flash installed
- Compatible with most browsers
Disadvantages
- Text cannot be highlighted.
- Not many font’s are permitted to be embedded
- Currently, it does not support :hover
Resources
- Font Generator - converts truetype fonts to JavaScript files compatible with typeface.js
- Typeface.js Support Forum
4. FLIR
Face lift image replacement (FLIR) uses PHP and javascript to generate an image that replaces the desired text.
Advantages
- All fonts can be used
- Rendering is faster than sIFR
Disadvantages
- Difficult to implement
- Text is not selectable
Resources
- FLIR Documentation
- FLIR for WordPress - A WordPress plugin to easily implement FLIR
I know that there are other font replacement techniques out there, but I just wanted to talk about the most common and poular ones.
If you enjoyed this article, please spread the word about it, by bookmarking it on your favorite sites. You may also want to consider subscribing to my blog.
August 19th, 2009 at 5:55 pm
Hulu dropped sIFR for Cufon. [Enter dramatic chipmunk... duh duh duhhhhh.]
[Reply]
August 20th, 2009 at 9:20 am
Great post on an interesting subject!
[Reply]
August 20th, 2009 at 10:15 am
Thanks for the round up. Personally I still quite often use image replacement techniques.
No mention of @font-face either? I know it’s still in development but it seems to be a strong future contender with plenty of chat about it and it is being used by some developers already I think.
[Reply]
August 20th, 2009 at 10:10 pm
Very helpful rundown, thanks!
[Reply]
August 21st, 2009 at 8:44 am
As long as an easy and seo-conform implementation of custom fonts is not possible, I won’t use it.
[Reply]
August 21st, 2009 at 8:47 am
Thanks for this interesting post! It seems that the perfect solution just does not exist… What would you recommend? or what solution would you adopt for you?
[Reply]
Tanay Reply:
August 25th, 2009 at 4:14 pm
I use sIFR, but I think all of them are equally good, it just depends on what you need to replace. I wanted to replace post titles, and I preferred if people could select text, so they can copy and paste titles if linking to the posts. But if you are using it only to generate headings like about us, services etc, you should use cufon.
[Reply]
August 22nd, 2009 at 4:28 pm
nice resources and ex.. thanks
[Reply]
August 25th, 2009 at 11:05 am
Hi
There’s one more I came across recently at http://www.typeselect.org
i think its good too. though not have used it.
[Reply]
Tanay Reply:
August 25th, 2009 at 4:16 pm
It seems like a good alternative. I might give it a try on some sites.
[Reply]