Can You Read Your Website?

Are the fonts on your site legible? Can you read it? Do people have to put in a lot of effort to read or does your type get out of the way so that your words are easily understood? An oft-heard complaint about how some site designs have text that simply can’t be read:

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 a bad design is acceptable. Misplacing stuff on the design 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 text?

The Difference Between Legibility and Readability

Not all typefaces are designed to be legible. Many are drawn to create a statement, or provide a particular feeling. Some are even designed just to stand out from the crowd! A typeface that has a spirit, a personality or a distinction, however, often suffers on its legibility.

Display Typeis designed to attract attention and pull the reader into the text. It can be more elaborate, expressive, and have a stylish look. While, Text Type is designed to be legible and readable across a variety of sizes.

I’ve been interchanging the words legibility and readability so far, but they’re actually two different things. Legibility is 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. Readability describes how easily words and blocks of text can be read. Readability describes how a typeface is used on the page; it encourages you to read by reducing the effort required to read and comprehend the text. The reader shouldn't even notice the text font; he should simply understand the words.

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 text.

How to Make Your Text 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 font itself.

Layout: The use of whitespace, grids and images; all have an impact on the readability. A lack of space around blocks of text and in your design can make everything blend into each other. Images help create a flow through your copy and give readers a place to rest.

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.

Paragraphs:Long lines of text in paragraphs tire the eye and make it hard to find your way back to the next line. Your line length ideally should be 45 – 75 characters long. Also avoid long paragraphs. Line spacing within paragraphs and between them is also essential. Common advice says the vertical space between lines of text should be at least 25% to 30% larger than your font size, however I find that 50% larger is most readable online.

Type 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 or all caps is more difficult to read, though it can work fine in short blocks of text.

Font Styling: Roman and Sans Serif fonts are the easiest to read online such as Arial, Verdana, etc. Italics and bolding can become difficult in long blocks of text and are best use in small doses. The more the colour 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.

Hopefully I’ve convinced you that there is a lot to designing legible and readable text. 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.