News Flash! HTML text can only be rendered with fonts you have installed on your computer or internet device¹. Not everyone has the same fonts in stalled on their computer or internet device. This is nothing new. This is the way it has always been.
I know. This is a bummer. Go ahead and take a minute to get over it …
Now that you’re composed, this is how we deal with it.
First thing’s first. Do not make compositions of websites using non-web safe fonts for body type. The concept of HTML only being able to use system fonts to render text is difficult and time consuming to explain to most clients. It’s best to take every precaution to eliminate the need to explain it.
Now that we have that out of the way, you probably want to know what web safe fonts are, and more importantly, what the web safe fonts are.
Web safe fonts are fonts that you can pretty much count on being installed on the majority of devices that will be loading your website. By majority of devices, I mean pretty much every computer running Windows 95 or later, Mac OS 8.5 or later and the majority of Linux distributions that are capable of accessing the internet. I also mean most non-PC devices such as web TV, video game consoles, and mobile phones.
Without further delay, these are your web-safe fonts:
- Arial
- Times New Roman
- Verdana
- Georgia
- Comic Sans
- Trebuchet
- Courier New
I know. A pretty bleak selection. Go ahead and take another minute to get over it …
Now then, as with everything else on the web, there are no absolutes with font selection on the web. The whole nature of the web is to put the user in control. While this concept is generally frowned upon by graphic designers who are accustom to putting static things in static places that remain static until you wad them up and throw them away, on the web, this works to our advantage.
What the bitch goddess taketh away with one hand, she giveth with the other.
CSS allows us to specify any font we want for a web page, regardless of whether or not it is installed on the device rendering the page. When specifying a font, it is best select multiple fonts in order of importance. In effect, sayng to the user agent, “if the user has Verdana installed, use that, if not, use Helvetica, if not, use Arial, if none of those are available, just use whatever sans serif font is specified in their user agent preferences.
The CSS rule would look like this:
font-family: Verdana, Helvetica, Arial, sans-serif;
Notice how I specify Helvetica before Arial. Helvetica is a default system font on Mac OS X. It is not on Windows. Arial is a default font on both platforms, but Arial is a fucking piece of shit, so I only want it used as a last resort — if neither Verdana nor Helvetica are available.
When we take default fonts into consideration on a platform by platform basis, our options open up a bit. The following image shows default fonts for Mac OS and Windows, grouped by similar style.

Taking this concept to the next level, we could get creative by specifying default fonts on Mac OS X first, followed by similar Windows substitutes.
Go nuts with headings
While dealing with these harsh type face limitations for body copy, headings, navigation menus, and mastheads are another story. There are plenty of image replacement techniques to choose from that are highly accessible, and very easy to implement. All of which we will talk about in a forth coming post.
- Apple’s Webkit now supports the @font-face CSS rule that allows you to link to fonts on your web server and allows your web page to use them to render type.