Guest Post By: Juul Coolen

The web, and consequently its visual appearance, is dynamic by nature. For one, browsers interpret pages and show them accordingly. In a standards-compliant world every browser would adhere to the standards as set out by the W3C so pages look the same in any browser, but we all know the actual state of affairs. Granted, things have significantly changed over the last couple of years. ‘Bad’ browsers are phasing out (albeit slowly), handing over control to the designers by means of CSS. Which doesn’t mean total control, though. Especially when (enviously) looking at the area of print, there is one facet in particular we would love to be able to borrow: typography in all its glory. Or the way Jeffrey Zeldman puts it:

"The less sophisticated lament on our behalf that we are stuck with ugly fonts."

Image Replacement

Web typography is different from printing typography in that a CSS font rule is merely a request to the browser and therefore open to interpretation. Which poses a problem when the specified font is not available on the client’s computer. In such case the browser software is more or less free to pick a substitute font. Even so, font rendering varies across browsers and platforms, and user-defined style sheets can overrule any font specifications. Web standards have yet to be developed for hyphenation, multi-column text layouts, embedding of custom fonts… and the list goes on. To bridge this gap between print and web, and the time it takes for the W3C and eventually browser vendors to support these standards, people have come up with their own ways of getting in typographic control.

Image replacement is probably the most straightforward way of realising (some of) this control. In a nutshell, image replacement is about using CSS to hide HTML text and displaying an image instead, maintaining SEO. Therefore useful for branding purposes, giving the ability to have for example headers with distinguishing fonts and, possibly, effects. Several image replacement techniques have emerged over the course of the years, each one trying to overcome the downsides of others. However, none of these techniques have proven to be without their own share of flaws.

Fahrner Image Replacement (FIR)

The original image replacement technique by Todd Fahrner. Below the CSS implementation:

h3 { 
  background: url(header-replacement.gif) no-repeat; 
  width: 200px; 
  height: 40px; 
}
  
h3 span { 
  display: none; 
}                    
                    
<h3>
  <span>Replaced header</span>
</h3>

As easy as image replacement gets. The CSS hides the text wrapped inside the span tag and subsequently replaced by the background image of the h3 tag. Problems with this method however are the inaccessibility for screenreaders, the inaccessibility with images turned off (and CSS on), and the loss of typical text behaviour (i.e. selecting/copying/resizing).

The screenreader problem got resolved by Mike Rundle who used a large, negative text-indentation in substitution of hiding the text. Making the text invisible for human readers because of the position outside of the viewport, but visible for any automated source readers. Still, the problem when images were turned off remained. The latter was finally adressed in the so-called Gilder/Levin method, by layering an image on top of the text instead of behind it. That way there is no need for CSS to hide text (getting around the screenreader problem), plus when images are turned off the text underneath it simply becomes visible (remaining accessibility).

h3 { 
  position: relative; 
  width: 200px; 
  height: 40px; 
}
  
h3 span { 
  background: url(header-replacement.gif) no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}                    
                    
<h3>
  <span></span>Replaced header
</h3>

Although the Gilder/Levin method works like a charm and hence looks like a viable image replacement option, some other issues remain (besides the non-semantic span tag). The most important ones not being able to select, copy and resize the text and secondly the inability to easily alter the text, which is now enclosed in an image.

(Scalable) Inman Flash Replacement (sIFR)

While the above methods replace text with images, IFR and its successor sIFR do so by using Flash. IFR is a product of both Shaun Inman and Mike Davidson, the latter continued development (together with Mark Wubben) on sIFR. sIFR is essentially a hybrid image replacement technique since it uses Flash, JavaScript, as well as CSS to perform the replacement. The JavaScript grabs assigned elements in the HTML document and swaps these out with a Flash file, which contains a pre-defined, embedded font. CSS can be used to further style the text.

The power of the technique lies in the ability of Flash to include fonts in its files. The text is also selectable and degrades gracefully when the replacement for whatever reason fails. sIFR is quite easy to implement and I would like to suggest this tutorial at Nettuts for a quick and to-the-point introduction. Downsides of the sIFR technique are increased load times, possible processor strain and its reliance on the Flash Player.

Facelift Image Replacement (FLIR)

Quite similar to sIFR, but with a twist, is the PHP-based FLIR. Image replacement is performed by server-side scripts in conjuction with JavaScript and CSS. The general advantage of FLIR over sIFR is that it is not platform or software (Flash) dependent. From that point of view FLIR offers a different approach by using regular images generated server-side. However, as with simple FIR, the property of text selection is lost.

The Future of Web Fonts: CSS3

We have been using CSS2 for quite some time now, actually it was published by the W3C as early as May 1998. To frustration of most, we are even today experiencing its anomalies in browser implementation. CSS level 3 seems to be around the corner as the W3C is actively working on its roadmap, but full software support will probably take some iterations. That doesn’t mean though we can’t have a look at what lies ahead.

Most noteworthy new feature is what the W3C dubbed the Web Fonts module. And in particular its @font-face rule. This rule lets you specify a custom font like so:

@font-face { font-family: "Rockwell"; src: url(rockwell.otf) format("opentype"); }

h2 { font-family: "Rockwell", serif; }

Two different contentions have arisen though: which font file format to support (TrueType versus OpenType) and a rights management subject. A more elaborate discussion regarding this can be read at Ars Technica. Once again different interests are involved, such as the proprietary formats and implementations of the main browser vendors. Thankfully though, the parties seem to be more and more converging towards standards. Something that is needed to hand over even more control to the designer in the future.

Conclusions & Best Practices

The dynamic nature of the web makes it unpredictable. People use a plethora of operating systems, browsers, screen sizes, etc. This is why it is unlike print, especially with regard to typography, where type setters have a lot more control over appearance.

The above image replacement techniques have emerged because of this seemingly ‘holdup’. While all of these techniques have their own merits, ideally we want the CSS3 implementation. It would free us from using all kinds of hacks, tricks, work-arounds and prevent overall overhead. And we would be in less of a risk of harming accessibility and SEO—assuming there is well implemented CSS3 browser support.

At this time though, sIFR seems to be the most popular and robust alternative. All of the currently available techniques have to fall back on degradation when images, JavaScript or Flash is turned off. So while we designers get some control, hopefully CSS3 will add to it.

A good practice when using image replacement is only applying it to non-body text. Multi-line support (although available with sIFR) is rigid and results in extraneous code and/or load. And inaccessibility becomes a much bigger threat here, since body text generally contains the most important bits of the content. Also, one could wonder if all of it is worth the hassle, considering body text is more about readability, not so much decoration.

Other potential CSS standards such as those for hyphenation and multi-column text layouts will likely one day become part of the specification. However, regarding its use, when you think of multi-column text for example, that’s a typical print phenomenon. A newspaper or magazine is scrolled horizontally, while web pages are vertically scrolled. Reading a tall column of text in a browser would inevitably result in several up- and downward scroll movements. Therefore the question remains to what extent we should want to duplicate print behaviour. The web is different from print for a reason, and that is what makes it such an unique and useful medium.

This article is concluded with some examples of great font use on the web. While many of them have made their appearance in all kinds of showcase galleries for more than one reason, the focus this time is on typography. When you look closely you will spot several of the image replacement techniques discussed.

Best of Typographic Sites

The Big Noob

Big and bold.

A List Apart

Well executed combination of serif and sans-serif fonts and elegant letter-spacing.

Hot Meteor

Great choice of fonts.

Jon Tangerine

Passionate blog about typography, using an experimental logotype.

Jason Santa Maria

Experimental magazine-style design.

Monocle

Gapers Block

Visually interesting newspaper style laid out across a nice grid.

Seed Conference

100% Times (New Roman), unfortunately aesthetics take a hit on XP with ClearType off.

J.R. Velasco

Bold choices of fonts and positioning, nevertheless an amazing looking compostion.

Shaun Inman

One of the guys behind sIFR.

Forty Seven Media

I Love Typography

A leading blog about everything typographic, has a well executed design itself.

Are you a Virgin?

Bearskinrug

Kevin Cornell is not only a great illustrator, but also a talented designer.

Rob Goodlatte

Bart-Jan Verhoef

Grungy design with nice touches of handwritten fonts.

HUGE

HUGE font.

Erratic Wisdom

A Working Library

Elegant minimalism.

The Old State

Amazing classy typography.

Author’s Bio

Juul Coolen is a young, aspiring web designer slash developer. He is into clean and minimalistic design and thinks usability is important. You can find him as well at Shift (px).