Typograph 101: Serif vs. Sans-Serif

At the stage of selecting fonts, a designer often asks himself, “to Serif or Sans-Serif”? Choosing the kind of typeface to use in a design is of utmost importance as it greatly affects readability, user experience and the overall aesthetics of the design.

Although, no matter how much experience you have with typography, you can always get stuck in the serif vs. sans-serif dilemma. I personally think that a good way out of it is through understanding the very basics of serifs and sans-serifs, and this is just what this article aims to do.

Let’s take a look at the following write-up that highlights major differences between serif and sans-serif fonts for a better understanding of the two.

Where did serifs come from?

Serifs are small thin lines attached to the end of strokes in typefaces. They are believed to have originated from the Latin alphabet Romans used to etch their writings into stone.

Although there is no universally accepted origin to this decorative piece in typography, it is believed that the Romans used to paint letters with outlines onto the stone, so when the stone carvers followed the brush marks, which flared at ends, that resulted in the creation of serifs.

What about sans-serif?

Sans-serif, on the other hand, literally means "without serifs". Any font that is absent of these dangling strokes at the end of each corner, can be considered as a sans-serif font.

Knowing this, how can the choice of going with serifs or sans-serif affect your design? Here are a few things to consider:

Readability

Readability is often measured as how easily a reader can digest the content. Of course, as vision is usually subjective, there are a lot of factors that come into play including the interest level or the reader, and how the content is arranged in the block or space that it has been given.

The "old school" method of presenting text uses serifs for a reason. Did you ever think why most newspapers use serif typefaces for their content? Because serifs are easier to read. These little decorative lines in each character guide your eyes fluidly as your move from line to line and join the letters together which makes reading longer texts less taxing for your eyes.

The spaces between letters (since you have to take the serifs into account when it comes to spacing) also gives more room for the reader to easily identify letters from each other.

Look at the example below and you would notice that the serif fonts create an easier reading experience to the eye because it creates gaps between the letters and the words. This makes moving your eye from one word to another easier.

On the other hand, the serif font becomes more difficult to read using the same spacing. This is because the separation of each letter is smaller as you don’t have to put the serifs into account when spacing it.

Legibility

Legibility is the quality and clarity of lettering. This concerns fine details of the typeface and is essential because it helps the reader differentiate one character from another. This differs to readability because the latter is concerned mostly in approaching the content as a whole.

In the case of the image above, the lower case L and I for sans serif in Arial look pretty much alike. Imagine typing the word “Illinois”.

Here’s to emphasize my point.

However, it is important to note that if your typeface is illegible, it can never become readable. But there many cases of legible types that can appear unreadable because of how they are spaced or scaled relative to their design purpose.

Alex Poole wrote a well-explained article comparing serif and sans-serif fonts in an attempt to find out which was more legible.

According to him, there are five features to note when it comes to legibility:

• Serif or Sans-serif
• Point Size
• X-Height
• Counters
• Ascenders and Descenders

Poole concluded, basing from arguments that support both sides, that there really was no difference in legibility when it comes to typeface selection. He also noted that there is a possibility that serifs or the lack of them can affect legibility but the difference is not even measurable.

However, he said that:

Greater difference in legibility can easily be found within members of the same type family than between a serif and a sans serif typeface. There are also other factors such as x-height, counter size, letter spacing and stroke width which are more significant for legibility than the presence or absence of serifs.

Scaling and Resolution

Text in web design isn’t static. It can differ from screen to screen and would need to be scalable. This is done so that the text would still be readable despite the screen size.

In this area, it is safe to say that sans-serif wins the battle as it is more flexible to scaling. Sans-serif fonts are much easier to provide emphasis and readability in smaller resolutions since they survive smearing due to the lack of detail in them.

Image source: TIME

Here is a prime example of how serif is used badly. Take a look at the bottom paragraph on the Time Magazine cover above and you’ll easily notice how relatively hard it is to read, as it does not flow easily especially with that small size. But notice how perfect the effect is as it transitioned to sans serif for “Jonathan Franzen”.

The same is true when a sans-serif font is blown up. The scale of the typeface retains its general shape and makes it more recognizable. So, when it comes to scaling, sans-serifs tend to be easily adapted into better sizes because they adjust well to smearing in small sizes and tearing in bigger ones.

To serif, or sans-serif?

So, what is the answer to the question?

Well, we can say that it is an obvious tie. Choosing between sans-serif and serif fonts ultimately boils down to your purpose of using the text. If the text you are styling supposed to stay on almost the same size? Then you would want better readability which makes serif a better choice.

On the other hand, if you want to make the text part of a responsive website, then choosing a sans-serif font might be wiser since you don’t want your text to appear too small to read.

Image source: GQ

Take a look at these GQ magazine covers that use both serif and sans serif fonts. The general consensus is that serif fonts are used on formal and printed materials, while sans serif is mostly used on the web. But in this case, both were used, and if you will notice it’s always the name of the cover model that is in serif, thus emphasizing it.

Some final words

Just remember that consistency is the key. Your choice of font needs to go with the overall aesthetics of the design you are creating. You can mix and match typefaces that are similar, dabble with resizing them in order to figure out which works. However, remember that you are doing this so that the user would understand the message and your design looks aesthetic as well.