Practically every personal computer has a set of fonts installed. These fonts are the default fonts for the operating system. Different operating systems can have very different sets of fonts installed. When you are designing a Web site, you need to keep this in mind. If you decide to use a font on your page that a visitor doesn’t have, that font will render differently on the viewers machine – and often will be very ugly!
For this very reason you should only use Web safe fonts using the style attriute. The font family is set with the font-family property. More than one font family is specified in a comma-separated list:
<p style=”font-family: arial, helvetica, sans-serif;”>Content goes here.</p>
The first font listed, arial, is an extremely common font availale on most computers. In rare cases, a computer may not have arial installed. Helvetica, though, is widely installed among Apple computers, and it looks very similar to arial, so helvetica is listed second. And in extremely rare cases, some computers may not have arial or helvetica installed. In this case, sans-serif is used. This is a default font that the Web browser will use if it cannot find any of the previously listed fonts. There are four families of Web safe fonts:
Serif Web Safe Fonts
font-family: georgia, times, serif;
font-family: times new roman, times, serif;
Sans-Serif Web Safe Fonts
font-family: arial, helvetica, sans-serif;
font-family: verdana, geneva, sans-serif;
font-family: trebuchet ms, helvetica, sans-serif;
font-family: tahoma, geneva, sans-serif;
Monospace Web Safe Fonts
font-family: courier new, courier, monospace;
font-family: lucida console, monaco, monospace;
Cursive Web Safe Fonts
font-family: comic sans ms, cursive;
Common Fonts
The red ‘X’, indicates very common fonts; the green ‘X’‘ indicates Microsoft Core Web fonts which are somewhat less common for some operating systems; the grey ‘X’ indicates Vista fonts which may be installed in some older versions of Windows.
This tutorial was created on the Vista operating system, so fonts may vary in appearance depending on what system the viewer is using. On all examples, only the named font and generic font is being used.
| Generic Family | Font Name | Windows 2000/XP |
Windows Vista |
Mac OS X | Linux Unix |
| serif | Cambria | x | x | ||
| Constantina | x | x | |||
| Georgia | x | x | x | x | |
| Palatino Linotype | x | x | |||
| Times New Roman | x | x | x | x | |
| Times | x | x | |||
| sans-serif | Arial | x | x | x | x |
| Arial lack | x | x | x | x | |
| Arial Narrow | x | x | x | ||
| Caliri | x | x | |||
| Candara | x | x | |||
| Corel | x | x | |||
| Helvetica | x | x | |||
| Impact | x | x | x | x | |
| Tahoma | x | x | x | ||
| Treuchet MS | x | x | x | x | |
| Verdana | x | x | x | x | |
| cursive | Comic Sans MS | x | x | x | x |
| monospace | Andale Mono | x | x | x | x |
| Consolas | x | x | |||
| Courier | x | x | |||
| Courier New | x | x | x | x | |
| Lucida Console | x | x |
Tips and Notes: Monospace fonts are useful when you want to make sure characters all line up with exactly the same width. Displaying code or tabular data without using a table are good uses for monospace fonts. Currently, there aren’t many Web safe cursive fonts, and they should be avoided.
