The many font choices available for online copy and graphics can make web font selection a confusing process. However, the growing body of web readability research attests to two simple principles for creating highly-readable copy online. First, forget the old rules of print typography. Second, remember that creating the best experience for readers online requires attention to much more than font choice.
Choosing the Best Website Font
While "serif" fonts like Times New Roman have long been the standard for print publications, they are not considered a good option for website readability. In 2000, a Wichita State University's Software Usability Research Laboratory (SURL) study documented that serif fonts impede online reading because of low screen resolutions and the reader experience of "visual clutter." The overwhelming majority of research since that time has agreed with the findings of the 2000 study.
As a result, design experts almost unanimously recommend "sans serif" fonts. The big difference? Sans serif typefaces are "stripped-down" fonts featuring none of the stroke details of serif. As a result, sans serif fonts provide a cleaner, smoother on-screen reading experience. Non-Serif fonts that make good web copy include:
Fonts to Avoid
With serif fonts, the letters feature small decorative flourishes at the ends of line strokes. These fonts mimic handwriting and - in print - effectively lad the reader's eye from one print letter to the next. While this detailed style of print has served readers well for 500 years, they do not work so well on the computer screen. On screen, the line endings and embellishments of serif fonts can appear fuzzy to readers. In addition to Time New Roman, other examples of serif fonts include Garamond, Century and Courier.
Additional Readability Considerations
Font Size Selection
Font size is very important to readability. While using 12-point fonts for most body text has traditionally been the standard design advice, that recommendation is changing as the Baby Boomer generation ages and as online access increasingly goes mobile.
- The U.S. National Institute on Aging suggests that web designers consider using a larger, 14-point typeface for main body text.
- Leading web copywriting blogs such as Social Triggers have begun advising website owners and bloggers to move toward larger font sizes to enhance readability for all visitors on all devices.
Styling fonts for readability is as important as font selection. Simplicity is the key. Style your copy simply, avoiding a lot of visual flourishes.
Limit the Use of Italics
The slanting of the text robs individual letters of definition, so it's best to use italics only to emphasize words or short phrases. Additionally, long italicized passages in any font pose real challenges for visually impaired readers.
Limit Font Style Variations
Using two different font styles to distinguish headings from body text can enhance a page, but having more than three different typefaces on a single web page detracts from the overall visual appeal of the page.
Organize with Bold Text
Limited use of boldfaced text in varying font sizes can enhance organization and "skimmability." It's best to reserve boldface styling for cueing the reader to structure and hierarchy. An easy way to think about when to use bold vs italics is to remember that italics emphasizes; boldface organizes.
Simplicity and Readability
While great web designers may differ on typography preferences and best practices, all agree that simplicity and readability must guide design. One or two sans serif fonts on a page enhance text clarity while selective styling guides emphasis and structure. In addition, generous margins boost comprehension. When it comes to readability online, perhaps the best guideline to remember is, "less is more." See Rules for Web Design for more ideas you can use to enhance the visual appeal of your website.