Font Families - Serif, Sans-Serif, Monospace, Script, Fantasy
One of the easiest ways to impact the design of a Web page is with the fonts that you use. But many beginning Web designers often go crazy changing fonts every couple words and experimenting with fonts that are virtually unreadable, just because they are "cool". This guide will help you find the font that works best for your situation.
Some Rules-of-Thumb
-
Don't use more than 3-4 fonts on any one page.
-
Don't change the font in mid sentence unless you have a very good reason.
-
Sans serif for online, serif for print.
-
Monospace for typewriter and code.
-
Script and fantasy for accents.
Sans-serif Fonts are the Basis of Your Site
Sans-serif fonts are those fonts that have no "serifs": the little hooks on the end of the letters. If you've taken any print design courses you've probably been told that you should only use sans-serif for headlines. This is not true for the Web. Web pages are intended to be viewed by Web browsers on computer monitors. And computer monitors don't have as good of resolution as paper. This means that when your readers view a page of serif font on the screen, the little serifs all blur together and start making the text harder to read. Always use sans-serif fonts for your Web page main copy.
Some examples of sans-serif fonts are:
-
Arial
-
Geneva
-
Helvetica
-
Lucida Sans
-
Trebuchet
-
Verdana
Verdana is a font family that was actually invented for use on the Web.
Use Serif Fonts for Print
While serif fonts are hard to read online, they are perfect for print. If you have print friendly versions of your site, this is the perfect place to use serif fonts. The serifs, in print, make it easier to read, as they allow people to differentiate the letters more clearly. And because print has a higher resolution, they can be seen more clearly and don't appear to blur together. Always use serif fonts for your print-friendly pages.
Some examples of serif fonts are:
-
Garamond
-
Georgia
-
New York
-
Times
-
Times New Roman
Monospace is for Code Examples
Even if your site isn't about computing, you can use monospace to provide instructions, give examples, or imply typewritten text. Monospace letters have the same width for each character, so they always take up the same amount of space on the page. Typewriters typically used monospace fonts.
Some examples of monospace fonts are:
-
Courier
-
Courier New
-
Lucida Console
-
Monaco
Do Not Use Fantasy or Cursive for Body Text
Fantasy and cursive fonts are not as wide-spread on computers, and in general can be hard to read in large chunks. While you might like the effect of a diary or other personal record that using a cursive font might give, your readers might have trouble. This is especially true if your audience includes non-native speakers. Also, fantasy and cursive fonts don't always include accent characters or other special characters which limits your text to English. Use fantasy and cursive fonts in images and as headlines or call-outs. Keep them short and be aware that whatever font you choose will probably not be on a majority of your readers' computers.
Some examples of fantasy fonts are:
-
Copperplate
-
Desdemona
-
Impact
-
Kino
Impact is the font family most likely to be on Mac, Windows, and Unix machines.
Some examples of script fonts are:
-
Comic Sans MS
-
Lucida Handwriting
-
Zapf Chancery