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.
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
Times New Roman
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.
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
Decoration (underline, blink, strike through etc)
Transformation (caps, lowercase etc)
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 does work well but does have many disadvantages
The designer requires flash editor to create the files
Many mobile phones cannot view flash.
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
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.
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.