Highlights

News, Tweets & Thoughts
Blog | Top Tips

Fontastic Fonts


Ask any designer who makes the move from print to web and they will tell you the huge limitations that the web still has for text and fonts. One of the most common problems has been that any visitor to a website requires a font installed on their machine for the text to be displayed. Designers have typically been ‘constrained’ to a small number of ‘safe web fonts’, such as Arial, Times New Roman and Verdana.

There are many options available that are used as workarounds, with the main four being;

Images
sIFR
Cufon / Typeface
@font-face

Images
The traditional and most commonly used method today, is replacing text with images to create the desired effect. It is simple to just whip open Photoshop, change the text and save it out as a .jpeg, .gif or .png. This is search engine friendly, relatively easy to do and, if done properly (such as using CSS sprites), quick to load.

Text images are more than adequate for static pages, but once dynamic text is required (such as on websites with databases), it becomes impossible to manage. There are various options available which try to tackle this problem, with the ‘sIFR’, ‘Cufon’ and ‘@font-face’ techniques being the most common.

sIFR
Appearing in 2005, sIFR (Scalable Inman Flash Replacement) is a way using Flash and Javascript to replace text elements on the page with Flash equivalents. It was expected to take off – but didn’t, due to it’s requirements of Javascript and Flash. In addition to notoriously slow rendering, sIFR also had problems displaying hyperlinks.
Despite several updates throughout the years, most people have moved on to either Cufon, TypeFace or @font-face.

Cufon / TypeFace
Cufon and Typeface are similar but try to make up for sIFR’s shortcomings. Both work by converting a regular font file into a Javascript file, which then displays text on your page and load faster than sIFR as they don’t require Flash.

Cufon however can cause confusion if a user tries to select text. Additionally, like sIFR, users won’t see the expected text when Javascript is disabled.

@font-face
CSS3 provides many new and exciting ways to do things, one of which is the @font-face technique.

The ‘@font-face’ has technically been around for a while – first implemented in in Internet Explorer since IE5. However it relied on the .eot (Embedded Open Type) font format, which other browsers don’t use. Meanwhile CSS3 allows @font-face to use TrueType (.ttf) or OpenType (.otf) – two common font formats – in the web.

When using the ‘@font-face’ technique, a visitor will download the font, which the page then uses to render the text. Provided the font’s owners allow its download, @font-face also relieves the number of server requests significantly.

Firefox 4 and Internet Explorer 9 release in March boast increased support with CSS3, so @font-face techniques can now be widely used as viewers update their browsers.

talk to us