Serif on paper and sans-serif on screen?

Early in my career, I learned the standard mantra of "serif on paper and sans-serif on screen." This was considered common knowledge in the 1990s; text was just easier to read on screen if it was in a sans-serif font. In print, the recommendation flipped; according to common knowledge, serif text was best for print.

Of course, font recommendations have changed over the years. These days, many websites use a serif font.

Text on screen

The SVGA (800×600) video mode standard was introduced in 1987. Around that same time, monitors had a diagonal measurement of 14 to 18 inches. Just a few years later, Microsoft released Windows 3.0 in 1990.

CRT displays of the era used a 4:3 aspect ratio. Doing the math, a 14-inch (diagonal) screen would have measured 11.2 inches wide by 8.4 inches tall. A screen resolution of 800×600 would have produced a pixel density around 72 dots per inch (DPI).

Microsoft released Windows95 to much fanfare in August, 1995. By that time, XGA (1024×768) had become the de facto desktop resolution, since the early 1990s. Typical desktop displays also grew larger. By 1995, common office monitors measured around 18 to 21 inches, diagonal.

The increase in physical dimensions merely accommodated the extra pixels. An 18-inch (diagonal) display would have measured 14.4 inches wide by 10.8 inches tall. The screen resolution at 1024×768 meant a pixel density around 72 DPI.

But text isn't measured in "dots" or "DPI." Instead, we typically use points to indicate font size. During the 1990s, 12-point text was the most common font size. In typesetting, the point is 1/72 of an inch, or 72 points per inch. At 72 dots per inch (DPI), the conversion is simple: 12-point text was 12 pixels high.

That's not a lot of pixels to display text with much fine detail. At this low pixel density, 12-point text (12 pixels high) was best displayed without extra serifs to get in the way. This is where the "sans-serif for screen" rule started; to make text readable on screen, sans-serif fonts worked best.

Text in print

Many offices in the mid to late 1990s relied on laser printers for printed material. In the office where I worked, we used a Hewlett-Packard (HP) LaserJet 4, first sold in 1996.

Hewlett-Packard no longer provides the technical specifications for the HP LaserJet 4, but I found an online copy of the specifications on a website that collects printer data. This copy says text could be rendered in two resolutions with standard memory: 300 DPI in low resolution mode, or 600 DPI in high resolution mode.

Even at 300 DPI, the pixel density for print is over four times higher than screens. Running the numbers for this, printing 12-point text at 300 DPI means text will be 50 dots high. Printing in high resolution will produce 12-point text at 100 dots high.

At this dot density, text can be safely rendered with serifs. This seems to be the origin of the "serif on paper" rule.

Other research indicates that the human eye can read serif text more easily than sans-serif text. A 2005 study published in Vision Res (doi: 10.1016/j.visres.2005.06.013) cites several reasons for this, including “Serifs have an important role in the readability of type, providing… accentuation to the ends of strokes that may help the reader read faster and avoid fatigue.” (Rubinstein, 1988)

Today's displays are much better

However, technology has improved since the 1990s. My desktop computer has a 24-inch widescreen display and uses 1920×1080 native resolution. The technical specifications for my monitor tell me the actual displayable size is 23.8 inches, with a dot pitch of 0.2745mm. (Dot pitch is a measurement of the diagonal in inches divided by the diagonal in pixels, converted to millimeters.) That works out to about 92 DPI.

At this resolution, 12-point text will be 15 or 16 pixels tall. While this may not seem like a significant increase in dots required to display fine-detailed serif text, modern graphical user interfaces also now provide other ways to display text. Antialiasing means the graphical interface can fill in the fine details with different shades of gray. To the human eye, this subpixel rendering method appears to display text in higher detail than could be otherwise done with pixels that were simply "on" or "off," as in earlier display technologies.

Modern Open Type Fonts (OTF) can take advantage of antialiasing by providing font hinting. These hints were not available in the plain bitmap fonts of the 1990s, which were stored as a series of dots to display on the screen.

That means the "serif on paper and sans-serif on screen" rule from the 1990s no longer applies to today's fonts. Technical writers can use modern fonts on everyday displays with confidence. If the font is not too small, then serif and sans-serif text should be equally easy to read.