Variety in Title and Body Fonts

Title and Body Fonts

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.

Font 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.

Title and Body Fonts – 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.

Georgia and Lucida Grande Fonts

Title: “Century Schoolbook”, Georgia, Times, serif
Body: “Lucida Grande”, Verdana, Helvetica, Arial,sans-serif

Georgia Ariel fonts

Title: Georgia, “Nimbus Roman No9 L”, serif
Body: 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 have incredibly specific font stacks.

Trebuchet MS Ariel fonts

Title: “Trebuchet MS”, Helvetica, sans-serif
Body: Arial, Helvetica, sans-serif

Title and Body Fonts – 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!

Leave a Comment

Your email address will not be published. Required fields are marked *