Absolute Orange Web development, only better

Written on Wed, 01 Jul 2009
By Amy Varga

Amy Varga conducts a review (advantages and disadvantages) of 3 technologies for inserting rich typography into web pages namely, sIFR, server-side installed fonts and Cufón.

When deciding how to best insert rich typography into my web pages I implemented 4 technologies namely sIFR, server-side installed fonts, TypeSelect and Cufón which I have reviewed below:

sIFR

sIFR stands for Scalable Inman Flash Replacement and is an ongoing development on the invention made by Shaun Inman in 2003.   sIFR uses JavaScript and the Document Object Model to replace all designated text with Flash rendered text.

Advantages

1. Fairly easy to implement
2. Degrades gracefully
3. Accessible
4. Search engine friendly

Disadvantages

1. Requires a Macromedia Flash plugin
2. Requires Macromedia Flash software to create the font file
3. Online documentation is extremely fragmented
4. Can slow the loading of the web page if used frequently on a web page
5. Requires  careful tweaking of the CSS font size to get the the desired size
6. Overestimates the number of lines required to fit the text which occasionally  leaves the text with a blank line below
7. Does not handle hover states as defined in the CSS
8. Does not handle customisation of text eg. drop shadows

Server side fonts

Server side fonts require font file(s) to be uploaded to the server.  A script written in PHP, Perl, ASP, Java servlets or any other server side programming language creates PNG images of all replacement text.  JavaScript replaces the designated text once it has loaded.

Advantages

1. No Macromedia Flash plugin required
2. Degrades gracefully
3. Accessible
4. Search engine friendly

Disadvantages

1. Writing of the script requires an in depth understanding of the server-side language
2. Forcing a background colour on the heading does not give the best text results
3. Does not use font styles as defined in the CSS to style the font
4. Text cannot be selected

Type Select

Type Select uses a font generator, which converts fonts to a proprietary format. It uses Javascript to create PNG images for each text replacement letter which it inserts into the web page using the element whose style attribute is set to use PNG image as the background image.

Advantages

1. No Macromedia Flash plugin required
2. Degrades gracefully

Disadvantages

1. The font family as to be set within the HTML page
2. Styling on descendant text elements is ignored

Cufón:

Cufón uses a font generator, which converts fonts to a proprietary format, and a rendering engine written in Javascript.  The font generator builds a custom FontForge script based on the user input, runs it and saves the result as an SVG font.  The SVG font is then parsed and SVG paths are converted to VML paths. The resulting document is then converted into JSON with a mix of functional JavaScript. The rendering machine has a core API and two rendering engines, one which renders VML shapes used for Internet Explorer and one which renders as <canvas> element for other browsers.

Advantages

1. Does not require a Macromedia Flash plugin
2. Degrades gracefully
3. Extremely easy to implement
4. Accessible
5. Search engine friendly
6. Good online documentation
7. Lightweight
8. Quick to load even when used more than 10 times on a page
9. Easy to choose different character sets
10. Applies CSS font definitions exactly including hover definitions
11. Applies text customisation like drop shadows

Disadvantages

1. The image replacement text cannot be selected, except weirdly in IE
2. In IE text decoration on the a:hover does not show

Personally, I found Cufón to be the best and most easiest to use.

Comments

At Sat 12th Dec 2009 15:20:40, draifast (killerzxz@ua.fm) said:
I should email my girlfriend about your post.

At Sun 21st Feb 2010 02:03:54, utertpato (magonizo@gmail.it) said:
http://markonzo.edu http://www.vampirefreaks.com/ashleyfurniture http://blog.tellurideskiresort.com/members/Ashley-Furniture.aspx http://www.trapmuzik.com/forum/topics/pressure-washers-karcher terminates http://bailfish.com/Forum/user/Profile.aspx?UserID=4733 http://carpet-tiles.blogbugs.org/ permissions

At Sun 21st Feb 2010 18:38:10, abraree (sergmihai@yandex.ru) said:
мне кажется: шикарно. а82ч

At Mon 22nd Feb 2010 02:04:28, WP Themes (la234l@gawab.com) said:
Amiable post and this mail helped me alot in my college assignement. Gratefulness you seeking your information.

At Tue 23rd Feb 2010 02:46:48, abraree (sergmihai@yandex.ru) said:
а все таки: спасибо!! а82ч

Add a comment

* Full name

* Email

* Comment enter your comment

* denotes required fields