Designers who are able to use any font they own for print design, have always been frustrated with the lack of font support in browsers. Over the years various options have appeared to help bring typographic variety to the web. Each solution comes with it own advantages and Disadvantages. Now that there is a relatively new option out there, Typekit, we decided to review all the options for non standard typography for websites.

Text Images

The first solution for using non-standard fonts on the web was to create the typographic layout in Photoshop or other graphic programs and output to web graphics.

Advantages

• Works in all browsers
• Kerning and letter spacing is fully supported. (Designers love this)
• Great anti-aliasing
• Machine consistency. Because the fonts are rendered in Photoshop they will look the same from computer to computer.

Disadvantages

• Non semantic HTML code. Semantic coding is a way of structuring your HTML, so that the code describes the content. This is valuable for search engines, screen readers, and the maintainability of your code. You may want a your story title to read like a headline, not as an image.
• No dynamic support. To use as a story headline, you would have to create a new graphic every time you published a story.

CSS Text Replacements

Text replacement is almost the same as simple text images. The difference is that simple text is used in the HTML, then the text is hidden and replaced with a background image. CSS text replacement techniques were created to keep the HTML semantically strong and free of image tags while still utilizing the strength of typography created in graphics programs.

Advantages

CSS text replacement has the same advantages of Text images plus:

• Semantic HTML code

Disadvantages

• Google has considered this black hat. While Google has backed off a bit from there zero tolerance, this technique should be use very sparingly to limit markdown by search engines.

SIFR

A few years ago a new option became available, sIFR. sIFR uses JavaScript to replace text elements on the page with flash movies that show the text in HTML elements. sIFR was the first way to dynamically display text in a non-standard web font that worked in most browsers.

Advantages

• Semantic HTML code
• Good anti-aliasing. While not as great as Photoshop, flash does a good job or making fonts look attractive.

Disadvantages

• Requires flash, so there is no iPhone/iPad support.
• The sIFR components do not load till after the page loads, which can make the page look glitchy.
• Large numbers of sIFR elements can slow the rendering of the page

While sIFR is great for certain things, the performance lags and the flash requirements mean that it is far from the perfect web font solution. For more on sIFR visit: http://wiki.novemberborn.net/sifr/

CSS3 @Font-Face: Embedded Fonts

Embedded fonts allow you to embed fonts into a webpage to be used as normal CSS. While IE has supported embedded fonts since IE6, other browsers have been slow to support the CSS3 property @font-face to allow for embedded support. In addition to browser support issues are the legal issues. Most font licenses do not support embedding, so the fonts designers could legally embed are very limited.

With the release of Firefox 3.5 all major browsers support embedded fonts except Chrome: Firefox 3.5 and higher, Safari 3.1 and higher, Chrome 4.0.249.4 and higher, and Internet Explorer 6 and higher and Opera 10 and higher/. It should be noted that mobile Safari and mobile Opera do not support @font-face.

Typekit

While many have started to use the @font-face components and have ignored the legality of using font faces, most website owners have not wanted to risk it. Typekit was created as a way to legally embed fonts with a special web only license for use of fonts. Typekit is an easy central way to embed fonts from many of the best font foundries in the world.

Advantages

• Dynamic content
• Semantic HTML
• Speedy performance. The fonts render just a quickly as all the other types on the page
• Graceful degradation. If the user is using a browser not supported, they will just see the text rendered in a web font.

Disadvantages

• Anti-aliasing. Because the fonts are rendered at the OS level, the quality of the rendering varies from computer to computer.
• While the cost of Typekit accounts are not expensive, they are not free so website owners will have to put a price on that design.
• Each font face must be downloaded. If you want to use all of the weights of a font, bold, italic, etc the file size can get large.

While not without issues, Typekit is clearly the best option available for true typography in web pages. It makes the process of applying non-standard web typography to websites legal, cheap, easy, and standard compliant.

More information about Typekit can be found at: http://typekit.com/