Typography Basics – Serif Vs. Sans Serif


Serif Vs. Sans Serif

No doubt you’ve always noticed that not all fonts look the same. When it comes to writing your blog posts, you are facing a difficult choice between:

  • serif font
  • sans-serif font

Both of these font families have a very specific set of rules how you should use them and that’s exactly what we’ll be learning today.

If you have no idea what the hell is the difference between these, let’s start by showing an example of each type:

serif: Times New Roman

sans-serif: Verdana

Before we examine each font type in more detail, let’s get something straight:

  • headlines = sans-serif
  • body = serif

This is the most usual combination. You can visit CNN, BBC or a lot of other important media for that matter – you’ll see they’re using this combination.

While it is possible to substitute them, you should not alter a few basic typographic factors:

  • one font type in headlines and the other in body
  • choose exactly 2 fonts and stick with them
  • look for design collisions (more of that later)

Serif Fonts Family

Let’s begin with the Serif Fonts. It is said that they are older and they may have originated in the Roman Empire.

Serif fonts are intended for the article body. While these fonts form a large family, it would be folly to overlook their design differences and not to utilize them.

The best advice here is to just look at different fonts and use your own common sense to determine a good combination. The more times you’ll try this, the better you will become.

Enough of theory, let’s take a closer look on some popular serif fonts:


baskerville font type


cajoun font type


Century font type

Linotype Rowena

linotype rowena font type

Palatino Nova

palatino nova font type


whitenights font type

Sans-Serif Fonts Family

Headlines are very important. Ask any newspaper editor, blogger, book author… they will all tell you that headlines are used to catch the attention and to guide a reader through the whole article.

Consequently, you need to put a great deal of effort in picking up the right font for your headlines. Again, sooner or later you’ll find out which fonts do the job of attracting the readers.

You can’t wait to see some good sans-serif fonts, can you?


arial font type


Franklin Gothic

franklin gothic font type


helvetica font type

Lucida Sans Unicode

lucida sans font type


verdana font type

Fonts Combinations

The final piece of the typographic puzzle is to pick a good combination of serif and sans-serif fonts in order to create a harmony in your design.

There is no exact science for doing this, your only option is to use the popular trial and error method. Some of the good combinations are:

Caslon + Franklin Gothic

caslon frank font type(notice that it’s not 100% necessary to use a serif + sans-serif combination)

Helvetica + Garamond

helvetica garamond combination

Lucida Sans Unicode + Century

lucida century fonts combination

Trebuchet + Baskerville

Verdana + Palatino Nova

Hopefully you know a thing or two about typography basics by now, let’s just quickly go over the main points:

  1. sans-serif for headlines, serif for body
  2. use precisely 2 fonts in the article
  3. use the right combination to create a font harmony

Thank you for reading, your input in comments would be most appreciated!


Related Stuff!

Published on: November 17, 2010,

This post is in: Articles



24y old visionary Czech.
All Articles by

Leave a Response