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 lesson we will be choosing a second font from Google web fonts for our heading. Our text is set in PT Sans. And there are a lot of fonts to choose from at Google web fonts. And many won't be appropriate for our project. The trick is choosing a second front that matches the feeling you are trying to communicate. In this case a modern clean look. We also need to make sure the two fonts work together. We need to find a balance between similarity and contrast. If fonts look too different from each other, they'll feel like they don't belong together.
Through the magic of editing I have chosen a couple of fonts to consider with PT Sans. Dancing Script is too elegant with its thick and thin brushstrokes. If we were interested in using a script, Damion might be a better choice. It has monoline strokes that are similar to monoline strokes in PT Sans, but I don't think we want a script for this project. Syncopate is beautiful, but it's a little funk. It draws attention to itself. I want something that doesn't have so much personality for our clean modern page.
Michroma is fine, but again it has a bit too much personality for this project. Ubuntu is still a favorite so I have to try it, but it doesn't work. The U and N still draw too much attention to themselves here. And if I can overlook that, the rest of the font is still too similar to PT Sans. I might as well work with only one font. If I'm looking for something less similar to PT Sans I might try Yanone kaffeesatz. It's a good display font, but again it has a lot of personality.
May be I should try a serif font, since all the san serifs font seem to be too different or too similar for my taste. Here is Cardo. It feels too traditional though, too different from PT Sans, so it won't work for this project. Let's try a different serif font, Droid Serif. This could work. We have got the contrast, but now with some similarities. The internal structure of the letters are similar to PT Sans even though it's a serif. Droid Serif has a large x-height, a somewhat near our bold, and feels more monoline than Cardo did.
The serifs are more blocky, not so traditional feeling. I do want to try one more serif, Arvo. It's another good choice. [00:02:224.91] It's a slab-serif, so it doesn't feel to traditional and the round O makes it feel sort of geometric and clean. Sometimes there are two good choices and it's a tough call. Neither one is really wrong, but I'm going to go with Droid Serif because of the internal structure. I think Droid Serif is the best choice to pair with a PT Sans. It has contrast but not too much. It's a serif but not too traditional feeling.
I can continue to communicate clean and modern while adding contrast and texture to the page.
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.