Font Wars: Serif vs Sans Serif – Which is Best? (A Case Study)

AD

http://danstasiewski.org/?option=Worldwide-Central-Banks-Forex-Reserves Worldwide Central Banks Forex Reserves

Binary Option Affiliate Marketing Platforms

Binary Options Theta Formula Helper

Introduction

The Pros And Cons Of Binary Options Bonuses

  • serif font
  • sans-serif font

Both of these font families have a very specific set of rules, but their most prominent distinction is, of course, the serifs.

Serif Example

Image courtesy of book promotion hub

You already have serif and sans serif fonts in your computer.

  • Serif Font: Times New Roman
  • Sans-serif Font: Arial

Let’s check out some more examples of serif fonts. They come in modern and conventional styles.

Did you know: It is believed that they are older and they may have originated in the Roman Empire.

Modern serif font Baskerville

modern serif - baskerville

Modern serif font Cajoun

modern serif - cajoun

Conventional serif font Century

old serif - century

Conventional serif font Palatino

old serif - palatio

Now let’s check out some examples of sans serif fonts. There are no old and new styles in sans serif fonts because they are not really calligraphic but designed on the basis of science of readability.

Geometrically beautiful Univers

geometric Sans serif font- univers

Humanist themed Myriad

humanist sans serif font - myriad

All font previews are being presented courtesy of fonts.com

Mind you, there can also be serif and sans serif versions of the same font. Here’s an example:

Droid

We can safely say that serif fonts are rather complex.

Arial vs Times New Roman

Image courtesy of Li Yuan

So, what did we learn in the introduction part?

  1. Both serif and sans serif fonts are being used.
  2. Serif fonts are older, much much older.
  3. There can be serif and sans serif versions of the same font.
  4. Serif fonts are a little complex compared to sans serif ones.

Serif vs Sans-Serif Fonts: Let the Battles Begin

There were set patterns of mixing and matching typefaces long before the invention of modern computers. Those patterns were copied to web design as well, and they worked pretty well until just a few years ago when the rise of mobile devices made us redefine our design sciences. Let’s check out how it was and what it is like now.

Conventional Print Media Technique

It used to be serif fonts for headings, sans serif for the content.

heirarchy

It was like this because headlines need to catch attention and print media practitioners realized that serif fonts capture more attention than sans serif fonts.

This combo of serif headings / sans serif content ruled print media for decades. And later, the same technique was adapted on the web as well.

Techniques in Web

We are seeing loads and loads of trends these days, but in the earlier days, let’s say in the 1990s and most part of 2000’s the same conventional print media technique ruled the typographic part of web.

CNN, BBC and most other content-based portals and blogs used the technique of serif on top, sans serif on bottom.

Still, many famous blogs and news websites are using the conventional technique. One example I can thing on top of my mind is Smashing Magazine, they are still using this tried and tested method. But, there are other techniques as well. Let’s check them out.

All Serif

This is the homepage of a cabaret show in Macau. They use only serif fonts in their website.

Website using only serif fonts

All Sans Serif

You are looking at it. We at Designzzz don’t use any serif font at all. We are only using Open Sans font made by Google.

Print Media Reverse

Sans serif for headings and serif for content.
These days, even newspapers and playing a lot with fonts. They are trying to look modern to appeal to the new generation that doesn’t really care about newspapers much.
This trend became so popular that WordPress’s default 2014 theme came with this typographic combo. Since then, all WordPress default themes contain this combo.

WordPress 2016

So now we have two questions:

  1. Which font combination looks more beautiful?
  2. Which font combination is better for conversion rates??

Let’s answer one by one.

Font Combination Ideas

When I was doing the research for this article, I found the following combinations and I liked the ideas.

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


Making fonts look beautiful is a subject for the art part of designing. And, art is subjective. Art is not defined but experienced. You will have to experiment with fonts, take inspiration from other designers and create ideas yourself to make it look beautiful. But, as far as conversion rates are concerned; that’s the science part of designing.

Most Successful Technique for Conversion Rates

Do you know which is the website with most conversion rates?? It is Google.com

And you would already know that world’s largest online store is Amazon.com

Do you know what these two websites have in common? Both do not use any fancy font, they use Arial.

e Amazon uses pure Arial.

Amazon Case Study

Google uses Arial

Youtube, Ebay, Yahoo and many other most popular websites in the world use only Arial or similar fonts such as Helvetica.

Why in the world are these insanely successful websites are using probably the most boring font on earth???
It is because:

  • Arial is a system font. These websites save loading time.
  • Arial is one of the most neutral fonts ever. It does not have characteristics of its own. It is not bitter, nor sweet… it is like water.
  • Arial is familiar. People would find it friendly.
  • Arial is invisible. People are so used to of Arial that their whole attention is kept on the message, not the messenger.

THE VERDICT: Serif vs Sans Serif – Who Won?

Neither! It actually depends on your needs. If you have a cabaret in Macau and you want to give the expression of class and style, you can even go for all-serif.

If you are trying to create a very popular online store, you should use a system font. And most neutral, most universal font is Arial.

If you want to use a combo, you should check out the fonts that contain both serif and sans serif versions. Google Fonts have loads of such fonts.

Best of luck.

Further Related Readings

Comments
  1. neo tech blog November 17, 2010 at 11:52 pm

    very good difference u have shown thanks for posting

  2. Garnet November 18, 2010 at 2:26 am

    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 November 18, 2010 at 2:35 am

    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 November 18, 2010 at 2:52 am

    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 November 18, 2010 at 3:20 am

    @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 November 18, 2010 at 3:34 am

    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 November 19, 2010 at 1:06 am

    @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 November 19, 2010 at 1:06 am

    I meant “@Joris”, sorry πŸ™‚

  9. greg urbano November 25, 2010 at 5:18 am

    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 January 5, 2011 at 1:42 am

    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 January 5, 2011 at 8:44 am

    @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 March 31, 2012 at 8:44 pm

    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.

Leave a Reply

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

Copyrights © 2016 - Designzzz. All Rights Reserved