Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Font size and line height affect readability. People use their central and peripheral vision to take in more than one word at a time. But if text is too big, people can't take in more than one word at a time. This slows down their reading. And the other hand, if text is too small it's hard to read the words. The trick is finding the best font size for the job. The recommended size for text on a Web is 12 to 16 pixels.
We have a range of sizes to work from, because not all fonts are the same. Fonts with smaller x-heights look smaller; fonts with bigger x-heights look bigger, even at the same size. So finding the best font size depends on what front you're using. Here is 12 pixel Georgia. It's a little small. It's got a relatively small x-height, so it should be set a little larger than the smallest recommended size. I would go with 13 pixels minimum, but I prefer 14 or even 15 pixels.
If you're familiar with setting type size for print, these sizes might seem too large. You're probably used to setting type at around nine points, but remember, reading text on the screen is more difficult. Blurrier, backlit text requires larger type. Next let's look at line height. We want to promote horizontal motion to help people's eyes go across the whole line. We want to fight the tendency for the eye to also scan down. Using the proper line height helps the lines stand apart from each other a bit.
If line height is too tight, the lines begin to blend together. If line height is too loose, the lines begin to foot apart. They begin to interfere too much with the natural tendency to scan down the page. The trick is finding the best line height for the job. The recommended line height for text on the web is approximately 150% of the font size. Again this is not a hard and fast rule, because not all fonts are the same.
Fonts with smaller x-heights have more built-in space, so they will look like they have more space between lines when compared to a font with a larger x-height. Even when set at the exact same size and line height, a font with a larger x-height may need more line height to promote the horizontal motion of the lines. Again, here we are using Georgia. The line-height is too tight. Georgia has an average x-height, so it might be fine at the lowest recommended line height of 150%, but we can't set the line height exactly at 150% because it's set at 15 pixels and 150% of 15 pixels is 22.5 pixels.
So we can try it at 22 pixels and also at 23 pixels, and both work fine. I think I prefer the 22 pixels, but neither is bad or wrong. We could honestly choose either one. Of course, if we were sitting last text like a headline or caption, we could use tighter or looser line height. But large amounts of text need a comfortable line height to make it easier on our readers. Let's apply the chosen font size and line height in our exercise file.
We haven't set a font size or line height so the text is coming in with default measurements. The default font size is usually 16 pixels, while the default line height is usually around 110%. So it's coming in a bit bigger and tighter than we want it to be. We want to set the font size and line height for the text. We do that in our CSS file. Our text is set with a p tag. We want to change our font-size to 15 pixels and our line-height to 22 pixels. Let's save our changes and review it in the browser.
Now refresh. The text is now set in the size and line-height we want. Font size and line height affect readability. The trick is to determine what font you're using and what it's being used for. If the font is being used for text, I highly recommend working within the 12-16 pixels for your font size and no less than 150% of your line-height. Keep an eye on your font's x-height. It will play a big role in what size and line height work best for your text.
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.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.