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).
Now that we've picked our Wood Type font, Holtwood One Small Caps, let's make it work. I've provided an exercise file which we're looking at here. I've already added the code from Google Web Fonts to the head of the HTML document and I've set up a font family as usual. Let's take a look at it in the browser right- click, and there are a couple of problems. First, the heading is too big. We'll get back to that in a second, but equally disturbing to me is that all the text is now set in the Holtwood One.
And it's too bold and square to really work as a text font. So let's go ahead and change that. It will help us to focus on our headline. Back in the text editor let's fix this by copying our font family out of the universal selector and pasting it into the h1, and let's remove Holtwood One from our universal selector. Save that, back in the browser, and Refresh, I'm using a Command+R, and that's better.
Now that the text is set we can really focus on that heading. So there are a couple of things that aren't quite working with this heading. Most noticeable is that it's too big. It's slamming into the sides of the page and the first line is breaking. So book is all by itself. There are a couple of more subtle problems as well. First, I'm not crazy about the centered alignment. Centering type is very traditional and this font is clunky. I don't think it's going to work as well in a centered alignment as the Script font did.
I think we could so something to take advantage of the square forms in the letters. I'm thinking we should set it up so that the type in each line is a different size. We can set it so that the words in each row take up the entire space. We can make it feel more like an old broadside and then this will also create a square section of type which may mix the thick squared edges of the font. There other thing slightly bothering me, because this is a small caps font, the first R is very slightly larger than the rest of the other letters and this feels a little traditional to me.
I'd rather that R was the same size as the rest of the letters. So we're going to make sure all the letters are lowercase. Let's go make all of these changes and let's set up our heading here which is currently set in h1 with a couple of breaks. We are going to get rid of these breaks and let's wrap each individual line in its own h1. We'll do reading, and one book, and then we'll do is like eating one and potato chip.
Of course, this would work as is, but I am just going to move it around a little so I can see it a little bit better. Then we're going to need to set each line as its own class so that we can make each line look a little bit different. We'll keep the h1 for reading the same and one book, let's make that class="book" and make this one class="eating" and class ="chip". Now back up in the CSS we need to make a couple of classes for book class I've already tested these sizes, so I know what will work.
Let's do a font size. So let's go ahead and make this an h1 book. Let's do this 94 pixels with a line height of 104 and close it. I missed the semicolon there and let's do an h1 for eating and the font-size of 50, and a line-height of 60, and then we'll do the h1, chip.
So font-size of 68 and a line-height of 78. Up here in our original h1 let's go ahead and change this to 108 on 108. I had originally, when I was testing this, set it with an additional 10 pixels on the line height similar to how we did down here, but it made it a little bit loose so we're going to take that out. While we're here, let's add a text transform to a lowercase to get rid of that capital R. Go ahead and save this, and then back in the browser let's take a look.
That looks good. The heading is still set, text aligned centered. We didn't change that, but it feels solid and square. It also has a great texture from the different sizes we used for each line. When using this approach, make sure you vary the number of characters per line. It doesn't work if there's not enough contrast between font sizes.
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.