Knowing About Web Safe Fonts

What are Web safe fonts?
Practically every personal computer has a set of fonts installed. These fonts are usually put there by the computer manufacturer or are the default sets of fonts for the operating system that computer is using. It's possible to install additional fonts on your own.



However, not all font sets are created equal. Different computers can have very different sets of fonts installed, and most casual computer users never know the difference. When you are designing a Webpage, 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 (and often unattractively) on the visitor's machine.



So, how do you make sure that your fonts will look good on the largest number of computers out there? Easy: use Web safe fonts. As computing evolves, considerations for the Web have taken effect for modern operating systems and Web browsers. Among these considerations is a list of Web safe fonts that Web designers can use to make sure their fonts render properly. Web safe fonts are a set of highly common fonts that come installed on just about every computer out there. Some (really) older computers may not have a few of the fonts that we consider Web safe today, but they are a minority.

Who should use Web Safe Fonts?

Every Web designer should use Web safe fonts. There are some cases where you will want to use a special, non-Web-safe font, but these cases are rare (and we'll discuss cases like this in a bit). You want to make sure your fonts are always easily read by your users. By keeping your fonts readable with Web safe fonts, you retain readership and make your site more accessible to a wider range of people.



I guess the best answer to the question "who should use Web safe fonts" can be summed up in one word: "you."

Why use web safe fonts?

As explained above, if you use a font on your page that your visitor doesn't have installed, their browser will pick a fallback font that you may not intend to appear on your page. Often, the result is ugly text that is not at all pleasing to read.



If a visitor can't fluidly read your site, then he or she can't get the information you provided, and this is the whole reason your visitors are at your site! Even if the text on your site is ugly and someone decides to trudge through it for your content, it will still look displeasing and you will retain fewer readers. A Website with no readers is a waste.



Using Web safe fonts is just one part of a larger set of design practices that keep your site user friendly. Don't strain a reader's eyes, don't make information difficult to find, and make sure they can progress through your site and content without having to think about it. (You can read a detailed article about building your typography here.) If at any point someone looks at your site and takes even a millisecond to think, "Ugh, that's some ugly text," you've jarred the experience. Ideally, the entire encounter with your site should be smooth as silk, and using a Web safe font is a big part of attaining that goal.

When to use Web safe fonts?

As a general rule, always use Web safe fonts for your page's content.

Where are web safe fonts applicable?

Your plain text headers, links, and content should all use Web safe fonts. If you plan to use normal text for your logo, you should also use a Web safe font for that. In fact, one of the few exceptions to using Web safe fonts is if you decide to use text in your images. If you plan to use images for some of your text, then it's safe to use other fonts because images will appear the same on the visitor's computer as it does on your own. However, you should never use images for all of your text. Images for text should be used sparingly. Logos and some headers may use images. Everything that's content or otherwise normal text, though, should use a Web safe font.

How do I use Web safe fonts, and which ones are safe?

Include Web safe fonts in your CSS with font or font-family rules. (I've included the most useful ones below for you.)



There are a good number of Web safe fonts. Many of them look very similar to other Web safe fonts, and in practice they are essentially the same. A CSS rule for your font family, for example, may look like this:

font-family: Arial, Helvetica, sans-serif;

The first font listed, Arial, is an extremely common font available on most computers, so you can safely bet that it will show up properly on a visitor's screen when they visit your site. In rare cases, a computer may not have Arial installed, however. Older Apple computers, for example, may not have Arial, as well as several other fonts. Helvetica, though, is widely installed among Apple computers, and it looks very similar to Arial, so Helvetica is listed second. When a browser cannot find the first font listed, it looks for the next fonts in order. In this case, Helvetica will be used when Arial is not installed.



And in extremely rare cases, some computers may not have Arial or Helvetica installed. In this case, "sans-serif" is used. This is a fallback, default font that the Web browser will use if it cannot find any of the previously listed fonts.



There are four types (or families) of Web safe fonts: serif, sans serif, cursive, and monospace. Each of these has their own fallback font (like sans-serif above). The fallbacks for each family, respectively, are: serif, sans-serif, cursive, and monospace. You will find that font rules almost always include one of these fallbacks, and always last.



The fonts are listed in CSS format so you can easily copy and paste them if you don't feel like typing them out. This is likely how you will be seeing the fonts most of the time, anyway.

Serif Web Safe Fonts

The art of Web design has many general guidelines that have taken hold as the Web has become more firmly rooted in the Web 2.0 setting. We have other articles that discuss when to use serif and sans serif fonts, so all I will say here is that, in general, serifs have generally been used mainly for headings. Below are the Web safe fonts that you can use for your serifs.

font-family: 'Bookman Old Style', serif;	Bookman Old Style
font-family: Garamond, serif;	Garamond
font-family: Georgia, serif;	Georgia
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;	Palatino Linotype, Book Antiqua
font-family: 'Times New Roman', Times, serif;	Times New Roman, Times

Sans Serif Web Safe Fonts

Sans serifs are typically used for the bulk of the content on a Web site.

font-family: Arial, Helvetica, sans-serif;	Arial, Helvetica
font-family: 'Arial Black', Gadget, sans-serif;	Arial Black, Gadget
font-family: Impact, Charcoal, sans-serif;	Impact, Charcoal
font-family: 'MS Sans Serif', Geneva, sans-serif;	MS Sans Serif, Geneva
font-family: 'MS Serif', 'New York', sans-serif;	MS Serif, New York
font-family: 'Trebuchet MS', Helvetica, sans-serif;	Trebuchet MS, Helvetica
font-family: Verdana, Geneva, sans-serif;	Verdana, Geneva
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;	Lucida Sans Unicode, Lucida Grande
font-family: Tahoma, Geneva, sans-serif;	Tahoma, Geneva

Monospace Web Safe Fonts

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.

font-family: Courier, monospace;	Courier
font-family: 'Courier New', Courier, monospace;	Courier New, Courier
font-family: 'Lucida Console', Monaco, monospace;	Lucida Console, Monaco

"Cursive" Web Safe Fonts

Currently, there aren't many Web safe cursive fonts. There is a "cursive" fallback, like sans-serif, serif, and monospace, but for the most part this is highly unused. There's some debate whether Comic Sans MS is a compatible match with the cursive fallback font. Some think Comic Sans MS belongs with sans serif fonts, and others say it's the closest font to a normal "cursive"-like feel that you can currently get in a Web safe font.



In any case, cursive and Comic Sans MS are typically avoided. Personally, my opinion is that you should avoid both of these altogether.

font-family: 'Comic Sans MS', cursive;

Comic Sans MS

In some cases, can I use other fonts?

Yes, there are some exceptions to the "always use Web safe fonts" rule. Sometimes due to circumstances out of your control, you simply must use a font that is not considered Web safe. A client, for example, may have a business that has used the same font for their company's signs, trademarks, and logos for over a century. Bringing a business like that to the Web without losing its long-standing integrity and brand recognition would likely be impossible with a Web safe font.



Or, perhaps you, as a designer, want to experiment with design and take things to the bleeding edge. I've always believed that true artistry and experimentation lies in the artist's ability to see beyond the normal scope and step away from standard practices. If you share this idea, then undoubtedly at some point you're going to look for ways to tinker with non-Web-safe fonts in your pages.



Below are the best ways to use non-Web-safe fonts in your page, and still have them render properly on most computers out there.

Provide downloads for your users

If you want to use a very specific font for your site, you can include a link to the font file on your page. In this way, visitors can download and install the font, then visit your page and see the font rendered properly with no real drawbacks.



This is a lot of work to expect the visitor to do, though, just to view your site as you want them to see it. The visitor doesn't usually want to do anything special just to view a Webpage. Requiring that someone go through the trouble of downloading and installing a font just to view your site is a great way to lose visitors. Odds are, most of your visitors won't even know where to begin installing the font, anyway.



There are also some potential legal issues if you take this route. If you are not the person who created the font, then most likely you do not have the legal rights to distribute it.



Because of these major flaws, this method is widely avoided.

Use images

When you use an image editor like Photoshop, The GIMP, or even MS Paint, you can create images that use any font you like. Put the image on your page and it will look the same on a visitor's computer as it does on yours. Below is an image that uses three non-Web-safe fonts that came pre-installed on my Macbook.

Whether you, as this site's visitor, are on a Mac, a Windows PC, in your favorite flavor of Linux, or even surfing on something else like a PDA or iPhone, the fonts above show up properly. This is true even if your PC doesn't have these fonts installed.



This is a great way to display any font you like for your logo, advertisements, or some of your headers. However, you cannot rely on images for actual content. A visitor cannot highlight text with the mouse, meaning that if they want to copy and paste your text somewhere (say, to send your business name to a friend), they can't do it. Also, text in images cannot be read by screen readers, which some handicapped people use to browse the web. Any text you have in your images will not be accessible to these people. Plus, some people browse with images turned off or have their images blocked by a third party, like in some corporate offices that use a proxy server. Finally, search engines cannot properly read and catalogue text within images.



All in all, any text you use in your images should primarily serve as purposeful decoration. There is an alternative though: use an image replacement technique.


There are techniques you can use in your CSS and (X)HTML that will let you use images in place of regular text while maintaining your site's accessibility and search engine friendliness. Notice the header above that reads "Image replacement techniques" is an image. It uses a font called Rockwell (which also came installed on my Macbook) and the font is green rather than the typical black we've been using.


This header utilizes an image replacement technique called Single Pixel <img> Replacement. It uses CSS and (X)HTML to display the image, but if someone has CSS turned off, the image will not show. To solve this problem, there is a hidden span element that will still neatly display the text "Image replacement techniques" for this header.



As for screen readers and other situations where images might not be accessible, there is a 1-pixel image with alt text that reads "Image replacement techniques." This way, we aren't harming accessibility and screen readers will still pick up the text as we intend it.



One of the only disadvantages to using this technique is that it adds some extraneous elements to your (X)HTML. They don't harm anything, but they do add more bulk to your work and the filesize of your document. It also makes it more difficult to follow when reading your site's code. Even still, it's a fantastic way to add rich typography to your site.



The astute reader may have already taken a peek at this section of the article to get a look at the CSS I used here. Please note that I had to modify the technique a bit for use on WPDFD since it already has pre-existing styles. If you want to try out this image replacement technique on your site, let me provide you the better code to work with.



I'll even give you he images to work with. First, download and save these. (Right-click and save.)

• spacer.gif — yes, I know the general feelings about spacer.gif. Let's keep it between us, just this once.
• irt.gif. This is the header image.

Second, add this code to your CSS file.

#header {

     width: 250px;

     height: 30px;

     background-image: url(irt.gif);

     }

 #header span {

     display: none;

     }

Finally, implement the image replacement with this in your (X)HTML:

<h3 id="header">

     <img src="spacer.gif" alt="Image replacement techniques" />

     <span>Image replacement techniques</span>

 </h3>

View it in a browser, and you should see the effect at work. You can find a list of image replacement techniques over at mezzoblue, which is where I was introduced to this particular image replacement technique.

Use sIFR

sIFR (Scalable Inman Flash Replacement) is perhaps the most popular way of using rich, beautiful fonts on your page. Indeed, you can see an example of it at the top of every WPDFD article. This article's title, "Knowing About Web Safe Fonts," is displayed for most users in a font called Interstate, which is not typically a Web safe font.



There are only a few steps to setting up sIFR, including a process called "font tuning" (don't worry, it's not tough), but it still generally takes even an experienced Web designer/developer roughly 10 minutes to set it up across a site that didn't previously use it.



It is easy to set up, however, and its benefits are many. It provides scalable, accessible text in a font of your choosing by dropping a Flash element with a transparent background in place of your original text. If a visitor to your site doesn't have javascript, Flash, or either installed, then your text is still displayed on your page in a CSS-styled, normal header.



Personally, sIFR is the method I would recommend if you want to really strengthen your site's typography. It's important to note, though, that sIFR should not be used for the main content of your site. Use it for headers, quotes, slogans, and other small, but significant, bits of text.



Currently, sIFR 2 is the standard, but sIFR 3 is in beta testing. When sIFR 3 is out of beta and I've had some time to play with it, I fully intend on covering this topic in more detail. In the meantime, if sIFR interests you but you don't want to go through all the setup, you might want to take a look at a tool that does it all for you.

So there you have it!

Well, you came upon this page and read through this article so you can stay informed on Web safe fonts, and now you know all the most important aspects of them. It's probably a good idea to bookmark this page so you can have a list of Web safe fonts handy at all times.