Most designers and developers in the industry have at least a basic understanding of how to work with typefaces on the web. From the commonly used CSS font-face and line-height properties to the lesser used properties of first-letter and first-line, we actually have plenty of options for styling typography with CSS. But what do we do when a design’s rich typographic elements make use of typefaces not commonly available on users systems? What about custom kerning on individual characters or different amounts of leading on lines with different sizes?

Sure, we could just fire up Adobe Photoshop, set our type at just the right size, adjust the kerning, tweak the leading, Cmd+click the layer, crop, save for web and slap it on a web page as an img element. Right? Well I don’t know about you, but I don’t want to be bogged down with the mundane and mind-numbing task of creating possibly dozens or hundreds of images for headlines. In addition, we’re well aware that using img elements for headlines ignores the principles of semantic markup, which enhances accessibility, lends towards better search engine visibility and is simply easier to maintain.

Fortunately, there are several different methods for achieving rich typographic headlines.

Method 1 - Image replacement

Image replacement is a CSS technique whereby textual content from the HTML markup is hidden and replaced with an image, usually containing the same text.

Advantages:

• Any typeface can be used.
• Fine-tuned control over kerning is possible.

Disadvantages:

• Only really useful on static content.
• Requires the designer to create images for each header.

Possible Enhancements:

Use matrix/sprite images for background images. This essentially combines all headlines into one image which is then positioned accordingly with CSS. This takes advantage of browser caching, and allows the designer to maintain only one image as opposed to many. More on this in a future post!

Method 2 - Server-side image generation

Server-side image generation is a technique whereby the text of certain HTML elements is passed to an image library, which then creates an image of the text with the specified font and options. The image is typically placed into the HTML markup as an img element via Javascript.

Advantages:

• Any typeface can be used.
• Doesn’t require the designer to create images for each header.

Disadvantages:

• Kerning may be possible, but fine-tuned control over kerning, ie: varying the amount of kerning on individual characters, is not possible.
• Semantics are ignored when images are simply placed in the markup.

Possible Enhancements:

Combine server-side image generation with CSS image replacement. Several techniques exist which do just this: Dynamic Text Replacement and P+C DTR.

Method 3 - Flash replacement (sIFR)

Flash replacement is a technique whereby the text of certain HTML elements is read in by JavaScript, passed to ActionScript within a SWF file which renders the type in an embedded font. One popular implementation of this technique is called sIFR, which ingeniously combines the use of CSS, JavaScript, the DOM, and ActionScript. With sIFR, if the Flash Player is unavailable, the text is simply rendered with HTML and CSS.

Advantages:

• Any typeface can be used.
• Doesn’t require the designer to create images for each header.
• Text only HTML/CSS fall back option is used if the user does not have Flash or JavaScript.

Disadvantages:

• Basic kerning and fine-tuned control over kerning is not possible.
• A bit slow—replaced text “pops in” after the page loads.

Possible Enhancements:

With sIFR 3, kerning will be possible. However, at this time, sIFR 3 is currently in beta.

Method 4 - Font embedding with CSS3

Font embedding is a technique where a font file located on a server is referenced from a CSS file. The font file is downloaded to the client and used to render the headline. At the time of this writing however, the CSS3 spec is not finalized, nor is it supported well among mainstream browsers.

Which technique is best?

There really is no best method, but rather there are optimal methods for various scenarios. Each of these methods has it’s strengths and weaknesses and therefore each must be used appropriately. Dave Shea has some helpful slides which address how scenarios and priorities affect the choice of technique in his @Media 2006 presentation on fine typography (link below)

Notes

If server-side or client-side processing is required in the examples above, it’s not listed as an advantage or a disadvantage. The topic is debatable and can be somewhat subjective.

References and Resources

sIFR 2.0: Rich Accessible Typography for the Masses

Mike Davidson’s writeup about sIFR and how it works

Fine Typography for the Web

@Media 2006 presentation by Dave Shea

Elegant Web Typography (PDF)

FOWD 2007 workshop by Jeff Croft