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.
If you have picked a font that looks good both big and small and has a bold and an italic, your text can be set beautifully and only one font. But a second front adds variety to the page and gives us more options for hierarchy. The trick to choosing a second font is to find a balance between similarity and contrast. So far we've been working with the text set in Georgia, but let's look at choosing a second font for the heading. We are still working with our workhorse web-safe fonts, no font linking.
We are trying to create a traditional elegant look. So Impact, Comic Sans and Courier are out, and Times New Roman is too similar. If two fonts are too similar, they aren't a good choice to use together. They are like two shades of a color that don't quite match, but feel like they should. That leaves us with our Arial, Trebuchet, and Verdana. They have more contrast with the text. Now that we found the contrasting web fonts, we will look at Similarity. A good second font continues to work with the feeling you're trying to convey.
Trebuchet MS has some strong graphic shapes in a letters. These shapes will stand out in the larger headings and I don't think they match the elegant feeling we are trying to create. I like Trebuchet but not for this project. We will cross it off our list. A good second font usually has a similar internal structure to the first font. Look for similar X-height, a similar bold and similar apertures in the A, C and E. I'm going to go with Verdana for this project. If there is some similarity between the fonts they will work in harmony together.
Sometimes you want more contrast, more of a visual disruption between the fonts, and that's okay when it's appropriate, but now when we are striving for an elegant traditional look. But the san serif font is less elegant than the serif. We can make it feel more old and stable by setting it in all caps, but this is feels a little overpowering. Adding some letter spacing can lighten up a bit and makes the font feel more elegant. Let's look at the heading in context. It's a heading so bolding it would help and Verdana has a lovely bold.
But it's a bit heavy,. We can make the fonts smaller the bold call caps does stands out enough and we can still see it's a heading. Verdana and Georgia have enough contrast and enough similarity to work together as a pair. They were designed by the same type designer, Matthew Carter, and to have a similar internal structure. So it's not surprising they work so well together. With a little attention to case, size, letter-spacing and weight, we can make Verdana look elegant, even though it's a san serif font. In the next lesson we will add a new h1 styling to our text.
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.