Loading
Sep 29, 2010

Bad typography kills good content

written by Daryl Woods
Typography 101 image

You read it everywhere. “Content is king.” In the age of the blog with so much information available to be consumed, attracting readership is highly competitive whether in print or online. You can’t afford to make your content difficult to read due to poor typography.

I hate Men’sHealth magazine. It’s not the articles, I find those quite informative. It’s not the direction. I get it. Young target market. It’s not their relentless fixation on scantily clad models, that’s…um, tolerable. My problem is reading it. Or rather, the challenge of reading it. There are parts of the magazine I can’t read at all. Yes, I wear glasses and even with a new prescription, I find much of the content unreadable. I don’t have this experience with other magazines I read although I’m sure Men’sHealth is not alone in straining the eyes of its readership.

In print, there is incredible control of typography so poor choices are hard to rationalize. Web type offers far less flexibility and greater challenges. But in print or online there are typographical rules and best practices for optimum readability. Here’s a start.

Type Size

Do I need to explain this? If it’s too small it can’t be read. Conversely, don’t make your text too large. It can be interpreted as shouting or convey insecurity versus confidence.

Type Style

Bold and italic versions of fonts are created for emphasis and should be used sparingly. Bold is best suited for heads and subheads. Avoid it in the middle of paragraphs. It disrupts the flow of the text. Italics are more appropriate to bring attention to a word or thought. Don’t overdo it. Both can be used in short passages of isolated text as call-outs. In larger volumes they become tiresome to the reader.

Typeface

There are basically two kinds of typefaces. Text faces are highly legible in any size and designed to be easily read. Display faces are often more decorative and sometimes challenging to read in smaller sizes. They create character and draw attention. Your choice of text and display faces can be similar or contrasting. But don’t use too many different faces on the same page. It becomes distracting.

Case

The best practices for use of uppercase type are similar to those for bold and Italic but for different reasons. The variation in lower case type created by ascenders (bdfhklt) and descenders (gjpqy) guide the eye to faster recognition of the characters and make reading easier. All caps on the other hand form a straight line top and bottom and are therefore more difficult to differentiate. Oh! Never use all caps with a script font.

Measure

This refers to the number of characters per line. Aim for a column width that accommodates 45-75 characters. Why? Beyond 68 characters per line it becomes difficult for the eye to find its way back to the next line below. You may want to think about this if you design websites with a flexible column width for text. With today’s large widescreen monitors this can be a serious problem.

Contrast

Readability is greatly impacted by the colour of the type and background. Black on white offers the ultimate in contrast. Colour on colour requires great care. Dark shades against bright or light shades work. But type size and weight are factors. Red type on a black background is effective if the type is large and bold enough. It is hard to read if the type is small and fine (Are you listening Men’sHealth?).

 

These are just a few typography basics to help you avoid mistakes that could impact the readability of your content regardless of how you publish it. There are other factors such as the space between letters and lines to consider. If you’re a designer reading this, please feel free to add your thoughts or express your pet peeves in the comments.

Upate: I now read Men’sHealth on my iPad. Problem solved.

See also: The future of magazines – Sports Illustrated tablet demo

 

Comments
  • Judy Margolis Oct 22, 2010 Reply

    Excellent advice. Thanks, Daryl.

  • web designer Oct 25, 2010 Reply

    Thanks for that I will be bearing this in mind on my next project.

  • web designer Jan 25, 2011 Reply

    great stuff. very usefull.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.