Sizing Up Readability & Legibility

Print designers who were accustomed to setting type at small sizes—or who still set type at small sizes—should know that when it comes to type on digital displays, bigger is better. Although “big type” on the web has become its own style and even a trend, finding the right type size boils down to readability, legibility and, as always, a good user experience. But how big is too big, how small is too small? And which fonts work better than others?

Text samples from Franz Kafka’s The Metamorphosis.

Although sizing body copy at 12 pixels will work, some experts consider body text below 16 pixels to be too small for digital displays because character counters and inter-letter spacing will close up in many cases.

Occasionally, narrow typefaces may pose more problems. At the small size of 10 pixels (far left), the Helvetica® Narrow typeface family will have character terminals hitting nearby forms or even some counters closing up, as in the case of the capital ‘A’ in ‘ARROW.’ Some readers might even perceive ‘13’ as a capital ‘B.’

Top Row: Set in lowercase, the two ‘r’ characters in ‘Arrow’ could begin to appear like a lowercase ‘n’ in both 12 and 10 pixel sizes. Bottom Row: Opening the inter-letter spacing by increasing the tracking begins to alleviate this, but the counter of the ‘A’ still closes in at 12 pixels.

Compared to Helvetica Narrow set on the left side, the Trade Gothic® typeface family has more open spacing between terminals and neighboring forms, such as the lowercase ‘e.’ Compared to Trade Gothic, Helvetica Narrow is just that—too narrow for body text in a Web environment.

It’s important to note that setting type large enough for the user is a matter of readability: the ease with which the user can read. Conventionally, designers considered 12-point body text acceptable, and most readers have found typography anywhere from 9 points to 12 points to be reader-friendly for long-form content. Hardcopy type was and is still set at those sizes, but setting body text at 12 points or pixels—or smaller—for long-form reading on a digital display could not only make it difficult for your readers, but it might also cost you readers, especially if it negatively impacts readability and legibility.

Setting Body Text with Web Fonts

• Find typefaces optimized for the Web
• Look for a large x-height that will increase overall size and in turn, improve readability
• Test the fonts at a range of sizes, beginning at 14 pixels and as large as 16 pixels
• Size body text larger than 16 pixels, especially if the font’s x-height appears slightly smaller
• Size captions and short-form content at smaller sizes such as 12 pixels and lower, making sure to test how it works on various digital displays
• In addition to varying type sizes, use more than one font in order to lead the readers into your headlines and then body copy, creating a sense of hierarchy that differentiates areas of information
• Provide enough contrast between the typography and background

—

The Neue Helvetica® eText typeface family (left) has a noticeably higher x-height when compared with the Monotype Baskerville® eText typeface family (right). Both are ideal fonts for the web, but will deliver different reading experiences when set at the same size because of their differing x-heights.

The 16 pixel Neue Helvetica eText (left) body text appears larger than Monotype Baskerville eText (right) because of Monotype Baskerville’s lower x-height. A case could be made for setting Monotype Baskerville larger for body text.

The Frutiger Next® family (left) compared to the Futura® typeface family (right) at a headline size of 64 pixels, reveals that the two have a similar x-height, but Futura’s tall ascenders can make the lowercase characters appear smaller. Futura’s geometric qualities, large counters, and terminals that come close to neighboring strokes make it less-than-ideal for body text. But Futura would work well at large sizes, for headlines and subheads.

Like all Web Fonts from Monotype, the PMN Caecilia® eText typeface was developed specifically for reading on the screen, used here for body text at 16 pixels and a 20-pixel pull quote.

In this case, more than one font is doing the work, with Monotype Baskerville for the headline, Neue Helvetica in 16 pixels for body copy, and PMN Caecilia for a pull quote.

Reading is a constant negotiation between the reader and the material at hand, whether it’s in her or his hands as a printed document or on a digital display. A wealth of typefaces are being redesigned or designed anew just for the web, and these new fonts will deliver an emotional quotient that goes beyond the basics of System Fonts that web designers have been using for decades. Finding the right Web font and setting it at the right sizes requires searching, designing, and iterating. And never settle too quickly.

Look at the type and set it in the real world scenarios it will function in. Design not just one option, but a range, in order to see what one font does compared to another, and how different sizes impact the layout. Compare how differing digital displays, in various sizes and resolutions, affects the typography. And when it comes to the reading experience, be sure to conduct usability testing internally among the design team and externally with users. You want readers to have a gratifying experience reading what you’ve presented, that in turn, makes them want to come back again later.

Jason Tselentis is a designer, writer, and educator. As Associate Professor at Winthrop University’s Department of Design, he teaches visual communication design, brand strategy and development, web design, and typography. His writings about design and visual culture have appeared in Arcade, Eye, mental_floss, Open Manifesto, Print, and HOW magazines. Mr. Tselentis also has four books to his credit on design, typography, and design history.