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 create hierarchy and chunk text on the page. We've used proximity and similarity and both these things help readers find and read what they're looking for. Now is a good time to ask, how do professional designers create hierarchy on their sites? How do they chunk the text on their sites? How do they use proximity and similarity? Here at subtraction.com we see similarity galore. Everything is in the same font, Arial.
This helps the subtle contrasts work to create hierarchy and chunk the text. Here you can see the first level of chunking is done by placement. The homepage is organized by date and the date is in a column of its own on the left. The next level of importance here is the title of the post. Posts are chunked by a bold title and a pair of rule lines. The top rule is a little bit thicker and darker and it creates a stronger visual separation. The bottom rule is so subtle that the title and the type that follows it feel like they belong together.
If we go up into the Archives, we can see that the rules continue to be used. And also the headings are a little bigger. This is necessary because people are scanning the text, looking quickly for information for a topic or a date. The larger heading wasn't necessary in the homepage where a reader is probably reading in a more leisurely manner. Let's go further down into the site. We'll click on a topic and here we can see that the use of rules continues.
As readers we've learned what his system is for separating things and he wouldn't want to change his system now. We can see he has got the date on the left and the title. Let's go into an article. Here we see that the title of the article has gotten bigger. If you look carefully, it's actually the same size as the title of the web site, but he has created a little hierarchy here. He has lowered the hierarchy of the title by graying it back.
We can also see that he needs to use subheads in some of his longer articles. His subheads are set in all caps and they are grayed back a little bit. This must have been sort of a tough balance to find for hierarchy. He couldn't have used lowercase bold, because then they would have looked too much like his links and all uppercase and in black, it would have just had too much presence, too much hierarchy. So by using the caps and the gray he balances his hierarchy and his subheadings don't look like his links.
And even though they are a little bit more subtle, they still help break the text, because they have a really nice amount of space above them. On our next site, Design Observer, we can see they also use rule lines, both vertical and horizontal to chunk their content. They have to. It's jam-packed. And here's something interesting. If you're planning to use rule lines, you should consider using heavier lines between the columns to separate them and then lighter rule lines within the columns so they don't break the vertical flow of reading down a column, and that's what Design Observer does.
See how the horizontal lines here are lighter and the vertical lines are heavier. If you look over here in the third column you'll see that they're using very thick rule lines. Our eyes are drawn to this area, but the subtle background color that they use in this column, it's very subtle here. Very, very light yellow. It helps with the vertical flow of the column, that the vertical flow of the column remains strong, because the color is only in that column. And the rules are pretty thick, but they work here because they visually relate to the text.
If you look at this top rule, in this top h4 here, they visually relate to each other. They feel like they belong to each other. But you know what, chunking text isn't just about rule lines, so let's look at the text itself. I absolutely love the hierarchy they've created on this site and I want to point out some of the subtleties that tell you that this page or this site was designed by an experienced typographer. First, their h1, the large sort of yellowish type here. It's not bold.
It's not a strong color. It's not in all caps and it's not a different font, yet it's the strongest heading in the content and that's because they didn't hold back in size. Their h1 here is 24 pixels, while the h4 above it is only nine pixels. So there's a really good contrast between the two and at that size an h1 does not have to be bold. And if we go into another section of the site, we scroll up here, we'll go into Places, you can see that the h1 changes color.
It shows we're in a different section of the site, but only the color changes. So there's an element of similarity here. The system didn't completely change on us, and that's good. We learned the rules of hierarchy on the first page and the rules shouldn't change when we go into another section of the site. My favorite subtlety though is the h4. It sits here over the h1 and it says, "Hhi, I'm less important than the title below me. I'm just sort of small. I'm just sitting here." That's okay. But then over here in the left column the exact same h4 is strong, and it says, "Stop, read me.
I am the heading for this chunk of content. I am the heading for this list of links." So the designers found a perfect balance in their system of hierarchy. The exact same tag can play multiple roles on the same page and this is lovely. It keeps the page simple and tied together. If they had used more tags or classes to create more levels of hierarchy, this page could have felt really overwhelming. It has a lot of content on it. So finally, a quick look at the hierarchy within a longer article.
Let's scroll down here and see how they're using their subheads. And you can see it's very simple. They've simply added a bold to the same font and size that they're using on their text. And if we scroll down even further, I want to take you all the way down to the notes. This is a long article. So when we scroll down at the very bottom we see the end notes and you know what, perhaps they're a little light and they're perhaps a little bit small, especially for my old eyes, but it's okay on the web, because you know what? I can zoom in and I can read whatever I need to read and then I can zoom back out when I'm done.
And on a long article like this, I think it's good to make the notes recede into the background. There are a lot of them and some of them are really long and if they didn't recede, they could look like they were still part of the main article. Even though the notes are a bit hard to read without zooming in, I think this was a good decision. It's a good visual break between the article and the notes. We're going to take a look at two more sites quickly. I'd like to show you Jessica Hische's site. She uses the bright orange script font as the main heading and then she also uses it within the text.
It does a great job of chunking the text. And when I scroll down, I notice that the space above the headings is bigger than the space below the headings, and that helps chunk the heading to the text below it. I'd also like to show you another page here, the Accolades page. Again, she is using the orange script font here for her main headings, but when she needs a lower heading, she's using the bold, black, all caps, similar to her links for her lower level headings.
She also does something here that we call a run-in side head. It's when a heading runs right into the text instead of sitting up above it. And this is the lowest level heading that we would usually use, but it has still got good contrast, even though it's in the same line of text. It's bold, it's all caps, and it's a little bit bigger than the text that it's the heading for. So this is excellent! You can also see that she uses subtle gray rule lines to separate sections on her page.
On A List Apart, the larger serif and a slightly brighter color has the highest level of hierarchy in the text. The author's name comes in second. It's all caps, bold, and a color. It combines to give them emphasis. We can click on an article and we can see that the title and author and the styles that they've been assigned continue on the article page. We can scroll down further and let's take a look at how they're using their subheadings.
Here we can see that their subheadings reference the title of the article, same font and size. I think they've just added a little bit of letter spacing and removed the color. Sometimes in these very long articles, let's keep going here, we also need to use a subhead within the subhead, sometimes we call those as sub-subhead and these reference the author. You can see that they are the caps, bold, and letters spaced, just like the author is.
So this really stands out and yet it relates to the system. And then we're just going to go back to the homepage, because I also wanted to point out that they too use subtle gray rule lines to help separate the content on their page. And I have to admit, the rule lines on both Jessica Hische and A List Apart sort of surprised me. I've visited both sites multiple times and I've never really noticed the rule lines or paid attention to them. They sort of flew under my radar until I sat down to analyze the chunking for this lesson.
I was always paying attention to the content, to what I was reading. So I think this means the rule lines work really well on both of these last two sites. They're so subtle, they recede into the background, they do their job, and they help chunk the pages. But they let the text, the content, really take center stage. So as you can see from analyzing the professional sites, hierarchy and chunking can affect the organization of text on the page and when information is set well we often don't notice it. We just read it.
Making good decisions about proximity and similarity will take you extra time, but it will be well worth the trouble. Your readers will be able to find what is important to them without getting frustrated by a difficult reading experience. Again, when you see a web site with good typography, feel free to analyze their design. How have they created hierarchy, how have they chunked their text. 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.