Using fonts on web pages
Using a specific font in brochures, stationary and other printed material is simple, so why then is it such an issue when developing web pages?
Unlike the printed page the display of web page text is limited to the fonts available on each viewer’s own computer. The most commonly available Western fonts are just a small selection of around 10 or so, which can include Times New Roman, Arial, Verdana, Georgia, Trebuchet, Impact, etc.
When developing a web page the font to be used for say headers or paragraphs can be specified in a stylesheet like so:
h1 { font-family: Helvetica, Arial, Sans-Serif; }
This tells the page that for all headers size 1 (h1) try to use the font Helvetica, or, if that is not on the viewers computer, try Arial, or, if that is not on the viewers computer, try whatever sans-serif font they do have.
What if I want to use a font that is not commonly available?
If you decide you want to use a font that is not commonly available on your viewer’s computer, such as Sand, you could try and specify…
h1 { font-family: Sand, Helvetica, Arial, Sans-Serif; }
…which would work great for the ones that have Sand installed as we can see below…
…unfortunately for everyone else it would work down the list until it hit a font they do have installed. In the image below the viewer does not have Sand but does have Helvetica …
But I really want my viewers to see my font!
If you really want all your viewers to see the headers in your font of choice, just about the only way to do so is to use an image made using that font. Below is an example of such an image which, in contrast to this paragraph, you’ll notice you cannot cut and paste text from:
The downside of using images over text
Since the text is in fact a picture of text, it is essentially invisible to anything that can only read actual text such as a search engine or a text reader.
If you’d like to see this for yourself, try making the following setting in Internet Explorer:
Go to Tools > Internet Options > Advanced Multimedia > untick “Show pictures”
If you then reload this page you will be able to see how the “I look like text but I’m really an image” image disappears, leaving no actual text at all. That is how a search engine sees your page (Sidenote: that setting is also useful if you have a very slow connection and don’t want to waste time waiting for web page images to load.).
Another downside is the need to generate images for every header on the page. Updates to the page may also require redoing those images.
So what are the solutions?
- Stick to fonts commonly available on the majority of computers.
- While this is the least exciting option, it is the most failsafe and practical solution.
- Use an image but make sure it is not crucial to the understanding or value of the page
- By making the header more of a decorative addition you can somewhat side step the potential loss of functionality should it not be able to be seen. In practice it would be very hard to do this on a page with a number of headers. Search engines and text readers would also be less able to weight the elements of the page since there would be less structure to the text.
- Use an “image replacement technique”
- These are really hacks that try to have the best of both worlds; the viewer sees the image if they can but if not the text is available as a backup. There are many different alternatives, none of which have conclusively solved the issue.
Ultimately all web developers are waiting for this issue to be solved by updates to the various technologies involved. In the meantime, we are left to decide on the most appropriate solution (or combination of solutions) from those mentioned above.
