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.
In this chapter we've learned a lot about how to choose size, line height, line length, and color to promote readability of text on the web. Now it is good time to ask, how do professional sites use these things to promote readability? Do any of these sites use an italic, bold, or all caps for emphasis? How is alignment used, how is color used? On ilovetypography.com, they use a generous font size and line height. The line length isn't tool long or too short.
The text in the list of links get smaller, but it works here because it's not prose. The links are still big enough for us to scan quickly or read casually. When italic, bold, or all caps are used, they are used sparingly and they don't affect the readability. We can click through to an article, let's find one here, and we will find the font size and line height are generous.
The line length is comfortable. There is lot of text packed with new information or ideas and reading needs to be as easy as possible. As for the color palette, it's pretty simple. The text is elegant in a very dark gray. This also helps facilitate reading longer passages, because there is a touch less contrast between the texts in the background. John Boardley, the typographer behind ilovetypography.com, uses an orange for accents, but again he uses it sparingly, across the top and for a couple of headings.
In some of his articles he also brings in a red. Jetscram's design uses a readable with less generous font size and a good line length. The line height is also generous. The lines of text aren't too close together or too far apart. Verdana sometimes gets a little heavier when it gets light and dark. And while the font isn't bold, some of the counter forms can start to fill in a bit, but because of the font size and small amount of text to read, this isn't too much of a problem.
Most interesting to me is the color palette on this side. The light gray and the dark gray background is sleek, but not too elegant. It works with their own description of their products: design driven, lifestyle footwear for young, hip, wired tastemakers. Keeping the color shades of gray instead of black-and-white keeps the text readable. It prevents sparkle. It also lets the images of the shoes pop-out even if they're just white shoes and black shoes.
They sort of subtly glow off the gray background. A List Apart uses Verdana too. Since it's not light and a dark background, the text doesn't get any heavier. This makes the text easier to read and readability is especially important on this site, because it publishes long articles that introduce new technical and theoretical information. Their readers aren't reading a quick blurb about great shoes. They need to go into a trance-like state and wrap their minds around new ideas.
When we click through into an article, we can see that when they use italic, they use it sparingly and it doesn't interfere with the readability of the text. As for color, A List Apart changes their color palette. The logo remains the same as does the dark gray font. But here we can see they are using a golden yellow and a dark orange. If we were to have looked at this last month, these colors would have been a bright green and a different kind of orange.
Notice the colors while they are bright are not hard to read. They are dark enough to remain legible on the white background. Khoi Vinn uses Arial and works with size, line height, and line length to promote readability. The line height is generous and the line length prevents doubling, which is great. Compare the text in this post to the text here in the links and you'll see that the links have a much tighter line height. That's okay, because they're not meant to be read in a sustained manner and the line length is so short that there is really no chance of people doubling on those lines.
The color palette is simple and clean. The text is black with the occasional headline in gray. Let's follow, click through to an article here, and you will see headlines are in gray. This allows the images to bring color into the site. It's lovely. There is a little burst of color that will also show up when we roll over links. We will talk about links later in the course, but I wanted to point out here the idea of incorporating link colors and rollover colors into your palette.
Even colors we can't see yet will be part of the palette on rollover. And I can't believe that three out of the four sites that I'm showing you today are using orange this month. You can keep an eye on alistapart.com and check out their changing color palette. I didn't plan on covering another page, but I'm going to show you another one since we are looking at a lot of orange today. Trent Walton uses a bit more color on his site, because each of his articles is designed differently.
One this page you will notice the background is very subtle and the red while bright is not overly so. It's on the orange side, but also sort of on dulled down side. It works really well, both in the image and on the online links. If we go back to this previous article, you'll see the switch. The text looks like it's white, but it's not. It's got a very slight warm color to it. It's actually set at fffff3.
The text doesn't sparkle and interfere with reading and this is primarily because the background color isn't too dark, it's not dark like a black, and the color is dulled down a bit. So the contrast is reduced and the colors used are not too bright. But the blue-green background, it's arresting, especially after seeing all the sites with the sort of subtle elegant dark gray and white theme. So as you can see from analyzing the professional sites, when text is set well with readability in mind, we often don't notice it. We just enjoy and read the text.
Making good typographic decisions to promote reading will take you extra time, but it'll be well worth the trouble. Your readers will be able to enjoy reading about things that are important to them without being distracted or frustrated by a difficult reading experience. Again, when you see a web site with good typography, feel free to analyze their design. What font size and line height are they using with specific fonts? What is their line length? What colors are they using? Don't hesitate to learn from other people's good type decisions.
It will only help you make good type decisions too.
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.