Fonts and Typefaces
By: Aaron B. Copyright AaronOutpost.com

Back to Web Design Tutorials 

Default Fonts
Well if you don't know it already, a font must be installed on the users computer in order for it to show up. Sure, you can list any font you want to run on your website. But if their computer doesn't recognize it, it is going to display the default font selected by the computer which is usually "Times New Roman" and "Times" on Macintosh machines.

Serif & Sans-Serif (Generic TypeFaces)
Serif and Sans=Serif are typeface categories which most fonts fall into. 
Serif: font has curly bits at the top and bottom ends on the letters
Sans-Serif: does not have the curly bits.

The serif typefaces are easier to read on paper, which is why serif typefaces are used in newspapers and books, but the sans-serif typefaces are easier to read on a computer screen.


Web Safe Fonts
However, there are some commonly used fonts by webpage designers. They use these fonts because, they are usually always installed on the computer by default. These are know as Web Safe Fonts that are installed on almost all machines.

Times New Roman, Bold, Italic, Bold Italic
Times New Roman (Windows) or Times (Apple Mac) has a serif typeface and is available on virtually all computers.

Arial, Bold, Italic, Bold Italic
Arial is a sans-serif font and is available on all Windows machines or Helvetica which is a very similar font available on the Apple Mac. This is by far my favorite font. Especially since it is very aesthetically pleasing on both the Windows and Mac pc's.

Courier New, Bold, Italic, Bold Italic
Courier New or Courier on the Apple Mac is serif font that has spaces between the letters much like a typewriter.

Verdana, Bold, Italic, Bold Italic
Verdana is a sans-serif font that is easy to read. This font comes with Internet Explorer 4+ for Windows and Apple Mac machines.

What is really neat about HTML coding for fonts is, if the user does not have the font installed on their computer, you can designate more then one font.

Use the HTML font tag to specify several font tags with the with the font you want to use first, followed by similar fonts on other machines, and incase the user does not have the fonts then place a generic typeface last:

              <font face="Arial, Helvetica, sans-serif"> My Favorite Font for Windows & Mac </font>

More info on fonts at Text Layout Tutorial