Nielsen Jakob Nielsen’s Alertbox: July 2, 2012
Serif vs. Sans-Serif Fonts for HD Screens
Summary: Decent computer screens with pixel densities of 220 PPI or more lead to new usability guidelines for on-screen typography.
Not only are computer screens getting bigger , they're also finally getting better — which might be more important. In June 2012, Apple introduced the first mainstream computer with a high-definition screen : the MacBook Pro with a resolution of 2880×1800 on a 15-inch display. This screen delivers a pixel density of 220 PPI (pixels per inch, corresponding to the DPI — dots per inch — that measure laser printer quality.)
Apple uses the propaganda term "Retina display" for screen qualities above approximately 200 PPI, under the theory that this is as much as the human eye can resolve. Of course, this is not true: we need around 900 PPI for a screen so good that adding pixels wouldn't make it look any better.
Although Apple's screen quality isn't perfect, it's dramatically better than anything on offer from other computer vendors. It's a disgrace that the PC industry hasn't recognizably improved screen quality over the last decade — despite the fact that we've known since we have known for decades that 300 PPI screens offer dramatically faster reading speed than low-density monitors.
The mobile-device market has done somewhat better; Apple has delivered HD screens on the iPhone since 2010 (model 4's 326 PPI ) and on the iPad as of this year (model 3's 264 PPI ). Many non-Apple mobile-device vendors also offer HD screens, including the Samsung Galaxy Nexus tablet at 316 PPI , the Nokia E6-00 phone at 328 PPI , and the Sony Xperia S phone, which seems to hold the current record at 342 PPI . The phone people can do it — why can't the PC guys?
In 1998, I thought decent monitors with 200 PPI would be available "in 5 years" (that is, in 2003). Only 9 years wrong on that prediction :-( It's amazing how slow progress has been in the monitor field. And we're still stuck with 30 inches as the biggest mainstream computer screen, even though 42-inch monitors would provide decent productivity gains for most knowledge workers . My 1998 article predicted the death of newspapers once users got decent screens; that does seem to be happening, though also more slowly than I expected.
Screen Typography for Online Reading
There's a reason fashion magazines and high-quality art books are printed with much higher resolution than news magazines or regular books. It's not a question of whether the individual dots are visible — it's about the total user experience. For print, this experience pretty much equates to type and photo quality.
The old usability guideline for online typography was simple: stick to sans-serif typefaces. Because computer screens were too lousy to render serifs properly , attempting serif type at body-text sizes resulted in blurry letter shapes.
The following picture provides a quick reminder of the difference between serif and sans-serif fonts. Compare the two big As and you can clearly see the serifs (small feet) in the Garamond typeface. "Sans serif" simply means a typeface that doesn't have these serifs — from the French word sans , meaning without.
The old guideline was dictated by the poor screens on all mainstream computers. Now that we have high-quality screens, it's time to change the guideline.
In general, usability guidelines remain unchanged decade after decade because they're determined by human characteristics. However, every so often, some guidelines change due to the influence of technology or a change in user habits. For example, 10% of the original web usability guidelines from the 1990s have now changed because of technology improvements. Count this article as changing one more of those old guidelines.
Unfortunately, the new guideline is not as clear-cut as the old one. Legibility research is inconclusive as to whether serif fonts are truly better than sans serif.
Almost all mainstream printed newspapers, magazines, and books use serif type, and thus people are more accustomed to reading long texts in this style. However, given the research data, the difference in reading speed between serif and sans serif is apparently quite small. Thus, there's no strong usability guideline in favor of using one or the other , so you can make the choice based on other considerations — such as branding or the mood communicated by a particular typographical style.
Time to Retire Verdana?
In 1996 , Microsoft's fabled typography group introduced Verdana as one of the first fonts designed explicitly to improve on-screen text legibility. As the following example shows, text remains somewhat readable in Verdana even at 8 pixels.
I've always been a great Verdana fan and used it on my own website for about 15 years. (In homage to this legacy, I'll try to keep this section in Verdana, even after changing my general website typeface.)
Although Verdana has served us well and saved many sore eyes, it was designed for a different platform than the next generation of computers. It might be hard to remember the computers of 1996 , but the predominant screen resolution was 640×480, many graphics cards supported only 256 colors, and flat screens didn't exist. Blurry 14-inch CRTs ruled the office landscape.
Further, screen quality was usually a miserable 60 PPI , which is why early Macintoshes were considered to offer good graphics at 72 PPI .
Today, ClearType adds a decent amount of crispness to letterforms on LCD screens by using sub-pixel anti-aliasing, but this technology didn't exist in 1996. (And wouldn't have worked on a CRT anyway.)
As the above writing sample above shows, however, Verdana takes up more space and is less visually elegant than other sans-serif typefaces — in this case, Calibri — because it exaggerates various letter characteristics. (Calibri is another Microsoft typeface, introduced in 2007.)
I used to supplement the "use sans serif" guideline by advising designers to use Verdana because it was well suited to old computers. Today, however, I wouldn't recommend Verdana. It surely doesn't hurt to use it; Verdana is still very readable on modern screens. But we can now do better.
(Of course, while you can now safely deviate from Verdana and sans serif, traditional usability guidelines still apply. For example: using more than one or two font families can produce a ransom-note effect and should be avoided; you should also shun overly fancy typefaces with poor legibility.)
Computer Screens: From Terrible to Bad to Decent
Computer screens in the 1990s were blurry 14-inch CRTs at 60 PPI. In retrospect, we can confidently call them "terrible."
I've also long been critical of the current generation of crisper LCDs that typically offer 110 PPI. Although not terrible, I'll call these screens "bad" — especially if you're stuck with a 24-inch model.
I've been nice to Apple, labeling their new 220 PPI laptop screen an "HD" display even though I'd much rather have 300 PPI. Still, the new Apple screens are the first I'd deem a "decent" user experience for online reading. I'm sure there will be many more in the next few years.
How long do we have to wait for truly great computer screens ? Say, 42 inches of diagonal screen real estate with 500 PPI and a 120 Hz frame rate? (Experiments in the movie industry show that dramatically increasing the frame rate far past the point of eliminating visible flickering leads to a greater sense of realism.)
In the computer industry, we're used to rapid progress, but I've been burned before in hoping that monitors would improve as fast as other components. Great screens ought to be possible in 10 years (2022), but I'll be realistic and predict 20 (that is, 2032).
Thus, the coming decade will be dominated by decent computer screens, as people gradually upgrade from their current (bad) screens.
This has three key implications for website design:
- We need web page layouts that utilize the bigger screen space and work with wide-screen form factors.
- People might be willing to read even more on higher-quality screens, further dooming print publications.
- Guidelines for concise content and scannable headlines (on most websites) are as important as ever, because web users will be as impatient as ever .