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.
In this chapter we've learned a lot about shaping the typographic page. We've created a text frame, added an elegant background texture image, and thoughtfully set our links so they continue the traditional elegant theme of the page. Now it is a good time to ask, how do professional designers use traditional elements on their sites? Are any of the pages only traditional or do the sites tend to mix and match traditional and modernist elements? A List Apart has a pretty traditional layout.
Although the text itself is san serif, the logo and the main links and the titles of the articles are all in serif. In addition, they create subtle emphasis by using an italic and their numbers are old style. Finally they have a text frame. When you scroll down you can see that there is a large amount of space to the left and right. I Live Typography is also traditional. While the main links, the dates and the authors are san serif, the fact that they're set as caps makes them feel more elegant.
In addition, the letter spacing here on the dates and on the authors make them feel even more traditional. The text itself is serif. The main heading is a large san serif but the designer here mixes it up a bit. If we click into an article, we can see here the main heading is a serif and he also uses a very traditional ornament. The links are subtle when we roll over them. A very light color emerges.
It's very restful, contemplative. Finally a very large white margin above where the main content starts creates a text frame on the page. We've seen both of these sites before so I want to show you a new site. Jon Tangerine's site appears at first to be very traditional. He uses multiple serif fonts throughout the site. It's quite lovely. And here let's see I want to show you that his numbers are old style here. He also uses small caps and italics.
See here he is using small caps and italics and up here again small caps and italics and here the caps are sort of large spaced out. He uses that for headings and subheadings. And his text creates a block. It's a very centered block on the page even though the text itself is not centered, the text block is. And this is even stronger when we go into one of his articles. The main column of text is justified and you are not going to see this very often on the web.
It's a truly traditional typographic decision. As I scroll down, you can also see that his quotes are placed within the main body of the text. So that he is not using either the margins outside of the text. He is not using the space in an architectural way. It really feels like this beautiful, subtle, restful text frame. I am going to scroll back up. So this site feels like it has a very traditional approach, but it's actually contemporary.
He mixes in some modernist elements as well. He uses strong rule lines to frame the text. For instance this very thick rule line up here creates spans of space. And the multiple rule lines here separating the list on the right really emphasizes that area. It draws our eye to it. And then finally on the left here, the decision to place the headline here right aligned with a solid rule beneath it. Well, in a truly traditional site we'd expect the headline to be above the article in the text frame.
But here he has practically cantilevered the title off the image. He is creating a moment of tension and architectural space. It breaks the even, restful tone of the rest of the page. His links also break from the subtle elegant restful tone of the traditional page. Let's see here if I get-- there is one. When you roll over a link they turn this bright tangerine orange, which is a really fun reference to the name of the site. So as you can see from analyzing the professional sites, traditional and modernist typographic elements can be mixed and matched by today's typographer.
The traditional ideals of creating a lovely page for quiet contemplation and the modernist ideals of creating a simple clean layout intended to direct the reader to the most important information on the page, well, they don't have to be completely separated. There are benefits to both and both ideals conserve your readers. Again, when you see a web site with good typography, feel free to analyze their design. How have they laid out the page? Have they created rhythm and tension with a focal point, a strong vertical line, and have they paid attention to the margins and the padding in other white spaces? 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.