Which fonts are best? Serif vs sans serif battle has been going on since the beginning of time… but today we put it to rest.
Both types of fonts have beautiful typefaces in them, and both have been incredibly successful in one kind of projects but absolutely disastrous in other projects. So, which font wins and what kind of fonts should we use on what kind of projects? That’s the question we will answer today.
But, before we can actually get on with our study, I have to introduce the difference between serif and sans serif fonts. If you are already well-familiar with this, you can skip ahead.
Fonts can be categorized in various ways, the most common method is categorizing them into the following two categories.
- 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.
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 font Cajoun
Conventional serif font Century
Conventional serif font Palatino
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
Humanist themed 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:
We can safely say that serif fonts are rather complex.
Image courtesy of Li Yuan
So, what did we learn in the introduction part?
- Both serif and sans serif fonts are being used.
- Serif fonts are older, much much older.
- There can be serif and sans serif versions of the same font.
- 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.
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.
This is the homepage of a cabaret show in Macau. They use only serif fonts in their website.
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.
So now we have two questions:
- Which font combination looks more beautiful?
- 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
(notice that it’s not 100% necessary to use a serif + sans-serif combination)
Helvetica + Garamond
Lucida Sans Unicode + Century
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.
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.