Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course focuses on the theories behind web fonts: what makes a good font, why different fonts look the way they do, and how fonts affect the look of a web page. Author Laura Franz covers common tasks, including downloading a font from an online source such as Typekit or Font Squirrel, implementing the font in HTML and CSS, and changing the size and line-height to improve the readability of text. The course also covers different periods of type design and explores the history behind handwritten fonts, text fonts (used for large amounts of text), and display fonts (used for headlines).
We have our main heading set as Limelight and we've picked Nimbus Sans as our text font. Right now the text is still showing up in Georgia, so we need to fix that. Let's look at it in a text editor. Mine is already open in TextWrangler. I've added the Typekit code for Nimbus Sans. You need to add Nimbus Sans Regular and Bold to your kit, publish it and add your embed code to the document for it to work on your system.
Again, since we're using both a Google Web Font and the Typekit font, paste the Typekit code after the Google code. Now that the codes are both in place, we need to add Nimbus Sans to our font family here in the universal selector. It's nimbus-sans, all lowercase and save that and let's change our font weights as well. The universal selector will change to 400 and the h2 we will change to 700. Save that and since we're using a Typekit font, we'll need to put it on our servers.
Let's take a look at it in the browser. We have to go to our servers here, mine is goodwebfonts.com. Taking a look at the page with Nimbus Sans the type looks good, except the h2 might feel a little bit small to me. So back in the CSS, let's pump the h2 up just one pixel to 20, save that, re-upload it to the server and back in the browser we can refresh it, and I think the hierarchy looks better.
Now the only problem that I'm having is that the heading feels a little bit too separate from the text underneath. We haven't had this problem so far but I wonder if it's because we have this very strong element at the top. The top of the page just feels sort of separate from the bottom of the page. So we're going to try and fix that, I'm thinking may be we need to add a little bit of space here so to pull our heading down. So back in the CSS, let's go down to the main container and we're going to add a little bit of padding at the top, it was at 30, let's make it 40.
Save that, re-upload it to the server, back in the browser we can refresh it and that looks a little bit better. It's still not quite right, I'm wondering if we need to take may be a little bit of space out between the heading and the text. So back in the CSS and go back to the class for the author, the bottom margin is currently 64, let's make that 54. Reload it to the server, back in the browser and I'll refresh it and I think that looks better.
This version seems to have been all about space. Both the generous letter spacing in Nimbus Sans, and taking the time to adjust the vertical space on the page, it really helped us pull the page together.
There are currently no FAQs about Choosing and Using Web Fonts.
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.