A quick lesson on fonts and how to use ’em

There are basic rules-of-thumb followed by good designers when choosing fonts. The guidelines below apply to any documents, with special notes about website design as well. Your readers will thank you for learning these basics!

Use standard fonts for your primary content.

For websites, it is important to use standard fonts to ensure that your pages will render properly. In addition, familiar fonts are easy on the eyes for large blocks of text, making your content easier to read.

Use decorative fonts sparingly.

Using funky and fun fonts is a great way to add interest to your design, but can be a big turn off if there is too much of it. If want to use a nifty new font you found, use it sparingly for areas like titles, drop caps, or pulled quotes.

Understand the difference between serif and sans-serif.

A sans-serif font is one without “feet” on it. Compare:

serif-font
 a serif font (notice the “feet” on the T)

sans-serif-font
a sans-serif font (no “feet”)

For websites, sans serif fonts such as Helvetica, Arial or Verdana are commonly used for smaller body text. A computer screen displays fonts at a lower resolution than printed material. At small sizes those little “feet” may disappear, making your page to read. For printed material, it’s often simply a matter of preference. Newspapers typically use a serif font because the variations and the letter help the move the readers eye along.

If text isn’t in a narrow column, don’t justify it.

Don’t justify text unless you are designing a document with narrow columns, such as a newsletter or newspaper. It often gives your sentences awkward spacing issues and is more distracting than attractive.

Use subheadings to improve readability.

Subheadings help organize your content. This is extremely important on web sites, because users do not read your text, they scan it. Organizing it with headings, subheadings and other structural cues, help guide your reader along.

Don’t use ALL CAPS for sentences.

In the online world, using all caps is considered “yelling” and may offend people. In addition, it’s hard to read. People can read text more quickly if it has a variety of shapes to help the eye along.

FOR EXAMPLE, THIS SENTENCE IS WRITTEN IN ALL CAPS AND IS DIFFICULT FOR PEOPLE TO READ BECAUSE ALL THE LETTERS ARE BASICALLY THE SAME SHAPE AND SIZE.

With this in mind, all caps can be very effective in drawing your attention to something on the page. As with the attributes listed below, a little goes a long way.

Use bold, italics and underlining wisely.

Similar to the tip above, use bold and italics sparingly. Whatever you do, don’t use all caps, bold and italics at the same time.

  • Bold is very useful in headings, definitions listings, etc. On this page, it helps the reader scan the page for the main points.
  • Italics is used to emphasize a word, or for the titles of books or CDs. Note that italics is used instead of quotes. (Example: The Color Purple was written by Alice Walker.)
  • DO NOT FORMAT YOUR TEXT LIKE THIS. Using ALL CAPS, bold and italics at the same time is amateurish and unnecessary.
  • Underlining – On web pages, underlining is used to indicate a link. It is confusing to people if you use underlining for any other purpose. In print material, underlines are sometimes used provide definitions, or to indicate a title, but italics is generally preferred.

Don’t use comic sans.

As a final tip, don’t use the Comic Sans font. It’s the surest way to give yourself away as an amateur. It was intended to be a young and playful font, perhaps useful for something like a preschool flyer. However it has been overused and is mocked (absurdly so, perhaps) throughout the creative community. See What’s So Wrong with Comic Sans for the BBC’s take on the reviled font.

Other hated fonts include Papyrus, Brush Script and many others. When in doubt, use Helvetica and Garamond. It may not be the most creative choice, but it’s a good safe bet that won’t make you the subject of mockery.

Resources

Want to learn more? I suggest the following resources: