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.

Big Noob Fonts
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
Web Design Ledger (http://webdesignledger.com/)
Title: Georgia, “Nimbus Roman No9 L”, serif
Body: Arial, sans-serif

White House Blog Fonts
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
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 Fonts

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

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

Creattica Daily
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!

Posted Sunday, March 8th, 2009 · Back to Top

SPONSOR

Add Comment

17 Comments 6 Mentions

  1. Lee Munroe Author Editor

    Nice post, interesting to see some alternatives to the norm. I’m a big fan of Georgia headings and Arial body text at the moment but should try experimenting a bit more.

    ·

  2. mark Author Editor

    I like the new Whitehouse.gov design and therefore like to use there serif and sans-serif font family as of late. The subtle differences in font make a huge difference, in my opinion.

    Nice article to reference. Thanks

    ·

  3. tim Author Editor

    Nice post, this is very interesting to see, I’m gonna start using “Jamrul” from now on ;)

    tim’s last blog post..Free Textures…

    ·

  4. Bill D Author Editor

    Many of these uses are simply ridiculous. Most of these fonts used in the examples shown are not on people’s computers, so they are not seeing what the designer supposedly wants them to see. Using anything other than “standard web fonts” for anything that is not an image is EXTREMELY poor web design.

    ·

    • Joseph & Mary Christ Author Editor

      You must not understand how font stacks work. There is NO HARM AT ALL in listing top font preferences before the widely-distributed ‘standard’ web fonts.

      ·

  5. Zach Dunn Author Editor

    @Bill D

    Standard web fonts are a great way to ensure compatibility, and you’re correct in saying that a web designer should include them.

    However, I do disagree with your overall statement. If you’re familiar with CSS font stacks, compatibility shouldn’t be a concern at all. Designs would be extremely limited if you were allowed to only use compatible fonts. With font stacks, you have the options of selecting preference. If the viewer happens to have prioritized fonts, they get to see them. If not, no big deal.

    I’d encourage you to read this article on proper usages of font stacks. It may open your eyes to some great new design possibilities. Here’s a quote from the section “Font Stacks Give You Freedom” to consider in the meantime:

    “You want to use Gill Sans? Go right ahead. Nothing should stop you. Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience.”

    ·

  6. Jawaad Ahmad Khan Author Editor

    Great examples.
    And by the way,
    @Bill D
    You should check out what’s going on over at this nifty little place called typekit (http://typekit.com)
    It’s really cool, FREEDOM OF THE FONTS! ;)

    ·

  7. Laure Arlotta Author Editor

    Hey very cool website!! Man .. Excellent .. Amazing .. I’ll bookmark your blog and take the feeds also…I am happy to find so many useful info here in the post, we need develop more techniques in this regard, thanks for sharing. . . . . .

    ·

  8. transfer to dvd Author Editor

    Excellent post once again! Thumbs up.

    ·

  9. Rubie Pali Author Editor

    What a fantastic update, can I set it up so I receive an update sent in an email when you publish a new post?

    ·

  10. diete disociate Author Editor

    emphasis in these surroundings is not just recommended. must be something more weighted, otherwise where you get?

    ·

  11. here Author Editor

    it naturally is the responsibility of GMs and GamersFirst to combat illegal activity such as gold farmers and illegal item sales. We do this on a daily basis, but it’s made all the more difficult by all the unscrupulous players who promote illegal gold farmers and those legitimate players who sometimes unthinkingly do the same.

    here

    ·

  12. Inspirational Quotes Author Editor

    Hey There. I found your blog using msn. This is a very well written article. I’ll be sure to bookmark it and come back to read more of Five Minute Upgrade – Variety in Title and Body Fonts | Build Internet . Thanks for the post. I’ll definitely return.

    ·

  13. Inspirational Quotes Author Editor

    Five Minute Upgrade – Variety in Title and Body Fonts | Build Internet I was recommended this website by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my difficulty. You’re incredible! Thanks! your article about Five Minute Upgrade – Variety in Title and Body Fonts | Build InternetBest Regards Yoder

    ·

  14. Inspirational Quotes Author Editor

    Five Minute Upgrade – Variety in Title and Body Fonts | Build Internet I was recommended this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are wonderful! Thanks! your article about Five Minute Upgrade – Variety in Title and Body Fonts | Build InternetBest Regards Nick

    ·

  15. teak garden furniture Author Editor

    Five Minute Upgrade – Variety in Title and Body Fonts | Build Internet I was recommended this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my problem. You’re amazing! Thanks! your article about Five Minute Upgrade – Variety in Title and Body Fonts | Build InternetBest Regards Shane

    ·

  16. teak garden furniture Author Editor

    Five Minute Upgrade – Variety in Title and Body Fonts | Build Internet I was suggested this web site by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You are wonderful! Thanks! your article about Five Minute Upgrade – Variety in Title and Body Fonts | Build InternetBest Regards Nick

    ·

 

Build Internet by One Mighty Roar. Since 2008.