Typography: Best Practices

type catalogReadability is—or certainly should be—a major consideration for web designers, and readability is predicated on good typography. Even though content editors aren’t designers per se, they are often called upon to collaborate closely with designers and/or to critique websites for overall usability. In smaller operations, they may assume some or all of the layout tasks. So it’s a good idea for web editors to develop a working knowledge of basic web design and the role of typography in great design and readability/usability.

A lot of water has passed under the bridge since Smashing magazine conducted its first survey of web typography back in 2009. Advances in responsive design, evolving browsing habits, and the explosion of mobile devices with a plethora of form factors led the editors to revisit the project.

The updated survey was recently published as “Typographic Design Patterns and Current Practices (2013).” It’s detailed content is worthy of your consideration, but I’ll share some of the highlights to give you an idea of what they found:

  • Serif fonts have eclipsed sans serif families in popularity for headlines as well as body copy (though it’s apparently still considered acceptable to combine the two for emphasis or contrast between titles, subheads, body copy, sidebars, etc.).
  • The most commonly employed headline fonts are Georgia, Arial, and Chapparal Pro (but the majority of websites surveyed still incorporate lesser-known fonts to some extent).
  • The most common body copy fonts—no surprises here—are Georgia, Arial, and Helvetica (poor old Times Roman has been put out to pasture).
  • Headline font sizes typically range from 29 to 32 pixels.
  • Body copy font sizes flucuate between 14 and 16 pixels.
  • Characters per line average from 75 to 90 (though 55 to 75 is actually more optimal).
  • Body text is pretty universally set on a left alignment, hyphenation is verboten, and links are predictably underscored and/or highlighted with bold face or a bright or contrasting color (occasionally only on hover).

Content marketing editor Tom Mangan registers his frustration with the “roll yer own” approach to digital typography that yields control to the end-user: “What drives me crazy is that font usage is more of a suggestion than a command. Every browser displays it differently and [an] individual user can override my type choices.”

There was also a lacuna in the article: it doesn’t even mention the concept of negative space in relation to type. Mangan opines, “I would bet the true keys to legibility lie in character and line spacing—if you get that right, it should stay that way (pretty much) no matter which font the user is actually using.”

The judicious application of white space is near and dear to the hearts of all graphic designers, since text and negative space are really just opposite sides of the same coin—and both are graphic elements. I was taught to view white space as the yin to text’s yang; the two engage in a sort of graphic dance, each bringing out the best in the other. Marcella Drula-Johnston, head honcho of the Spectrum Creative design atelier in Fairfax, Virginia, wistfully intones, “White space seems almost neglected these days. Andi [her associate] and I have both noticed the lack of thought or intent regarding kerning or tracking in most contemporary design as well.”

But the lack of respect for good typography and the appropriate use of “text-free zones” predates the Internet. As a young in-house editor for Petersen Publishing (Motor Trend, Hot Rod, Guns & Ammo, and many other newsstand titans), I was sworn to embrace Pete Petersen’s dictum, “If God had wanted there to be white space, He wouldn’t have created type!”

Oh, dear…

the DW-P

Aden Nichols is an independent editor and writer. He is available for print and digital projects: books (academic, narrative/creative nonfiction, memoir, speculative/alternate history, etc.), websites/social media, and business communications. Visit his website (www.LittleFireEditorial.com) or email him at: Aden@LittleFireEditorial.com.