Love the web

The methods and problems of making pretty headings

The limited selection of typefaces at web designers' disposal is an ever present headache. It's limiting for businesses who want their visual identity portrayed accurately online, it casts a bland typographic shadow over the medium and it's the first thing any typography based print designer worth their weight in carbon, sights as the main problem with designing for the web. Alright, the last point may seem somewhat irrelevant, but as a web designer I'm tired of standing around in pubs defending type on the web.

It's not all doom and gloom; there are very valid upsides to having a small group of HTML typefaces and there are several reasonably good ways to work around this limitation in order to produce headings in alternative typefaces.

Popular methods of producing headings in
alternative typefaces.

There are three main techniques currently being employed by web designers and developers:

1. 
   Manually generating heading graphics one by one and (hopefully) employing some css text replacement.
2. 
   SIFR - Scalable Inman Flash Replacement. This method replaces the HTML text with a flash movie of the same text
3. 
   Dynamic Text Replacement. This method replaces the HTML text with an image of the same text.

Why would you use one of these methods?

They all allow the use of alternative typefaces for headings. This freedom, when wielded wisely, can transform the design and personality of a website and often permits much better cohesion between a companies online and offline marketing material. All methods involve sitting images or flash movies over the top of HTML. Which means the headings are still searchable, semantically correct and accessible to screen readers and other devices (bar some small exceptions).

Why wouldn't you use one of these methods?

There are several problems common to all: they require the user to download more than simple HTML and CSS to view the headings, they impair the accessibility of the text through lack of scalability and all are more time consuming to implement than simple HTML. Simplicity and elegance lies with straight HTML text, unfortunately the much needed typographic freedom does not.

There are further specific problems with each method. The first method (manually generating headings) is time consuming, costly, and not feasible for user / client generated content. With this method each time a new heading is needed it must be manually typeset in photoshop (or similar) exported in a suitable format and uploaded to the server. The hidden HTML text must also be created, and often there are CSS changes required. The upside to this method is absolute typographic control - no bad dynamic or flash rendering and kerning problems. The second method (SIFR) requires running flash sniffing scripts and loading the flash player, which is a noticeable slowing effect on a websites load time. The third method (dynamic text replacement) requires downloading images, and produces headings which do not have rollover states and are not selectable or scaleable.

There is no perfect solution currently available to the designer / developer and each project demands a different method.

CSS3, the future, and an end to hacksaw headings. (Hopefully.)

The ideal solution is potentially not far away. CSS3 has (and indeed CSS2 also had) the facilities to render any typeface you like as HTML text. By placing a .ttf font file on a server, you can reference it in the CSS, similar to currently, and it will be displayed as HTML. There are two main reasons this technique is not widely used:

1. There is a complete lack of browser support - of the contemporary crop only Safari supports this CSS feature.
2. Typefaces are legally copyrighted and there are concerns over how this copyright will be protected if they sit on a webserver potentially open for users to download and use.

Will this potential future be good?

On first impression it sounds wonderful - any typeface you like with all the benefits of being simple HTML text. I'll be kicking Arial to the gutter immediately in favour of any one of the better sans-serif typefaces out there. However, with this freedom comes a potential disaster; much like the desktop publishing boom brought an endless supply of rubbish design to paper, the easy use of any typeface on the web allows the average would-be-blink-tag-user who calls himself a designer to attack his content with the plethora of terrible 'free web fonts'.

The limited set of fonts we currently have in our suitcase may in fact be the most important thing keeping the web legible. It is easy to imagine that dreamweaver, in the wrong hands, will quickly become nightmareweaver.

Andrew Hovey was Creative Director at Springload till May 2008 when he spread his wings and set out to discover the world. He's now swanning about in Europe somewhere but continues to stay in touch with the Springload team (we can't stop him sending us emails no matter how hard we try).