Serif and sans-serif fonts

I don’t like to claim a lot of expertise in formatting, layout and graphic design. That isn’t to say I can’t do it, nor that I haven’t produced a couple of my own publications and newsletters. But I found myself in an argument recently defending using both serif and sans-serif fonts, which is like arguing over what colour black you want to wear to a metal concert (that’s a no-brainer: the darker one).

Anyway, there are plenty of anal retentive science nerds like me who have gone and done research into what fonts work best for which applications. There are actually a surprising number of research studies on fonts and readability.

First, let’s define what is meant by serif and sans-serif fonts. (From Scribe Consulting) Consider the following characters. The first is set in Georgia, a lovely serif font. The second is set in Verdana, an easy-to-read sans-serif font.

serif sans-serif
    serif     sans serif

Notice the small decorative flourishes at the ends of the strokes in the left character. These are called serif. The right character does not have these strokes and is said to be a sans-serif font. Sans is the French word for without. So I could be currently sans-pants.

The most common examples of these two font types are Times New Roman (serif) and Arial (sans-serif). Bleeding Cowboys would be an example of an overused serif font that is for try-hards, whilst Comic Sans is an overused sans-serif that shows a lack of taste.

Now there are some simple rules of thumb when it comes to using serif and sans-serif fonts, which are backed up by science. The first rule is that thumbs only hit the space bar once. The second rule is:

Use serif for printed work

Serif fonts are usually easier to read in printed works than sans-serif fonts.

This is because the serif make the individual letters more distinctive and easier for our brains to recognise quickly. Without the serif, the brain has to spend longer identifying the letter because the shape is less distinctive.

The commonly used convention for printed work is to use a serif font for the body of the work. A sans-serif font is often used for headings, table text, captions, and ransom notes.

The third rule is:

Use sans-serif for online work

An important exception must be made for the web. Printed works generally have a resolution of at least 1,000 dots per inch; whereas, computer monitors are typically around 100 dots per inch. Even Apple’s much vaunted retina display is only around 300 dots per inch — much lower than print.

This lower resolution can make small serif characters harder to read than the equivalent sans-serif characters because of their more complex shapes. Yes this does give you an excuse to buy a 4K monitor for your computer. Go nuts.

It follows that small on-screen text is better in a sans-serif font like Verdana or Arial.

Further reading: http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/

Cool infographic:

serif-vs-sans-serif

Infographic from here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s