it is best to use a standard web-safe font.
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:
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;
|font-family: Georgia, serif;
|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;
|font-family: 'Arial Black', Gadget, sans-serif;
||Arial Black, Gadget
|font-family: Impact, Charcoal, sans-serif;
|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;
|font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
||Lucida Sans Unicode, Lucida Grande
|font-family: Tahoma, Geneva, sans-serif;
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;
|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