Which Is the Better Font for the Web: Serif or Sans-Serif?
March 10, 2001 - written by Steven Moseley
Font selection is a topic of ever-growing interest for web designers. With greater selection of fonts and styling available to us with tools such as CSS, font-embedding, and Flash, we have to constantly reevaluate which fonts are most suitable for different applications on the web.
This article explores the age-old question for web designers: serif or sans-serif? I will begin with the assumption that serif is better for the web (my belief), and attempt to convince you, the reader, of that belief throughout the article.
(Note: There is some need for revision of this article - right now it's just a series of random thoughts - so I apologize in advance if I jump around a bit.)
Fonts in Print
In Reading Materials
Serif fonts (such as Times New Roman) are the preferred font for print media. Years of research have proven that they increase readership of printed materials by approximately 20% over sans-serif fonts (such as Arial, Helvetica or Verdana).
The main reasons for this are:
Serifs (the short lines at the end of the main strokes of the characters) make letters more easily discernable to the eye by adding visual information. This is demonstrable with the example of an upper case i and lower case L. In sans-serif fonts, the two letters are virtually indistinguishable aside from context, whereas in serif fonts, the serifs tell us which is which.
Virtually every book, magazine, and newspaper you've ever read uses the serif fonts, because of the reasons outlined in #1.
In Advertising
In print advertising, serif fonts are often used to mimic articles. This is an effective trick, pioneered by David Ogilvy, because readers subconsciously associate the ads with the articles they're seeking.
Fonts on the Web
Interestingly, digital media don't strictly adhere to the rules defined for print. The vast majority of content on the web is created using sans-serif fonts, despite the 12 pt. serif fonts most browsers default to. Why is this?
DPI & Pixelation
The primary reason digital media follow different rules is pixelation. Printers that output 600 pixels per inch achieve a much clearer rendering of letters than a 72 dpi or 96 dpi monitor.
 Times New Roman 12 pt. Print 600 dpi no anti-aliasing (8x mag.) |  A pixel and its RGB sub-pixels (80x mag.) |
 Serif 12 pt. Web 72 dpi no anti-aliasing (8x mag.) |  Serif 12 pt. Sub-Pixel Rendered 72 dpi no anti-aliasing (8x mag.) |
 Sans-Serif 10 pt. Web 72 dpi no anti-aliasing (8x mag.) |  Sans-Serif 10 pt. Sub-Pixel Rendered 72 dpi no anti-aliasing (8x mag.) |
For this reason, many serif fonts become distorted when rendered for digital media, because a 12 point character gets rendered in 14 x 10 pixels instead of 75 x 50.
When serifs become distorted, they "bleed", causing the opposite of their intended effect - they actually make characters less legible.
Anti-aliasing
Newer web browsers use anti-aliasing to increase the smoothness of web fonts. However, this doesn't correct the issues caused by the DPI limitations of monitors.
Sub-Pixel Rendering
Sub-pixel rendering is a technology that splits each pixel into its base components of red, green, and blue. The RGB sub-pixels are each a vertical 1/216" x 1/72" rectangle of solid color. Colors on your monitor are achieved by adjusting the light emitted by each RGB sub-pixel in accordance with the RGB value of the color intended to be represented by the parent pixel.
Sub-pixel rendering, in essence, divides each pixel into its three vertical components, allowing for a 3x greater resolution for black / white hard-edged fonts (such as those used in web pages).
What's Down the Road?
With ever-increasing monitor resolutions, we will soon see 2560+ pixels and 200+ DPI becoming a standard. Eventually, we can expect to see web font choices shift towards serif fonts for the majority of informative websites (news sites, blogs, etc.), for the same reasons they are preferred in print.
In the short term, expect to see a small number of websites detecting client-dpi and dynamically rendering serif or sans-serif depending on configuration.