Five Minute Upgrade – Variety in Title and Body Fonts
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!
