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.
Adding a second font from Google web fonts is a matter of cutting and pasting syntax. There are a couple of tricky things to think about, like where to paste the syntax and how to set the font stack. We will cover these as we go through the lesson. You will see our font family for the page is currently PT Sans. All text is the same size. The only difference is that heading is bold. We are going to change our main heading to our second font, Droid Serif. We'll also remove the bold and increase the size. Go to Google web fonts and find your second font, Droid Serif.
Command+F on a Mac, Droid Serif. We can click on it to choose to use the font. Use this font and we will decide what variants we need. Right now I'm pretty sure we only need regular, so let's just use that. Triple click to select all the syntax and you can copy and let's go to HTML page. In the HTML page you want to add the Google web font syntax as the first item under your head.
You will notice we already have another font here as well. That's fine. They will work, as long as they're both the first items up under your head tag. Let's save this. Now we need to add the syntax into the CSS so that it will work and we will get that syntax back at the Google web fonts site. We can triple click to select the syntax and again we can copy it and go back in to our text editor. I am going to go to my CSS file this time and I am going to go ahead and replace my h1.
The only thing that was there before was font-weight: bold which actually wasn't even necessary because the default for an h1 one is bold. Now I have added my font family should be Droid Serif. Again notice it's in quotation marks because there is a space between the names of the font and we have a font stack here. We have Arial and Serif. Droid Serif is a serif font and then we've built this font stack that uses in san serif font and then a serif font and if I wanted this to be a traditional page I would probably change Arial to Georgia and keep all three of my fonts looking serif.
But this page I wanted to be more clean and modern, so I am actually going to keep Arial as my second font choice and change my last one here to sans-serif. That way Droid Serif doesn't work, my other Google web font, PT Sans, probably won't work either if there is a problem and so this way they have the exact same font stack and I can expect the same fonts to come in. I think it will work best. And we go ahead and save this and if I remember correctly we are going to make this a little bit bigger too. So let's do that now. font-size: 21px.
That'll really help it stand out. And then I want to get rid of that bold which is the default for an h1. So I will do a font-weight: normal. Now safe this I am going to review it in my browser and refresh this and there it is. I want to double-check my font stack decision though because I'm sort of making decisions here when I am not really looking at it. So I am going to back into my CSS and purposely going to break my fonts here.
I am going to add a couple of big old capital Xs there for my font families. When I do this the browser won't know what font to use and it will revert back to my font stack. Okay I am going to go ahead and save this, go back to the browser, I am going to refresh it again, and you can see they both change to Arial and I think that's a good decision that they would have the same font if there was any problem with the font stack. The size change between The Elements of Typographic Style there, our h1 and all the p text.
I think that's enough to give us some hierarchy for now, so we are going to go ahead and keep it as is. I think that was a really good decision, but I still need to go back and make sure I undo those Xs. Whenever I'm sort of fooling around with my syntax here, even though I know that I just fixed it, I always save it and review it in my browser again anyway, just to double-check and there we go. Everything is working great. You now have two web fonts working together. You have created contrast but not too much and both fonts are linked to font files on the Google font server and they are working. If something goes wrong with the web fonts you have got solid font stacks in place so the fonts won't develop to odd fonts, you know like dingbats or something.
So everything is working really well.
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.