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 decide where to place our links and decide how they should look. We're going to want to keep a traditional look to the page so we'll try and create a text frame. We will also try to create a vertical line and a focal point. We will start by picking a font. We are keeping a traditional elegant look. Let's work with the fonts we're already using. Our choices are Georgia, Georgia Italic, Georgia Bold, Georgia Caps, and Verdana Bold Caps.
Let's start with the ones I don't think will work. The first is Georgia Bold. The links would stand out too much and compete with our h2 section headers. Next is Georgia Caps. It has a lovely elegant feeling, which gives it potential, but I'm not crazy about how it references the Verdana Caps. It's not horrible, but not our best option. Verdana Bold Caps, like we've used for the h2s, is too strong for the links.
We want the h2s to stand out more than the links, so we won't use the Verdana Bold Caps. We can make them normal rate, but I personally think they still reference the h2 a bit too much. They wouldn't be a bad decision and someone else might choose them, but they're not my first choice. That leaves us with Georgia and Georgia Italic. The italic is already used to mean title throughout the page, even when used for the h3, and that's a pretty strong association.
Let's leave italics for the titles and just use Georgia Roman. We will keep our links the same size as the text. Color and placement will help the links stand out. When placing the list of links we've got a couple of options. At the top, to the left, and to the right. If we line them up along the top, the line of links gets really long. It's hard to tell because there's not much room here, but even if we move the main header down, the line of links doesn't work.
It's much longer than the line length of the text or the length of the h1. This isn't always a problem, but in this traditional layout it will make it harder to find a relationship between the elements. The composition starts to look like a funnel and the Chopin Script looks a little boxed in. I think it needs more space to really show off how lovely it is. Again, this is not a terrible option. It's just not my first choice. If we put them in a list to the left of the text, it could work.
It helps emphasize the strong vertical line with the aligned edge of the text. So we'll keep this one in mind. If we put the links in a list to the right of the text, it's not bad, but it creates an odd space and draws attention to the ragged edge of the text. So again, it's not my first choice. So let's put them on the left. Shall we align the links themselves left, right, or center? Aligning left will facilitate skimming the links.
Aligning right will further emphasize the vertical line. Aligning center will further emphasize the traditional feeling of the layout. Any of the three will work. They all improve the layout in their own way. I'm going to go with the center alignment. There isn't really a long list of links, so even though they're a little hard to skim, it would be okay in terms of readability. And while creating a strong vertical line, like we do with the align right approach, improves tension on the page, this is a traditional layout.
I'd rather go for the elegance of the center text. Now that we know where our links will live on the page, two other things to think about are what color to use for the links and what the links will look like when we interact with them. Since we aren't using any other color element in the layout, like a photo, we can just pick a color that feels right to us. I would like to use something that stands out but not too much. Red is a classic color used in typography, so it might be a good place to start, as long as it's not too bright.
For the hover, which is the change to the link when someone rolls over it, let's use Georgia Italic in the same color. The italic is beautiful and it would be nice to draw attention to it. We also need to think about how the links will look when they're activated or clicked on. Let's keep it simple and just slightly darken the red. It will be noticeable, but not jarring. Finally, we need to think about what the links should look like after they've been visited. Let's keep them the slightly darker red.
This darker red sits back from the brighter red links. They almost feel turned off like "Hey, don't pay as much attention to me, you've already visited me." At the same time, they work in the overall color palette. Since they're red, they still feel like links. Now that the links are set, I think they could use a little extra line height. It will help them read more like a list of links and will soften the red color and feel even more elegant. The only thing I'd change now that we've got our links in place is the placement of the main heading.
If it's centered over the text, it will feel more traditional. We've decided how the links should look, where they should live on the page, and how they should change as the reader interacts with them. We've created a strong vertical line and by keeping the links subtle, that is, not bold or big or bright, we've kept the h1 our main focal point, so we're ready to start putting the links on the page. We will do that in the next lesson.
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.