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.
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.
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
- Typography Part 3: It’s All About Legibility
- Typography on the information highway
- Legibility Guidelines
The following two posts specifically relate to the topic of typography and accessibility.
- Designing for People with Partial Sight
- Typography and the Aging Eye: Typeface Legibility for Older Viewers with Vision Problems
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.