Fonts and Readability

Are You Choosing the Right Font for Readability?

Lady Reading MagazineLegibility and Readability are synonymous terms, but there is a bit of a difference. Legibility, can be defined as plainly discernible; apparent. It also means possible or easy to read, but more from a perception point of view. Readability, on the other hand, is defined as easy to read from a physical point of view.

So, what does that mean, exactly? Readability is all about making long blocks of text easy on the eyes. This can come in the form of font choice, line spacing (or leading), judicial use of white space, and line length. While readability is important in all forms of graphic design, it’s especially important to direct response packages and websites, where there is an abundance of copy and calls to action.

Choose Serif Fonts for Long Passages of Body Copy in Print

Futura Light Condensed font exampleHow does font choice affect readability? While there are exceptions to every rule, most typographers will agree that in print it’s much easier to read serif typefaces for long blocks of copy than it is to read sans serif. A sans serif typeface is like the one you are reading here on this website (Helvetica Neue). A serif typeface has the little feet at the bottoms of letters like “t”, “i”, or “r” and other styling elements like finishing strokes at the end of arms and tails. A common serif typeface that most will be familiar with is Times New Roman. So why isn’t this website copy set in Times New Roman instead of Helvetica Neue? We’ll get to web copy in a moment. For now, let’s concentrate on print.

There is a reason you never see books printed in Arial, Futura, or Avenir (all common sans serif typefaces). Your eyes will slow down and trip over words instead of capturing and processing word blocks. Think about the last time you read anything word for word, letter by letter. Probably when you were first learning to read, right? Now your brain has adapted and recognizes words and phrases in blocks. With the little finishing strokes that serif fonts have, letters in words tend to tie together so it is much easier to read quickly.

Sans Serifs Are Readable Too!

Don’t for a second think that sans serif fonts aren’t readable. They are perfect for short scans, which is why they make great headline fonts. Logos use sans serif fonts all the time. What font choice are you likely to see in billboards and road signs? Sans serif, most likely. However, in long blocks of copy on a printed page, serif fonts are the way to go.

Use Sans Serifs for Long Blocks of Online Copy

Why is the web different? It comes down to the way the eye reacts to light. A sheet of paper refracts light. It absorbs the light wavelengths. A monitor or screen reflects light. It is projecting the light wavelengths to your eyes. This is why a printed book’s colors are duller, even with high quality printing processes and archival paper, than those on a computer screen or television set. So, with the refractive, light absorbing properties of paper, your eye needs to be guided along gently with serifs. They touch one another, joining the words so they are easily grouped by your brain. On a computer screen however, the opposite is true. Serifs are too much and hinder legibility and readability by forming a large, black mass! Naturally, there is an exception. (There are always exceptions when it comes to design!) The font Georgia was designed with screens in mind and is a perfectly acceptable serif font for screen usage. It’s light and airy enough so as not to form the black masses that fonts like Times New Roman would.

Remember the Medium and Adjust Accordingly!

Granjon Roman font exampleRemember, the advice given here is for projects and pieces with long blocks of copy. Magalogs, direct marketing sales letters, books and magazines are all examples of the type of projects that would need serif fonts for the body copy in print. For a direct marketing online sales letter or the online version of a book or magazine, choose a sans serif font. This is a mistake that is made way too often. Printed pieces are made into interactive PDFs straight from the print version with no adjustment for the different medium. The result is a piece that is difficult to read online. The reader’s eyes get way too tired trying to read serif fonts on a screen. As a result, the piece isn’t anywhere near as effective as it could be. The social media shares would skyrocket if the project in question were more web-friendly.

Do you agree or disagree? Leave your two cents worth in the comments below. Also, if you tweet, be sure to follow Koger Creative on Twitter (@k2_kogercreative)!

This entry was posted in Graphic Design by Keith Koger. Bookmark the permalink.

About Keith Koger

Keith Koger is the owner-operator extraordinaire of Koger Creative. Although one heck of a graphic designer and copywriter, he has yet to learn that Star Trek, Star Wars and Monty Python references are the quickest ways to drive away women.

6 thoughts on “Fonts and Readability

    • Oh, really? Is that why Apple and WordPress have adopted the font as defaults… so people can’t read the copy on blogs and iOS devices? Apparently you didn’t have much trouble reading this post! Granted, Helvetica Neue THIN can be a tad much for websites, but Helvetica Neue regular shouldn’t cause any problems with any browser that is from this decade.

  1. What font does Safari browser on OSX use? Helvetica or Helvetica Neue?

    By the way, I did find this article a little tough to read due to the very light/thin font.

  2. The debate always seems to be serif vs sans-serif, but honestly I think the issue is so much more than that. Font size, spacing, font weight, and positioning contribute significantly to legibility as well. Some fonts were designed for print, and some for web, and often a lot of thought goes into every little detail. Personally I find the most annoying fonts to read are mono space fonts, which you don’t see on the web but seem to show up a lot in comment boxes and text editors

  3. Thank you.
    I use data from hand-writing and 100 yr old print, which is transcribed to read on both website and in print. Using Times New Roman for print was good but has proved hard on the eyes when read on the web. Using Serif or sans-serif appropriately solves that problem. Now I need to know what print is best used for managing and transferring data on and from the website.

Leave a Reply

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