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).
So now that we've picked our font, Tenby Eight, let's make it work. I've provided an Exercise File, which we're looking at called tenby_eight_tk_book_sale.html. I've already added the Typekit Code for Tenby Eight in the head of the document. You need to add both Tenby Eight Light and Regular to your kit, Publish it and add your Embed Code to the document so it will work on your system.
When you're done meet me back here. Now that the Embed code is in place, let's apply the font-family. We'll add Tenby Eight to the h1. Since we know from experience it won't work in the text, I'll copy the font-family up out of the universal selector and we can add it here, alllowercase, and we have our font stack. We'll also need to add a font-weight here, we'll use 700.
Tenby Eight comes in two weights, Light and Regular. And the Regular weight is actually set at 700 on Typekit. We're going to use that one because it's the one we are looking at whenwe decided to use this font. Last thing we're going to do, we know we want to use this as all caps, so let's go ahead and add a text-transform, uppercase, and this should be a good start for us. We'll Save this document and we need to upload to it to our servers because it does use a Typekit font, and then preview it in our browser.
Mine is on goodwebfonts.com in my lynda folder and that looks great, except we are having a problem. We can see here that it's too big for the size of the page and both Book and Chip are getting bumped down to the next line. I don't think we should go much smaller with this font. There's something really nice about the large square forms, so we're probably not going to get Book back up on the first line.
And at the same time while I'm looking at this, I don't think this heading should be centered. Centering type is very traditional and it creates this sort of organic forms on the sides of the heading. And this is a square form, a Futuristic font. I'm thinking the structure would be better if it had a straight edge. So I'm not exactly sure where we're going with this headline, but I think if we start by fixing the problems that we already see, that is get rid of the line breaks and the heading and left align the type, we'll at least be on our way to finding a solution.
So let's go back into the text editor and we'll add a text-align: left to the h1, get rid of the center there, and then we'll go down and let's get rid of all the extra breaks in the heading, in the HTML, save that, re-upload it to our server, and let's review it in our browser. That's looking pretty good. I think though that we need to obviously move it away from the edge here, and I think we can make it a little bigger in size.
So back into our text editor, go to our h1. Let's just try making this 80 and 90, and let's move it over a little bit. We'll add a little padding-left, maybe about 20 pixels, save that, re-upload it to our server and refresh it. That looks much better. That looks really good. I like the crisp top edge and the crisp left edge on the display face.
It frames the heading and it really emphasizes the square forms of the letters. But there are two things that I'm not crazy about. I'm hoping we can fix them. I think we can. First, I don't like how the E repeats itself three times in a row here. And second, I find the font a little overwhelming. It's hard for me to read the whole sentence because it starts to become a series of shapes. Now, one way we could fix this is to just make the type smaller again. The words would rearrange themselves, so the repeating E would be fixed and the letters would start feeling more like letters and less like big shapes sitting on the page.
But on the other hand, it's the big futuristic shapes that also appeal to me. So what we're going to try to do is visually break the sentence up a bit by incorporating another weight into the headline. Back in our Text Editor, let's make a class and call it lighter, .lighter. I'm going to copy the first four lines of my h1 up here. Highlight and copy it. I use the Cmd+C in the Mac, and then Paste it, and I can close this up.
I'm going to change the font-weight to 300. Now, often with a class, you only change the thing you want to change which here was our weight, but the font-family, font-size, and line-height are all set in the universal selector. So we need to set them here as well, so they don't revert back to the universal selector settings. We'll go ahead and Save this, and we need to apply this class down in the HTML. So right in front of the word is let's add a span.
We'll span the class lighter and right at the end here, we will end it. Go ahead and save this, reload it, and refresh it, and that looks good. Breaking the sentence up, chunked it, so the heading is easier to read. The darker type creates this strong shape. It sort of pulls our eye up into the left and that helps hide the repeating Es at the ends of the lines.
It also helps us to break the sentence up and it makes it a little bit easier to read. It's not really easy to read because of the font, but that's okay. It's a little bit easier than it was. When working with the heading we don't only have size and alignment to work with, we've got weights and styles too. And sometimes, slightly breaking up the heading can work to our advantage.
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.