Home > Web Design > What a load of fonts!!!!

What a load of fonts!!!!

February 12th, 2010

The use of typography is central to print design and has always been a contentious issue on the web, due to the various limitations of both web browsers and the operating systems which run them.

Early HTML

When the early HTML specifications were considered, it was recognised that being able to change fonts in web content was a requirement and hence the html <font> tag was added which allowed the color, font type and size of the font to be modified.

Color – This attribute allows for the selection of any colour via the standard RGB or hex values used on the web

Font – This allows for a specific font to be selected for example Arial, Verdana etc However it must be mentioned that the font selected here needs to be present on each computer which will be viewing the web page. Hence it was standard practice to select one of the main core fonts which is very limited, especially if you are selecting a common font across multiple operating systems.

These are a list of the common fonts to both Mac OS X and Windows

Arial
comic sans
Georgia
Impact
Lucida Console
Palatino Linotype
Tahoma
Times New Roman
Trebuchet MS
Verdana
Symbol
Webdings
MS Sans Serif

As you can see above the choice is extremely limited and commonly Verdana or Arial are selected with Trebuchet MS commonly used for headings.

Web Standards

With the introduction of web standards which separate out the web pages content from its styling came an improved interface to handle website text. Cascading Style Sheets (CSS) were introduced which give an opportunity to style the content using various parameters such as

Color
Alignment
Decoration (underline, blink, strike through etc)
Transformation (caps, lowercase etc)
Indent
Font Family – exactly the same as the font attribute above.
Size – can be in Pixels (px), Point (pt) and em’s (em).

Using CSS the style of the text on the entire website can be controlled in one place and eliminates the requirement to edit multiple pages to edit common styles.

While CSS is a massive improvement over the deprecated font tag of html, it still has the same problems which is the distinct lack of supported fonts. This initially was a big barrier which forced designers to be conservative with their font choice.

A compromise which is favoured is to use font stacks. A font stack is a comma separated list of fonts which are added to the font-family CSS property. An example font stack is shown below

font-family: helvetica, arial, verdana, times new roman;

The font stack works in a priority order from left to right, if the user has the first font on their system then this is used, if not then the second font is used etc. This allows the designer to add their ideal choice of font first in the list followed by more common fonts. This is an excellent compromise and is known as gradual degradation.

Some designers however cant accept that they cannot guarantee how a web page will look and require a fixed font which will look identical regardless of the machine used.

The following techniques force the use of a set font

Image replacement – This technique involves creating an image of the text styled with the exact font and replacing the html text with the image thus guaranteeing (assuming images are switched on) the use of the correct font. This technique is commonly used for the replacement of headings on a page. These headings are a vital part of search engine optimisation and using an image means that the search engine is not able to read the heading text and hence index it. To combat this, the title is entered as normal text and shifted off the screen using a negative indent and is replaced with the image. On the surface this is the ideal solution – however there are a few problems

If images are switched off then the user will not see any text at all as the image cant be shown and the other text has been shifted off the page.
Many sites now use a content management system to allow the frequent updates to the website. However using the image replacement technique means that the graphical headings have to be changed as well as the text and hence it can make a quick update very time consuming.

SIFR

This method uses the advantages of flash to provide font styling. In a flash movie the fonts used to style the text are embedded into the movie which means that regardless of whether the user has the font on their machine, the text will still be shown how the designer intended it to look. SIFR has used this to create a simple way to style text in a web page, they created a small flash file which has a text container. The file is edited in the flash editor, the font required is added and the flash file created. A javascript file then uses this flash file to replace all elements selected with flash versions, styled with the correct font.

SIFR does work well but does have many disadvantages

It requires that flash and javascript be available on the viewers machine. While both of these are commonplace, some people will still not see the font as you originally intended.
The designer requires flash editor to create the files
It is very slow to load due to having to load flash, css and javascript
Many mobile phones cannot view flash.

Cufon

Cufon performs a similar role to SIFR but doesnt use flash which is its major advantage. The first stage in a Cufon implementation is to select a font – TTF,otf etc and Cufon then converts this into a propriety font in SVG. VML is then used to convert the text concerned into the font chosen. The disadvantages with this method are as follows

The text is not selectable, which means that cutting an pasting text from the web page can be a problem
Most font founderies will not allow you to embed a font into javascript and hence your choice of fonts are limited.
The fonts are replaced at the last moment when I page loads and hence commonly there is a small flicker where the standard font is viewed before its converted.

Typekit

I believe this is the future of fonts and typography on the web. Typekit have formed links with a lot of the major font foundries around the world who have signed agreements to allow their fonts to be used by the Typekit system. To use a font – you simply pay a set fee for the year and you are given a javascript file to insert into your website. Once this is complete you can use the font name in your CSS file in a similar way to the CSS font stacks mentioned earlier. This does have the same disadvantage as the other font replacement methods listed above which is the requirement for javascript but it does degrade gracefully. The main disadvantage is that you can only use fonts from the foundries which have signed an agreement with Typekit. This can be a problem – for example common fonts we use here at Ozones humanist, Din and Swiss are not present on the Typekit site. Hence alternatives need to be selected but then this can lead to branding issues with is a whole different discussion.

To summarise there is no one font replacement technique which is perfect, however I feel that Typekit linked with CSS font stacks form the most favoured technique.

Web Design

Comments are closed.