Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Learn how to choose fonts for a web site and create beautiful, legible type. Author Laura Franz shares how to create designs that maximize readability (and keep visitors on the page) by paying attention to details in size, line-height, line length, alignment, color, vertical space, and more. Laura also demonstrates how to incorporate web fonts, style type with CSS, and pick fonts that work well together.
Line length and alignment affect readability. People scan across lines of text and down lines of text at the same time. If line length is too long, our eyes and brain have to work harder to follow the whole line of text. We have to fight against the natural inclination treat down at the same time. It's also harder to keep our place in the text. Long lines of text often result in something called doubling. That is, it results the reading the same line of text over and over again, because the reader can't keep track of where they are in the text.
If you've ever how to read handouts for class or work, you may have had the experience of reading a single column handout versus a two-column handout. Two column handouts feel much easier to read even if they have the same content, because the shorter line lengths are easier for our eyes and brain to handle. If line length is to short on the other hand, it can feel choppy and undermine the rhythm of the text. Short line lengths can also create really jagged ragged edges on the text.
These ragged edges, also called the rag, can standout and create awkward shapes. The trick is to find the right line length for the text. A recommended line length is about 75 to 85 characters per line. This is a recommended range. This text is set at 76 characters per line, which works for the single paragraph of text. Notice line length is not given in a measurement unit like a pixel. That's because fonts are different.
A 76 character line in a font like PT Sans which has a narrower bold will take up less room then a 76 character line in a font with a wider bold like Georgia. A 76-character line and the exact same font set at two slightly different sizes will take up different amounts of room. So a good line length is a factor of the font being used and size it's being used at, not a set measurement. If you're familiar with setting type for print, you'll notice the line length is a little longer than we're used to.
You've probably learned to set line lengths at about 65 characters per line, but longer line lengths work on the web, whether it's a factor of increased font size or simply a matter of reading best what we read most-- that is, we're used to longer lines of text on the web-- is unclear. Either way 75 to 85 characters per line works well on the screen. If you're not familiar with thinking of line length in terms of characters, let's take a look at how we find the character count.
Count all characters, punctuation, and spaces. Here I've marked every 10 characters. I recommend counting three lines of text: the shortest line but not the last line, the longest line, and the line that falls somewhere between the two. Add the counts from the three lines and divide by 3 and you'll have your average character count per line. If the number falls within the 75 to 85 character per line range you're good.
At the same time, it's important to remember this is a range. You may find it's appropriate or necessary to deviate from the range, but keep in mind, too long and it will get harder for people to read your text. Too short and the text will get choppy. In fact, the list of resources is a list. Each item doesn't have a lot of text in it, so we might end up needing a shorter line length to make each paragraph feel more substantial. Here we're using Georgia 15 pixels.
This looks to be a comfortable line length. The character count is 76, so we're right within range. Again line length can vary for headlines, captions, and pull quotes. You'll often find yourself using a shorter line length for smaller blurbs of text. Well, let's apply the chosen line length to our exercise file. You can see we haven't set a line length yet. It's pretty long. We'll set our line length by setting the div containing our text in our CSS file to the proper length. But wait! How do we know how wide the div should be? We can't set it to a width of 76 characters.
Our browser won't recognize that. We need a measurement in units that CSS will understand and our browsers will recognize. So we'll open up the mockup in Photoshop,. Get your Ruler tool, which is under the Eyedropper tool, and you see I've done this before, so my measurement is there. Click the left end of the longest line of text and you drag and release. It will give you a measurement up here. My Width is 492 pixels, so I know that my div needs to be 492 pixels wide.
Let's go change that in our CSS. My text is contained in a div that I've called content_container. I'm going to add a width a 492 pixels, save this, and I can refresh it in my browser and I can see that I have a new line length on my text. It looks good. Let's scroll down and take a look. And I see that I've got a problem in the very last text on my page and this is text that I did not test earlier. Look what's happening. My last URL is coming down in its own line and it's creating sort of a weird space here.
So my ragged right edge is not the way I'd like it to be. So even though I tested this and found where I thought was the perfect line length, I'm going to try changing it and see if I can improve this ragged edge. I'm already at the low end of the range for recommended character count. So I'm going to try making it a little bit bigger. Let's go into our CSS and I'm going to try using a width of 530 pixels. I already tested this and this is the smallest longer line length that would work.
We will save this, review it in the browser, and you can see that fixes my ragged right edge here, but I'm still not happy with it. As a typographer, I'm looking at this text and it's starting to look like horizontal bands of texture and I know on the final page there's going to be a lot of these and I don't want them to look so horizontal. I want them to look more substantial and more like paragraphs of text. So instead of going for a longer line length, let's try a shorter line length, even though it will be shorter than the recommended length.
Go back to our CSS and again I've already tested this and I have found that 444 pixels works well. We save that, review it. I'll refresh, okay. The ragged right edge is better here and the text doesn't feel so much like horizontal bands. This line length is shorter than I would use for prose like in an essay or an article and it's shorter than the recommended line length, but it works well with our list of single short paragraphs.
So remember a recommendation is a recommendation. Always use what works. The trick is to find a line length that is not so long and becomes cumbersome to read, but not so short as to undermine the rhythm of the text. Line length is based on characters per line and depends on the font and font size. Always choose your font and font size first before determining your line length. Good line length also depends on the kind of text you are setting. So always test line length with the actual text you're using.
Find answers to the most frequently asked questions about Typography for Web Designers.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.