jump to navigation

Typography – Best Practices 4 May 2010

Posted by elisemchisholm in Design, Trends.

In my career as a communicator, I’ve had many a debate about the use of serif vs. sans-serif fonts. I, personally, am anti serif. I tend to associate serif fonts with classic novels; as charming as they are in hard copy, they seem out of place online. I admit, I have friends and colleagues who adamantly disagree – they’ll never stray from Times New Roman.

Somewhere along the way, I’ve been brainwashed to think serifs make type difficult to read online, yet I’m seeing serif fonts more and more on prominent websites. During a recent quest for an authoritative opinion on this topic, I came across an interesting article by Michael Martin at Pro Blog Design (via Smashing Magazine).

In order to find typographic patterns that are common in modern web design, Martin and his team researched 50 popular websites. I’ve summarized their key findings below.

  • In headings, 40 percent of websites use serif fonts while 60 percent use sans-serif fonts. In body copy, 34 percent opt for serifs and 66 percent go sans.
  • Heading font styles in order of popularity are Georgia and Arial (tied), Helvetica, Verdana, Lucida Grande, Baskerville, and Times New Roman.
  • Body copy styles in order of popularity are Georgia, Arial, Verdana, Lucida Grande, Helvetica, and Times New Roman.
  • The most popular font size for headings ranges from 18 to 29 pixels while the most popular size for body copy is 12 to 14 pixels.
  • Apparently the optimal number of characters per line is between 55 and 75, but many websites range from 75 to 85 characters per line.
  • Body copy is left-aligned, image replacement is rarely used, and links are either underlined (46 percent) or highlighted with bold or color.

Martin acknowledges that these findings aren’t perfectly scientific, but he believes they can serve as rough guidelines for those seeking standards. For now, they settle my serif debate.



1. Week 6 – Color and Typography « Web Tools For The Digital World - 12 May 2010

[…] Typography Best Practices […]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: