Typography Basics – Serif Vs. Sans Serif

AD

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

baskerville font type

Cajoun

cajoun font type


Century

Century font type


Linotype Rowena

linotype rowena font type


Palatino Nova

palatino nova font type

Whitenights

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

arial font type

Calibri

Franklin Gothic

franklin gothic font type

Helvetica

helvetica font type

Lucida Sans Unicode

lucida sans font type

Verdana

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!

Share the Love:


Advertisement

Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Further Related Readings

Vogin

24y old visionary Czech.
All Articles by
12 Comments on “Typography Basics – Serif Vs. Sans Serif” Join The Discussion!
  1. neo tech blog says:

    very good difference u have shown thanks for posting

  2. Garnet says:

    Being polite, i’d say, nice try giving tips about the basic rules of typography.
    Not to be polite : I think you were writing this article while being on the toilets maybe…. i’m a student in communication and design, typography is like my favourite subject and your article just somehow pissed off the typographer that lives in me.

    Please, get a book

  3. Garnet says:

    Oh and by the way, does the guardian have a non-serif font in it’s header ? Are we talking about this website : http://www.guardian.co.uk/ ?
    Does it seems to be a non-serif font to you, really ?

    + : The font you have been naming as “CASION” is in fact “CASLON”, and it’s a serif font that you have put in your “sans-serif” font list !

    ++ : You are not forced to repeat your basic rules like 3 times on your 10 lines ” article “, we are not talking about the fight club.

    +++ : here’s a good article about type mixing : http://www.typography.com/email/2010_03/index.htm !

    PLEASE, enjoy it

  4. Obzavejdane za Bania says:

    Very useful post. I will definately try the combinations of the two fonts and of course it is very interesting the practice of CNN!

  5. Ondrej Dyrka says:

    @Garnet – That’s what I call a useful comment(s)!

    Ok, first of all I totally understand that if you study these things, not only that you did, but you even should find my article inferior – but that’s why it says “Basics” in the headline.

    Second of all, I’m glad to accept your critique. I really don’t know why I included Caslon to the sans-serif fonts, I must have been sitting on my eyes the whole time I worked on it. I edited the stuff you talked about, so that you might feel less “offended”.

    In fact, you’d be probably welcome to write your own typographic article here on DesignZZZ, I’m sure Ayaz wouldn’t mind…

  6. Joris says:

    Some remarks:
    “Let’s begin with the Serif Fonts. It is said that they are older and they may have originated in the Roman Empire.”
    Please, typography found it’s origin in the invention of the first letterpunches by Johann Gutenberg in the 15th Century. Fonts have originated from that point. Maybe they found inspiration in calligraphy or others sources, but that’s not the same…

    “headlines = sans-serif, body = serif”
    What about the medium? Screen or print? Don’t generalize things without being critical. You can explain why serifs were used and what the idea was behind it, but don’t say that in general you have to use serifs for a body-text.

    A good thing about this post is that at least we communicated about the topic! :)

  7. Ondrej Dyrka says:

    @Jeris – my remark about the Roman Empire implied that ancient writings didn’t know anything about serif or sans-serif and the type of letters they used was similar to our serif fonts…

    I’m not saying that there are more media than just the Internet, but you may notice that at the very beginning I’m saying “When it comes to writing your blog posts,…” – clearly implying we’ll be talking about the internet communication.

  8. Ondrej Dyrka says:

    I meant “@Joris”, sorry :)

  9. greg urbano says:

    being a complete idiot on fonts i think the author didi a good job explaining to me the basics of fonts, and how to implememnt them on my blog,
    now i just have ot get off my lazy duff and change the ones on my site,
    one question many listed are not web-safe, what tools does the poster and commenters use to get around using only websafe fonts!

  10. Hemanshu says:

    I just came across this in my research on serif vs. sans-serif. This is a pretty bad article, not even factually correct.

    1) BBC uses sans-serif for both headlines and content.
    2) There is no clear research to prove which is better, readability wise.
    3) Most sites these days use serif for the heading, and sans-serif for content.

    Read Alex Spoole’s article, which rocks: http://alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces

  11. Ondrej Dyrka says:

    @Hemanshu
    ad 1) Allright, I was obviously working with old information, it’s time to do a major correction. But definitely not in my exams time…

    ad 2) Once again, this article has a word “basics” in its title, any kind of a research you suggested is not a basic thing.

    ad 3) Come on, at first you accuse me of no research and then you just throw a statement in without any evidence supporting it? I accept your criticism, but don’t commit the same mistakes I apparently have…

  12. De Silva says:

    Hemanshu is not accusing you of no research. I think they are saying that your rule for serif as body text is unjustified as we don’t specifically (or scientifically) know which type is more readable, due to a lack of comprehensive studies.

    Also, Hemanshu’s ‘statement without any evidence’ is actually quite self-evident. Go check out the internet.

    And yes, Alex Spoole’s article is awesome. He somewhat concludes that the type of font isn’t the only factor in readability, it includes other significant aspects such as x-height, line height, whitespace etc.

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved