Transcript for:
Understanding Readability in Typography

In this video, we're going to start off talking about the most important thing relative to type, readability. And so I'm going to show you different things that affect readability. So as you move forward with your projects where you have to deal with a lot of body copy, paragraph copy, please keep these things in mind and you will end up with not only more successful layouts, but type that is more inviting and easy to read. So alignment is one of the more basic things that can drastically affect readability. On the left, flush left, also known as align left. Second column, flush right, align right. Then centered, and then justified. So we've talked about alignment relative to display type, but relative to body type, your decisions here can totally destroy any chance that your message is going to be read. So... The elephant in the room are the two columns in the middle. You will never set more than a few lines of text with flush right or centered alignment. Quite simple. We're used to a hard left margin. And if that is gone, we have an incredibly difficult time tracking from line to line. So it won't take long before your reader will give up in disgust and say, the heck with this. No way. So that leaves the two. outside columns. So flush left and then justified. So flush left is universally accepted as the most readable form of alignment. And why that is, is very simple. Because it's like a typewriter. You have uniform spacing from the beginning of the line to the end of the line. And when you run out of room, well, you just return to the next line. Ding. Now justified, you see that probably more than you do flush left, which is interesting, isn't it? Yes, dear. If you happen to pick up a newspaper, do you ever pick up a newspaper? But if you happen to, you'll notice that that is justified. Most magazines, the type is going to be justified. Paperback books and most hardcover books as well, justified. So if Flesh Left is more readable, why the heck is everybody setting everything justified? I don't know. Well, it's quite simple. With justified text, you can fit more. type into a given space. In fact, just in these columns here, you'll notice that the justified column is a line shorter than the other columns, and it's exactly the same text. So just saving that line of text in those three paragraphs, you can see that over the course of a book would end up saving many, many pages. So it's a cost thing. Justified type is not unreadable. In fact, it's really quite readable. It's just that it's not quite as readable as flush left because the way the lines all come out even on both sides is that the word spacing is adjusted from line to line. So if you look at these two lines of type highlighted in the justified block, you'll see that the bottom line, the word spaces are much wider than the word spaces in the line at the top. So that's how justified copy adjusts to make the margins hard left and hard right. But then this also affects readability. Okay, so this is a good one. Serif versus sans-serif. So you'll notice in a lot of my examples, I have used both for body copy. But if your goal is absolutely the best readability you can get, then use a serif typeface, and more specifically, a more traditional serif typeface. Why? Because we are used to those little feet on the bottom of the characters. It helps us easily identify the different characters. So you may have heard the term legibility and think that's totally synonymous with readability. And the truth is it's not. A lot of people misuse that term legibility. Legibility, very simply, is how easy it is for you to distinguish one character from another. So how easy is it to tell that's an A, an M, a Q, or a question mark? That is what legibility is. And so serif typefaces to our eyes and our brains are more easily and quickly understood. There's more identifying characteristics on a serif typeface that help us easily see the difference between one character and another. For instance, a lowercase i and a lowercase l. Very distinctive in serif, but in sans-serif, you run a bunch of those together, like in Lilliput, and you will have a hard time distinguishing where the I starts and the L begins. So in these examples here, and I've just shown you flush left and justified columns for obvious reasons, you'll see the serif on the left and the sans serif on the right. Now if you're just looking at them as aesthetics, then you may say, gosh, I really like the way the sans serif looks better. But if you go in and try to read it, I think you'll discover that you will be more comfortable reading the columns on the left. Column width. Now I love talking about column width because this is something that you probably don't think about a lot. When you are given a magazine or a newspaper or a book, the column width is probably nothing that you really pay attention to. But you may notice the consequences of a non-ideal column width. For instance, the far right column that is 82 characters wide on average. That's about what a paperback book would be. And so, have you ever been reading a paperback book and you find yourself rereading the same line two or three times? Well, that is a consequence of a column width that is too wide. Your eye is having a hard time easily tracking down to the next line. Now, to go to the other extreme, the skinny column on the left that is only 19 characters wide, This is incredible. incredibly tedious and slow reading because we're spending all of our time going to the next line because there's only three or four words per line. And so that definitely strongly affects readability. The ideal width for a column is not an actual measurement because obviously it's going to depend on the typeface and it's going to depend on the size of the typeface. And so I'm not going to say two and a half inches is the best column width because that would be a false number. No, the better ideal is how many characters there are in a line. So the ideal column width is 39 characters, one and a half alphabets. And that has proven to be a very comfortable width for us to read in. So if you ever go to a magazine and say those columns look just about right, go through and just pick a typical line and count how many characters are in it. Chances are it's going to be somewhere around 39. So you'll see my third column there is 40 characters, so that's pretty much that. And you'll notice the columns on either side are actually not bad. Those are quite readable. One's just a little bit skinnier and a little bit wider. So, you know, that's just serving as a guideline, as a starting point. But if you push beyond that basic range there, then you are going to start making things more difficult on the reader, and you're going to be less likely to impart the information to your viewer. Okay, letting style and case. Lots of beginning designers will make mistakes when it comes to these characteristics. So let's start with letting, so line spacing. So the first two columns there, the one on the left is what's called solid set, meaning that the letting is the same size as the typeface. So in this case, it's 11 on 11 Georgia regular. So you can see that is not inviting to read. one big clump of value and you don't easily distinguish the lines or the letters. The column to the right is more inviting to read, but this is kind of similar to what happens when you have column widths that aren't right. You're going to have a harder time tracking to the next line. So what you're looking for is a happy medium. Contemporary standards consider the ideal letting to be 120 to 145 percent of the type size. So for instance, if you had 10 point type, then 140% letting would be 14. And that's generally about where I end up is anywhere around 40, sometimes even 50%. It depends on the typeface. So this is where common sense comes into play. Now, this isn't about aesthetics, although that can be a part of it, but that's secondary to functionality. What is comfortable letting to read at that? particular typeface at that particular size. Okay, so another mistake beginners can make is using display fonts for body copy. So display fonts are meant to be used large, and that's the way they're designed. So this one here, the Museo 900, I certainly would use that for subheads, but I would never use that for body copy. It's just way too heavy, and when you get to smaller sizes, all the little counters, the holes in the letters. will start to plug up. Makes it very difficult to read on screen and tends to totally clog up when it's printed. So never use display fonts for body copy. Now italic is probably the least offensive column on this page because we're actually fairly used to reading. italic type, but you got to remember that italic is not designed to be a large block of text. It's meant to be text for emphasis, much like the display font. And so if you have a title of a paper or the name of a song or an artist, then you may want to set that an italic type to give it the distinction you need it to have to set it apart from the rest of the text as being special in a particular way. But in terms of setting a whole block of type in it, it's readable, but it is not ideal. It is not conducive to easy, comfortable reading because the shapes of the characters are modified. And then the last column is absolutely my least favorite. When we read type, we don't read individual letters. We see the shapes of words or groups of words. And because we've seen those a lot, we instantly absorb it and don't have to look at the characters to define what those words are. But the minute you go to all capital letters, then each letter basically becomes a rectangle, and then each word becomes a rectangle. And so if you just look at that, you find yourself going, whoa, you don't even want to start to begin to read it. And so because those are shapes that aren't distinct from each other, we end up having to read letter by letter and it really slows us down. All right, so this pretty much wraps up our video on readability. There is one idea which I haven't mentioned yet because I mentioned it in the first type video, but it bears repeating. And that is the idea of contrast. That you have good contrast between the type itself and the background it is sitting on. That is critically important when you deal with body copy. Also, be very careful that you don't don't put body copy on complicated backgrounds. You're going to pretty much ruin any chance you have of getting your message conveyed. There are going to be times when you break some of these rules, but keep in mind that these rules are in place for a reason. And if you do break them, then you need to make sure you compensate in other ways to make sure that the readability of your type comes through.