Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 Lobster Two Italic and we've picked Open Sans as our text font. Right now the text is still set in Georgia, so we need to fix that. We're looking at lobster2_open_sans_book_sale.html, which I've provided in the Exercise Files. Let's look at it in the text editor. The last time we used Open Sans, we used it from Typekit, but it's also available from Google Web Fonts. Since Lobster Two is on Google Web Fonts, it's better to just get both fonts from the same place.
I've already added the Google Web Fonts code for Open Sans, and I've already added the conditional comment for Open Sans so Internet Explorer will recognize both weights. Now we've just got to add the font-family to a universal selector. So let's add Open Sans here and we need it to match, up here in our code from Google, we can see that it should be a capital OPEN and then that plus means we should use a space and then a capital S and so let's do capital "Open Sans" and end our quotation marks.
And since we're switching this to a Sans Serif font, let's go ahead and change our font stack to Verdana and Sans Serif. And then let's see down on our h2, we should make sure that our font weight is 700, which is good because it's bold, excellent. Let's take a look at this in our browser. We can refresh. Looking at the page with Open Sans, I think the text is a little big now. That's not surprising since Open Sans has a bigger x-height in Georgia.
Let's make it a little smaller so the heading pops out even more. Go back over into our text editor and let's change our font size on a universal selector down to 16 and the line height down to 26. On our h2 we can change that to 17 as well, bring that down by 2 pixels. Save that, back in the browser, refresh and that looks better. Although I think I would like the headline about the Friends of the Library Used Book Sale to pop out a little bit more, we don't necessarily need it but I think if it was a little bigger and darker it would look really nice with the thick strokes of the Lobster Two Italic.
So let's go back into our TextWrangler, or whatever text editor you're using, x used we'll make that one pixel bigger, and let's refresh, and that looks good. Like I said, the heading didn't necessarily need a little extra push to make it legible, but I think the larger size just opens up the counter forms and the line of text begins to visually relate to the heavy strokes in the main heading. This looks good.
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.