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.
Looking at our sans serif bibliography, it's really coming together. It has good readable type, good hierarchy, and good chunking. But I'd like to add something to it. I'd like to emphasize the word Resources in the heading. You need the files biblio_sans_ h1emphasis.html and biblio_sans_h1emphasis.css from the Exercise folder. I'll open up the HTML file in the browser to see what we're working with. I'm thinking of making the word Resources stand out by setting it in PT Sans Bold.
There are three reasons why I'd like to do this. One, it will emphasize the word Resources and that's what this page is about. Two, the visual divide in the h1 will play off the vertical line created by the two columns. And three, it will show off both of the two lovely fonts we've chosen, two fonts that work really well together. So let's do it. We're going to add the emphasis in the main heading and we are going to do it by creating a class and applying it to the word Resources with a span tag, just like we did when we italicized the Resource titles in the text.
So open up our CSS file and we're going to create a new class. I'm going to put the class here under the h1, because I'm using the class with the h1. I like to try to keep my elements together. I am going to call it .resources. Because it's a class, we always start with a dot, and we need our curly brackets. And we want to change the font and the weight. So we're going to add the syntax font- family:'PT Sans', arial, sans-serif, and we're going to give it a font-weight of bold.
We can save this and now we need to actually apply the class in the HTML. We can find the word Resources down here and because we're just going to be applying it to one word, we'll need to use the span tag. span class, called resources, and then we'll end our span here after the word and we should be set. Let's save this and view it in our browser. Great! We can see that the word Resources came up in PT Sans Bold, but if you look carefully, you'll also see that the word Resources looks a little bit smaller than the word Typography, even though they're the exact same size.
That's because PT Sans has a slightly smaller x-height than Droid Serif. So what we're going to need to is go in and make the class that we're using for the word Resources a little bit bigger. Our h1 is 4em and we want our class to be just a little bit bigger, so we're going to make it a font size of 4.1em. Let's save that and review it in our browser.
Whoa, and what the heck happened? Well, if you're familiar with using ems, you're expected this to happen. What happened is that the 4.1ems that we set our class at, it's not referencing the base font-size. What it's referencing is that h1 size. So instead of being a little bit bigger than the h1, it is 4.1 times the size of the h1. So we need to go back in and change that. What we actually want is for our resources to be just a little bit bigger than this.
So let's make it 1.1em, so it will be about 1.1 times the size of our font-size for our h1. And we'll save that and review it, and that is what we're looking for. It's not an absolute perfect match. I think the PT Sans might be looking a little bit bigger, but it's pretty darn close. And you know what, in web design and in web typography, sometimes pretty darn close is what we have to strive for, because we can't use a unit smaller than 1 pixel.
And I think it looks really good actually. The word Resources pops-out and using the PT Sans Bold helps to visually connect the main heading to the text a little bit more.
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.