If we’re living in the age of the “paperless office,” why is it that our desks are piled with things we could read on the screen?
Is it really so hard to read on the computer? What can be done to make the experience better?
A group of designers, engineers and developers are working on technology that might get to the bottom of this question (if not to the bottom of your desk). They come to it from different perspectives, but their goal is the same: to make reading on-screen as clear as reading something in print.
Some of these design and tech experts gathered at Poynter late last year to share what they’ve learned and to talk about possibilities for the future. Presentations ranged from selecting the best fonts to complex research on how the reader’s eye moves over text and how details of individual characters are developed for the screen.
Ink vs. Pixel
With print design, we have precise control over spacing between letters, words and lines of text. We set tight parameters for hyphenation. We have a multitude of styles and weights from which to choose. We’ve had plenty of time to perfect the craft in the centuries since Gutenberg worked to perfect the printing process, after all.
But online type is tricky. You can’t easily control the same design elements. Too many variables can make reading a chore. I’m talking about eye fatigue, screen resolution, pixels and the design of the actual typefaces. You might be struggling with this as you read this very article.
Reading on a computer brings a new set of design challenges. And it’s way more complicated than Gutenberg might have imagined. But the good news is that there’s a lot of research being done on this topic.
Challenges Of Type Display On-Screen
The typefaces we love on paper don’t work well on-screen. Reproduced at a much lower resolution on the computer monitor, each letter is represented by square pixels on a grid, rather than by smooth lines of ink on paper. On-screen characters with curved or diagonal strokes — especially italics — often break down into unrecognizable shapes.
At the size of body text, the long, vertical spine of the letter “k” for example, might be converted to either one or two pixels wide — nothing in-between. Subtleties are lost, along with readability.
We have limited control over spacing, hyphenation, justification and column widths. The lines of text on most Web pages — set by default in a single column — are too wide for comfortable reading without eye fatigue.
Then there are those elements of type over which we have no control at all.
Low resolution monitors — whatever our readers happen to have on their desks — limit the subtle details of type. Generally, the more expensive the monitor, the more pixels there are per inch. More pixels = better legibility.
The type you want your reader to see might not be installed on his or her computer. Most computers are set to default to “Arial” to replace a sans serif; “Times” or “Times New Roman” will replace a serif. (Serif type has “feet,” or extensions at the top and bottom of a letter.) The user might even override your decision to choose his own wacky face with choices such as “Baby Teeth” or “Mistral.”
And as if that’s not enough, the design specs will change from browser to browser. A site developed on Internet Explorer or Safari may look completely different on Netscape Navigator. The size and resolution of the type might change entirely.
Wait, There’s Hope
The better news is that a few great typefaces have been designed specifically for reading large amounts of text on-screen — and there are more on the way for some computer systems. Verdana, a sans serif, Georgia, a serif, and Trebuchet (which you are probably reading on Poynter Online right now) have become standards for readability on the Web. They’ve been around for several years, and they are wonderful because they’ve been drawn with painstaking detail, just for the screen. They reproduce quite well in print, too.
Here’s why they work:
- Their lowercase characters are slightly larger than the average typeface. This larger “x-height” makes the character look bigger overall. The open spaces are slightly larger than average, so they don’t seem to “fill in.”
- To limit jagged edges, the curves are reduced to a minimum in the open spaces of the letters.
- The letters are spaced further apart, in a more regular way, so they don’t seem to touch.
- Some combinations of letters that might normally bump or overlap, like “ft,” “fi,” and “fl,” are specially drawn so that they have extra space between them.
- Verdana, Georgia and Trebuchet are installed on both Windows and Apple operating systems, making them universally available for use on any Web page. Some people call these “Web-safe” fonts, because most users have them.
Commissioned by Microsoft, Verdana and Georgia were designed by Matthew Carter and hinted by Tom Rickner of Ascender Corporation. (A simple description of hinting is “a method of defining exactly which pixels are turned on in order to create the best possible character … at small sizes and low resolutions.”) Trebuchet was designed by Vincent Connare.
Brand New Text Fonts
Microsoft has commissioned six new font families designed expressly for reading on-screen with their ClearType technology. Unveiled at the Association Typographique Internationale conference in Prague last year, the new typefaces triple the number of quality on-screen faces a designer can choose.
Developing a typeface is an expensive undertaking. In order to issue a worldwide release of these Western characters, the fonts were developed to include all of the characters for Latin, Greek and Cyrillic. Each family includes a regular, italic, bold and bold italic style. You do the math. That’s a lot of characters, with an estimated price tag of hundreds of thousands of dollars to develop each family of type.
The fonts will be available to Mac users only if Apple decides to license them. Apple has no set plans to do so at this time, according to Roger Siminoff, Apple senior marketing manager for professional graphics markets. The collection is exclusive to Microsoft and will be shipped as part of the next version of Windows in 2006, according to Mike Duggan, Microsoft’s lead typographer in the ClearType and Advanced Reading Technologies team.
The six new typefaces range from elegant to sturdy to playful. This variety will do a lot for designers and editors who want more choices for highly developed fonts for the screen as they work to define the personality of their sites.
For a preview of the ClearType Font Collection: “Calibri,” “Cambria,” “Candara,” “Consolas,” “Constantia” and “Corbel,” see Design Desk. The fonts are all named with a “C” so they will show up together in the fonts list.
Microsoft has done far more than any other group when it comes to readability research for the screen. The mission of the Advanced Reading Technologies team is one of Bill Gates’ personal “Top Five” priorities, according to Bill Hill, director of the Microsoft group. Team expertise includes typography, cognitive psychology and research. View a report (in MS Word format) by Hill that helped to launch Microsoft’s initiative.
What Apple Is Doing
Apple comes at the issue of readability quite differently than Microsoft does, concentrating on screen resolution and the quality of light on the monitor. Unlike Microsoft, Apple develops hardware in addition to system software and does not commission the design of typefaces.
Siminoff says that Apple is proud of the sharply rendered detail of type and graphics on its Cinema Display screens. He compares the light emitted by the monitor to the normal, ambient lighting that you would find in a home — easier on the eye. It’s three times brighter than the common cathode ray tube (any desktop-type monitor that is deep, like a standard television).
As always, great debate exists between users of PCs and Macs. Whether the discussion centers on which type of computer to buy for the newsroom or which type of operating system our readers will choose — it’s another issue for a newsroom decision-maker to consider.
It’s worth noting that there has been shared font technology between the rivals in years past. Apple and Microsoft worked jointly to develop TrueType, a scalable font format that allows you to print what you see on the screen from any computer.
What You Can Do Now To Improve On-Screen Readability
Quality reading on a screen is elusive. Technical specs, typography and business options, the choice of operating systems, browsers, and monitors are all important factors. But there are things you can do to improve readability on your site.
If we bring this back to a major goal for the development of your news site — keeping your readers’ eyes on the screen — there’s a lot more to learn and absorb as technology continues to change.
CORRECTION: An earlier version of this article reported that the Verdana and Georgia fonts were available for download. The fonts are bundled with Microsoft operating systems, but are no longer available for download.
