In the print world a typeface is a set of printable characters that go together, such as Times Roman (designed by Stanley Morison in 1931) or Helvetica (designed by Max Miedinger in 1957). A font is a particular size of typeface, such as 12-point Times Roman, or 11-point Helvetica. For some reason—probably because it’s a shorter word—the computer world uses font to mean typeface. I’ll do the same. Font is the term used in the Cascading Style Sheets specification, so there’s no point in trying to keep the old printers’ distinction alive.
Designers can and do create new typefaces (sorry, fonts) all the time. But they won’t work on the Web unless they are already installed on every visitor’s computer.
I hope you didn’t let that disturbing fact glide past you. Yes, the only fonts in which a visitor can see normal text are fonts installed on that visitor’s own machine. I came across a “tutorial page†a couple of years ago, in which the page author gave some examples of fonts. “This is BigBear font,†he said. “This is MiddleBear font. This is LittleBear font.†(Or whatever.) He clearly didn’t realise that all three would come up in my browser as Times New Roman (Microsoft’s version of Stanley Morison). I didn’t have his fonts installed on my machine.
What a designer can do is incorporate special fonts in images. This is fine for headers and side bars and so on—but hopeless for pages where there is a lot of text or the text needs occasional revision. If you want to add or change a word in ordinary text, it takes a second. If it’s in an image, you have to re-design the whole image.
For Flash animations and presentations, you can also use any font of your choice. Flash will download all the characters you need onto your visitor’s computer. But again, this takes time, and would not be the solution of choice for typical text.
So what, as a designer, are you left with? Which fonts are installed on every computer?
The answer is: just about none. Leaving to one side the fact that even if a particular brand of computer always comes with a particular font installed, the user can uninstall it (well, they wouldn’t expect a similar Web experience to others, would they?) there is more than one brand of computer. PCs and Macs, for example, live in different visual worlds. Not to mention Sun machines, Linux machines…
The solution in CSS is to rely on ‘font families’, in other words, fonts that are visually similar if not the same. Does this open up a whole new world of choice?
Alas, no. There are, effectively, only four choices: serif, sans-serif, cursive, monospace. If you take a chance on the most commonly found fonts, that brings your options to eleven:
Arial, Helvetica, sans-serif
‘Book Antiqua’, Palatino, serif
‘Comic Sans MS’, cursive
‘Courier New’, Courier, monospace
Georgia, serif
Impact, Charcoal, sans-serif
‘Lucida Console’, Monaco, monospace
Tahoma, Geneva, sans-serif
‘Times New Roman’, Times, serif
‘Trebuchet MS’, Helvetica, sans-serif
Verdana, Geneva, sans-serif
I’ll have some more to say about each family in future posts. If you’re someone who commissions designers, or has ambitions as a designer yourself, I hope you already appreciate that text is just one design element—and we’ve hardly begun to scratch the surface of what needs to be considered.
