Five Minute Upgrade – Variety in Title and Body Fonts

Zach Dunn on March 8th, 2009 Posted in Articles

Are you a one font wonder?

Contrary to what you may think, mixing fonts in web layouts can actually be quite beneficial. It can help to increase usability, promote emphasis, and add some flair to an otherwise monotonous page.

In this post we’ll examine the trends of mixed typefaces and take a look at some fantastic example pages out on the web.

Variation Adds Emphasis

Color, size, and vertical heirarchy are all tried and true ways to distinguish between unique page elements. How about a change in font? A reader may not conciously register the difference, but even a subtle difference in type can make a page feel a little more segmented.

Having a hard time picturing what I mean? Keep the above idea in mind as you look over some prime examples from around the internet.

Using Serif with Sans-Serif

For those sites that use both sans-serif and serif fonts the trend seems to be that the titles are serif, while any body material is largely the smoother sans-serif.

Georgia is a common first pick in the font-family for titles, while Lucida Grande dominated the first font choice in the sites sampled for this article.

The Big Noob (http://thebignoob.com/posts/8-15am/)
Title: “Century Schoolbook”, Georgia, Times, serif
Body: “Lucida Grande”, Verdana, Helvetica, Arial,sans-serif

Web Design Ledger (http://webdesignledger.com/)
Title: Georgia, “Nimbus Roman No9 L”, serif
Body: Arial, sans-serif

The White House Blog (http://www.whitehouse.gov/blog/09/03/06/The-First-Lady-at-Miriams-Kitchen/)
Title: Georgia, “Times New Roman”, Times, serif
Body: “Lucida Sans Unicode”, “Lucida Grande”, Verdana, Arial, Helvetica, sans-serif

Tutorial9 (http://www.tutorial9.net/photography/wildlife-photography-tips-take-better-wildlife-photos/)
Title: “Palatino Linotype”, “Book Antiqua”, Palatino, FreeSerif, serif
Body: Helvetica, Arial, sans-serif

Or Keep it in the Family

Where the sites above stick with variety, these sites stick with the consistent sans-serifs. For titles, Helvetica seems to be a popular choice over Arial. The body type typically stays simple, although certain sites (like Virb) have incredibly specific font stacks.

Note: Unless I’m missing something, someone at Virb must have a great sense of humor. Jamrul is a Bengali typeface, and I doubt most people could read it.

Smashing Magazine (http://www.smashingmagazine.com/)
Title: Helvetica, Arial, Calibri, sans-serif
Body: Verdana,Helvetica, Arial, Geneva, Helvetica, sans-serif

Virb (http://virb.com/)
Title: Helvetica, Arial, sans-serif
Body: “Lucida Grande”, “Jamrul”, Helvetica, Verdana, Arial, Tahoma, sans-serif

Creattica Daily (http://daily.creattica.com/)
Title: “Trebuchet MS”, Helvetica, sans-serif
Body: Arial, Helvetica, sans-serif

What’s your Take?

The sites showcased above have done a great job of demonstrating beneficial uses of mixed type. The font stacks used on these sites are a great starting point for any future design overhauls.

Should this technique be common place in good web design? Do you think font variation enhances a design, or goes largely unnoticed? Share your thoughts with us in the comments!