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 Tenby Eight 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. I have provided an exercise file which we're looking at here in the text editor. It's called tenby_eight_open_sans_tk_book_sale.html. I've already added Open Sans regular and bold into my Typekit.
So the embed code now links my page to both fonts. You need to add Open Sans regular and bold to your kit, publish it, and put your embed code in this document so it will work on your system. When you're done, meet me back here. Now that your Typekit and embed code are all set, let's add Open Sans to the universal selector. With Typekit we use all lowercase with a hyphen, and I've just added it to the font family.
Let's go ahead and change our font weight to 400 and the h2 font weight, we will change to 700. Let's save that and we need to upload it to our servers. Let's view this new file in our browsers and we can see that the Open Sans is now in our file. But I think that the Open Sans is a little bit too big here in the text. I like it at the bigger size in the h2, but the text looks a little bit big.
So back in the Text Editor, let's set our universal selector to 17 and 27. We'll bring it down just a hair. Re-upload it to the server and refresh it in the browser. It's a subtle change, but I think it helps the h2 pop-out a bit more. Now the only problem I'm having is there's too much space between the author and the main heading. We haven't had this problem before. I don't know if it's because our main heading is in all caps so there's no descenders, or it could be because Tenby Eight light is very light so the author's name stands out more.
It might just be that Tenby Eight has a little bit more built-in space around it, but we need to get rid of that space. So back in the text editor, we have the author class here. Let's make the margin top 0, save that, re-upload it to the server, and refresh it, and that looks better. But I still don't know if it's quite right. There's something about the strong left line here on the main heading and then how everything else is centered. I'm not sure if that's the best choice for this page.
So I went ahead and tested it so I could just show you some of our options. I took some screenshots. Here is one where the author's name is just left-aligned but that leaves a big gap of space here, and I don't care for that. I tried moving everything to the left which, it's not bad, but again, we're having a problem with the sort of awkward space shape here on the right. So then I tried one where I left- aligned the author and then also the tagline about the kind of books and then I moved the information about the book sale into that space a bit and it gives us some nice tension and some good movement around the page.
If this page were the only one of its kind, if it wasn't part of a system, I'd probably use a layout more like this one. It feels a little bit better, more appropriate with the very square letter forms and with the shape that the dark bold type is creating up there. It sort of gets mimicked down here, but not exactly, so it's not boring. But the truth is, is that this page is part of a system and all of the other ads or pages in the system in the series are using the centered alignment.
So I think we're going to stick with that even though it may be not the most perfect alignment to use with this font. It still looks fine centered and I think in the end, we'll be happier with it in the system. So we'll call this one done.
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.