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.

Related posts:

  1. Understanding URLs
  2. Download Our Tutorials in PDF Format
  3. Character Entities
  4. Formatting Tables
  5. Background Color & Images – Not Tables!
  6. Images <img>
  7. Hyperlinks and Anchors <a>
  8. Font Color Property
  9. HTML Colors
  10. Font Sizes
  11. Font Styles and Line Spacing
  12. Menu Lists <ul>, Definition Lists <dl>
  13. HTML <!– Comments –>
  14. Horizontal Rules <hr>
  15. Heading Tag <h1> – <h6>
  16. Paragraph Tags <p>
  17. HTML Attributes and Elements
  18. HTML 4.01 Strict: Structure
  19. Beginner HTML: Terms
  20. Beginner HTML: Your First Webpage
  21. CSS: Menu Lists
  22. SEO: Image Optimization
  23. CSS: Font Properties
  24. CSS Tutorials
  25. Javascript Tutorials
  26. KDWHD Tutorials
  27. eBay Tutorials
  28. SEO Tutorials
  29. HTML 4.01 Strict Tutorials
  30. SEO: Keyword Selection