Is the type on your site legible? Is it readable? Do people have to put in a lot of effort to read your prose or does your type get out of the way so that your words are easily understood?
A few days ago Scrivis started a new thread on the Drawer forums (a interesting place for discussions about design by the way) with a complaint about how some site designs have text that simply can’t be read. In his own words:
I can’t tell you how often this happens. I get linked to a website with a great article or a website where someone tells me it has a great design and when I visit it I can’t read a damn thing. Having bad aesthetics is acceptable. Misplacing stuff on a grid I can live with. However, how do some people design a site, look at the font and walk away thinking that it is legible?
If web design is 95% typography how can people design a site with unreadable copy?
The designer of the Inventory Magazine site showed up defending his choices. He made some good points including the client’s wishes and some approval from the site’s audience. Some of us in the thread had a hard time reading the text. Others read it perfectly fine.
My first thought was simply the font is too small (for my aging eyes anyway). As the thread continued I began to wonder what is it that makes type legible? What makes the text on one site easy to read and hard to read on another site? Is it simply the size of the font or is there something more?
The Difference Between Legibility and Readability
The first question we should ask is does type even need to be legible? I’ll let Alan Haley answer the question.
Not all typefaces are designed to be legible. Many are drawn to create a typographic statement, or provide a particular spirit or feeling to graphic communication. Some are even designed just to stand out from the crowd. To the degree that a typeface has personality, spirit, or distinction, however, it often suffers proportionally on the legibility scale.
There are actually two types of type.
- Text Type is designed to be legible and readable across a variety of sizes
- Display Typeis designed to attract attention and pull the reader into the text. It can be more elaborate, expressive, and have a stylish look.
Consider the image below, a screenshot of the site of designer Ardo Ayoub. The type above the navigation can be made out as the designer’s name, but it’s main purpose isn’t to be read. It’s there to set a mood. It doesn’t need to be legible. That’s not its point.
Note: The text is much easier to read at the smaller size of the image here. Click through to the site to see it larger. Had you not seen the image here first, you might not have quickly recognized the text as the designer’s name.
I’ve been interchanging the words legibility and readability so far, but they’re actually two different things.
- Legibility – a measure of how easy it is to distinguish one letter from another in a given typeface. Legibility describes the design of a typeface. How legible a typeface is designed to be depends on its purpose. Legible typefaces usually have larger closed or open inner spaces (counters). They generally have a larger x-height, though not too large.
- Readability – how easy words, phrases, and blocks of text can be read. Readability describes how a typeface is used on the page. Good typography (more readable) encourages a desire to read the copy and reduces the effort required to read and comprehend the type. The reader shouldn’t even notice the type. She should simply understand the words.
“Legibility” is based on the ease with which one letter can be told from the other. “Readability” is the ease with which the eye can absorb the message and move along the line.
—J. Ben Lieberman “Types of Typefaces”
Type must be legible to make it readable, but making type more legible doesn’t necessarily increase readability. Many other things go into creating readable type.
How to Make Your Type More Readable
The common reaction when coming across text you can’t read online is to make it larger. More goes into designing text that is readable, some of which has little to do with the type itself.
Let’s walk through some of the factors that affect readability starting with your overall design. This post will focus on the design terminology. I’ll have a followup on how to control things with css.
Layout: The use of grids, whitespace, and images can all have an impact on readability. Images can help create a flow through your text and give readers a place to rest. A lack of space around text blocks and in your design in general can make elements blend into each other. Grids help align your type across the page.
Alignment: Text can be centered, justified, left-justified, or right-justified. Each has it’s appropriate place in a design. Left-justified is generally best for long blocks of copy. Having a strong left edge gives the eye an easy place to come back to after reaching the end of the line.
New paragraphs: Should you indent paragraphs or start a new paragraph with a line space? Either can be fine as long as you’re consistent. The line space is more common online and probably a little easier to read on a monitor. Other ways to indicate new paragraphs include drop caps, ornamentation, and outdenting. Pick one or combine two ways to signify a new paragraph and stick with it.
Measure: refers to the length of a line of text.Long lines of text tire the eye and make it hard to find your way back to the next line. Your measure should be 45 – 75 characters long with 66 characters as an often been cited ideal. If your design uses multiple columns of text you probably want to keep your measures shorter (40 – 50 characters).
Leading: (line-heght in css) is the vertical space between lines of text. It’s the distance between one baseline of text and the next. Common advice says your leading should be at least 25% to 30% larger than your font size, however I find that 50% larger is most readable online. You can use negative leading for shorter phrases and text blocks, but make sure the ascenders and descenders of the type don’t collide.
Kerning: refers to adjusting the space between specific character pairs. Letter combinations where one or more characters have an open space or angle out (T, A for example) require an adjustment (when paired with some letters) to make the space between them appear more uniform. This is usually taken care of in the typeface and not something you would often do manually Monospaced fonts have no kerning.
Tracking: is related to kerning. It’s the overall space between letters instead of specific pairs of letters (letter-spacing in css). Tracking can be used for effect as well as readability. Script typefaces often require a positive tracking as do all caps and small caps.
Case: Type can be lowercase, uppercase, and mixed case. Lower case (with capitalization for grammar) is the easiest to read in longer blocks of text. Upper case (all caps) is more difficult to read, though it can work fine in short blocks of text.
Font Style and Font Weight: Roman face fonts are the easiest to read. Italics and bolding can become difficult in long blocks of copy and are best use in small doses.
Color: Typographic color refers to the space between letters, words, and lines of text as well as the weight of the font. Leading, and tracking among other things help control typographic color and can be used to control the hierarchy of your text. When text gets too dense (has too much color) it becomes harder to read.
Contrast: relates to the actual colors chosen for text and the background on which the text sits. The more contrast between text and background the more readable the text will be. Black text on a white background is the easiest to read. From there every combination makes text less readable.
Number of different fonts: Using too many fonts in a single design can be a struggle to adjust to. Consistency helps readability. Rule of thumb advice is to use 2 fonts (3 at most) and to contrast a serif and sans-serif font. Perhaps one for body copy and one for headings.
Typeface: We started this discussion with the idea that not all type needs to be legible. Your first choice for readability is therefore to choose a legible typeface. Your choice for body copy is going to come down to either a serif or sans-serif typeface.
Serifs help lead the eye and they’re typically chosen in print. However they can become difficult to read at smaller sizes as the serifs collide, which is why sans-serif fonts have become more common online. Either serif or sans-serif fonts can work well online as long as you do most of the other things in this post right.
At smaller font sizes you want to find a typeface with a heavier stroke weight and less contrast between thick and thin parts otherwise strokes can overwhelm the thinner strokes. You’d typically want to choose a font with a wide-set width and a larger x-height. Often you’ll need to add tracking at smaller font sizes.
Font Size
I purposely saved font size for last in order to show you how many other things play a role in readability. Some fonts read better when small and others when large. Verdana for example is designed slightly larger than other fonts making it very readable at small sizes and explains why it’s so often used in online body copy.
The question you probably most want to know is what size should you use. There isn’t a simple answer. Compare the following two fonts.
This is 12px Verdana
Same 12px, but a different size.
Somewhere around 10pt or 11pt is ideal for reading in print. Of course there’s no such thing as a point online even if css lets us set fonts in pt sizes. There isn’t an exact conversion between px and pt either, however using the conversion chart at Reed Design we see that 10 to 11pt corresponds to 13 to 15 px, probably a bit larger than what many sites use.
You also need to take your audience into account. I can tell you that the older I get, the larger I want to see a font-size set.
12px is a common setting for online body copy. If you go below this be prepared for people to comment how small your font is. At 14px you’ll probably start getting comments about your large font. 12px to 14 px though is probably a good range to choose for body copy, though again it will depend on other factors.
For things like captions you would usually go a little smaller and naturally for headings you would typically go bigger.
One last point about font sizes is the idea of scaling, which can be used to develop a hierarchy in your type. The basic idea is to choose font sizes that relate to one another for different elements in your design. I’ll let Mark Boulton, the author of the post behind the previous link, give the details.
Resources
While this post has covered quite a bit of information there’s plenty more to know about typography in regards to legibility and readability. The following posts can serve as your next step in acquiring a greater understanding of typography.
- Web Typography
- In search of the perfect font
- Legibility
- Typography Part 3: It’s All About Legibility
- Typography on the information highway
- Legibility Guidelines
- Typography and the Aging Eye: Typeface Legibility for Older Viewers with Vision Problems
Summary
Hopefully I’ve convinced you that there’s a lot to designing legible and readable type. My main goal was to get you to see past the idea that it all comes down to your choice in font and font size. Like a lot of people when I see type I can’t read my instinct is to think it simply needs to be bigger. Hopefully now we’re both aware of the many of things that make type more readable.
I also hope this post has convinced you to spend more time planning out the typography in your next design. Again I think most of us choose a typeface or two, set some sizes and are done with it.
I’d like to tell you I spent a lot of time with the typography on this site, but I can’t. Face and size were pretty much it, though I think I did ok when it comes to the overall layout making the text easier to read. With the next design of this site I will be paying a lot more attention to typography and again I hope you will too.
Next time let’s see if we can both take a step in that direction and look at the css properties that deal with typography. We’ll go through them thinking about the terms we’ve discussed here and see if we can set up a basic typographic stylesheet. With a little luck we’ll come up with something we can reuse from design to design.
Download a free sample from my book, Design Fundamentals.
*Sorry if I repost my comment but I had a MySQL error (something like ‘failed to update status’)*
Thanks for clarifying the difference between legibility and readability; I read the whole topic on Drawar but felt that people mixed the two without paying attention to their meaning.
Those who complained about the poor legibility on Inventory Magazine forgot that Georgia–just like Verdana–was created for onscreen reading, especially at small sizes (8-12px).
I think many’s reactions, and the impetus that triggered the whole discussion, is some kind of mental conditioning that 16/24px is the best setting for body text and that everyone should base their grid on it. It may be the case for beginners but for those who know how to play with all the other parameters you mentioned, there is a whole universe of working solutions.
To the best of my knowledge, nobody ever complained that A List Apart is barely legible.
To me, Inventory Magazine is a place for people who want to read (i.e. take the time to do it) and who like photo-journalism. Despite our subjective reaction when looking at the page–I had the same gut feeling than many others–the designer was able to give analytics which prove that their audience is fully immersed in that experience.
What do you think?
A final note on line lengths. There are numerous studies proving that blindly following the conventions for print is a mistake. Yet people’s subjective opinion is that 60-70 cpl looks easier to read, scientific observation shows that it is not. For example:
http://blog.fawny.org/2005/09/21/measures/
http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp
“Never ask for what users think”, isn’t it? đŸ™‚
Sorry about the MySQL error Regis. It doesn’t look like the first post went through at all. I hope it didn’t take too long to retype.
I was like most people in the Drawar thread. My initial thought was the font is too small so it’s unreadable, but as the discussion continued I started to wonder if that was really all there is to readability and hence this post.
As I get older I do find it harder to read things printed smaller. Just a fact of life. It’s easy enough to make text on the screen bigger and one or two cmd+ and I was reading Inventory Magazine fine.
You have to know your audience. If their audience prefers that smaller size then that’s what they should use and people like me will make the text bigger if we want to read it.
Interesting posts on the size of the measure. It kind of makes sense too. I would think a longer line would mean it takes a little longer to find the start of the next line so you lose some time there. However because the measure is longer you’re having to look for the next line less often saving time.
Visually I still prefer the shorter measure, but it’s interesting to know that for readability it might not be so important.
Probably, a bigger font size would appeal to a wider audience and perhaps they shot themselves in the foot after all–even though it seems they have a very large user base.
Have you tried the readability bookmarklet? Very handy! I use it quite extensively, mostly to get rid of all the noise surrounding an article I enjoy reading but also sometimes because I’m just too far of the screen and need a larger font.
Don’t apologize for the error, shit happens. I got into the habit of copying everything to the clipboard before submitting hehe. I’m just sorry I did not think to do it with the error message, it may have helped you fix it.
I like your blog very much. I read every post, they’re well documented and easy to read. I hope you’ll get more and more conversation with time! Thanks for your reply.
True. I’ve been setting font-sizes a little larger than I used to. I tend to favor 13px or 14px as a default size. It looks like Inventory Magazine is using 10px as a default. I think they could have gone with at least 12px and not have it affect the design, but that’s my personal choice.
Thanks for the readability bookmark. Already added it. Naturally we can’t count on people having that when we design, but it’s going to be very helpful when it comes to reading other designs.
I hear you about the errors. I have the same habit of copying things to the clipboard just in case, but did you ever notice it’s always the one time you forget to copy to the clipboard that an error happens. Damn that Murphy and his stupid law.
Thanks for the compliments on the blog. I try. I’ve been thinking about how to generate more conversations. Sometimes I think I make the posts too complete and forget to leave room for conversation.
I’ve also thought that instead of leaving the conversation to blog comments it might be better suited to forum posts. I’m slowly working on a redesign and going to see if I can tie in a forum for discussion as opposed to just comments on the blog. I have to see what’s possible and what’s the best way to set it up.
I can’t remember where I found this story. There was a famous mathematician who used to present his work to other professionals. On the first slide, he intentionally added a very obvious mistake–the reaction was almost immediate, the audience noticed it. At this very moment, they were all completely focused on the talk and looking at each slide to make sure that it was correct–which hopefully it was.
There should be the same kind of trick one could use in order to entice people to share their thoughts đŸ™‚
Looking forward to seeing what you come up with!
(so true for the comments, doh!)
Hi,
thanks for this interesting article.
With all the “new” typographic tools for web designers, I think it’s usefull to go back and learn the basics before to use all these new fonts without any sense.
Thanks for this little sum-up.
Somebody taught me a long time ago to abandon previous rules for print media and forge ahead with new ones to take advantage of page width fluidity.
The first new rule is to begin each sentence with a new line, not to be confused with paragraphs which require a space as well.
I agree about taking advantage of the fluidity of the web. I wouldn’t say we should abandon all the rules of print media though. The basic principles of design still apply and we still want to put work into our typography and work with girds, etc.
I think the rules specific to the medium change, but I would say to abandon what came before,
Hi,
thanks for writing the article.
All these tips about typographic designs are very classic and I appreciate your work and struggle. I will try to use it in my new projects.
Thanks Oliver. I’m glad you found the article helpful. I hope it helps.