Web fonts in practice
We can never be sure that users will have the fonts we specify available on their web connected clients; not everyone will be using Internet Explorer as their browser, or will have installed Microsoft products on their computers.
However, there are ways to 'get around' the missing fonts problem; both Cascading Style Sheets (CSS) and the FONT tag allow us to supply a list of fonts that we would like to be used, and a generic font style if all else fails.
Here is an example style sheet:
Body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
I have chosen Verdana as my prefered font for its readability even when users have set their default text size small. But this is a Microsoft font which comes with Windows 95 and above on PCs - It's likely to be available on the Mac, but it is not part of the basic fonts set that comes with it.
Also, it is a relatively new font and may not be built into earlier versions of the Windows operating systems.Therefore, I have specified Arial for those PC users, who do not have Verdana on their systems, and Helvetica (the Mac equivalent to Arial), for those who will be using Macs and don't have Arial or Verdana.
Finally, I have specified that, if all else fails, use the browsers default sans serif font.
Using the FONT tag
For those still using the FONT tag here is the equivalent instruction:
<FONT FACE="Verdana, Arial, Helvetica">Some text</FONT>
Although the font tag has been deprecated, meaning that browsers are no longer required to support it, it is still widely used by designers and still supported by all major browsers.
I don't recommend the use of the font tag for two reasons, firstly it is no longer included in the current HTML standard, and secondly, the use of FONT tag brings with it accessibility issues:
- Setting the FONT tag 'color' and 'face' attributes should be avoided because users may not be able to override your preferrences with their own. This could cause problems for, among others, people who are colour blind.
- If using the font tag to set the size of text, use FONT size= +1 or FONT size= -1 rather than font size = 1. Setting the font size to 1 may make the text too small for many users (although if they know how to change their preferences they can increase the size of the font).
- Many web designers use the Font tag to format text to make it look like a heading, rather than using the appropriate heading element. This makes pages less accessible for people using text only browsers or speech based browsers; because valuable structural information will be lost. (The same goes for using CSS to replace appropriate HTML elements)
See What's wrong with the FONT element? for more information about why the font tag should not be your number one way of setting font style attributes.
For those with 'text only' browsers, using the Font tag to set styles, font size, and colours will not have any impact, because the formatting instructions will just be ignored.
Designers set the size of fonts on a page using the basefont and font element. These element are used to set the size of text on a page to one of 7 relative values, 1 being the smallest and 7 the largest, 3 is the equivalent to normal (default font size is set by the users browser). Each size is successsively 20% larger or smaller than the default.
Index | Next: Why not use images instead?