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 lesson, we're going to look at using two columns to create hierarchy in our sans serif bibliography. Along the way, we're going to pay attention to proximity so our sections remained visually chunked for our readers. Our goals are to create three levels of hierarchy, because we've got the main heading, the section headings, and the titles of the resources. We'll also retain legibility and maintain the clean modern feeling we've been creating in the text. Since we want to keep the layout clean, we won't be adding another font.
We'll try to keep it simple and see what we can do with the two fonts we picked to work together earlier in the course. Inspired by the work we did on the serif bibliography, I'm going to jump in and use our second font right away. The Droid Serif is used for the h3, our resource titles, and I've paired it with PT Sans Bold for the section header. I'm not crazy about this, because there are more titles than section headers. And using the Droid Serif so much might make the page feel less simple, because of the serifs.
I've also used the Droid Serif for the main heading, so I'm not only using it in one place. While the display script font worked best on its own for the H1 in our serif version, sometimes a regular font can look out of place if it's only used for one thing in a layout. Using Droid Serif for the heading could be increasing the visual complexity and texture on the page though. There is a lot of serif type here. But when I change the h1 to PT Sans, the Droid Serif does look out of place among the sans-serif type.
We'll go back to Droid Serif for the h1 and swap our h2's and 3's. That way the serif will only be for the main heading and the section headings. This works. There will be a lot less serifs on the page. The PT Sans Bold is a great font, but it's strong. I'd like to see the section heads maybe have a little stronger hierarchy than the titles, but I don't necessarily want it bigger. Maybe it's not about making the section head stronger. Maybe the titles are too strong and need to be pulled back.
Returning the section heads to the smaller font size, I've made the titles regular weight and slightly bigger so they stand out from the description text. Now the section heads and titles, they look too much alike. We're losing contrast. I can italicize for titles. This gives us more contrast between the section heads and the titles, but it's still not working for me. First, the section head doesn't feel strong enough to say, "Hey, I'm a whole new section" and second, I love the italic for its humanist qualities, but using it so much on the page, well, it just makes the page feel sort of fancier than I want.
We're looking for clean and simple, so italics they're not going to work, because they're not simple. So I'm going to go back to my favorite version so far. I still want the section heads to have more emphasis and we've tried a variety of solutions and nothing seems to have worked yet. But we do have one more trick up our sleeves and that's space. If we move the section head over to the side it's suddenly stands out quite a bit. Its placement is unique and it draws our attention. In fact, we can even make it a bit smaller, and this is great. But when working with two columns to create hierarchy we have to pay extra attention to proximity.
The space between the section head and title here is too close. It looks like it only belongs to the one title. In fact, it almost starts to read as Choosing and The Elements of Typographic Style. If the space between them is too wide they don't feel like they belong together at all,. The section head just floats away. The trick is defining a good horizontal spacing, not too far and not too close. We can further emphasize that all the titles belong to the section by adding a subtle horizontal rule for the section heading.
You'll notice I added the rule line last. I always try to get the layout to work using type and space first, then the rule will be the perfect addition to the system. If you add the rule line first, it can act like a band-aid on a deep cut and it doesn't really solve any of the hierarchy or spacing problems. It just covers them up. Okay, that's it. We've developed our three levels of hierarchy for the sans serif version of the bibliography.
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.