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).
So we have Calluna working in our site. We can see up here that it is on the server, because we are using a Typekit font, and it will only work on the server. But I want to take a moment and compare it to our original file, and this is from the exercise folder on the Desktop, because we don't have to have this one on our server; it's not using a Typekit font. And you'll notice that the type in Georgia looks a little bigger than the type in the Calluna version, and that's because, even though it's set at the exact same size, Calluna has a smaller x-height, so it's a little smaller and harder to read.
So we're going to go in and change some of the sizing. In the universal Selector, I'd like you to change that to 16 and 23. We'll save that, and then in order to see changes, you will need to reload your Calluna site onto your server, and we can refresh this, and now it's a little bit bigger. That's good, but now the h2, which is the headings for the columns of links down here -- Popular Searches, and What's Happening -- that feels a little bit small compared to the links.
And the h4, which is the article and event headings, they also feel a little bit small in comparison to the text, and they should have more presence on the page. So we're going to go back into the text editor, and we're going to bump those up by a pixel. So our h2s, and our h4s, and let's go ahead and save that, and Reload it. Back in Firefox, refresh, and now the headings look better.
They're stronger, which they need to be. But the h4, the article and event headings, now they feel a little bit too far away from the text below them, like they're slightly floating away. Do you see that little bit of space there, and again here under Library Used Book Sale? The bottom margin on this heading worked in Georgia, but it does not work with Calluna, so we need to change that. So I'll go back into the text editor and on the h4, let's change our bottom margin from a 4 to a 2. We'll Save that, reload it, refresh it, Command+R on Mac, and that looks good.
Now the h4 looks more like it belongs with the text underneath it, but there are just a couple of more changes. The quote looks a little bit too small to me compared to the rest of the text, and the Calluna italic is a little bit narrow, so it's a little hard to read. So we're going to bump that up in size. Let's do that to a 16 on 23, we'll save, we upload it, refresh, and now it looks better.
And then last, but not least, the main heading on the page, Springfield, Rhode Island, could be a bit bigger, and it's also feeling a little too tight between the lines, especially right next to the word space between Rhode and Island. Rhode begins to feel more like it belongs with Springfield instead of with Island. So let's go back into the text editor, and let's change this to a 32 on 36. I'm going to save it again, and refresh it again after we've reloaded it up on to our server, and that looks great.
Everything feels really well-balanced. So what we've been doing here is finding a good hierarchy and visual organization to the page. We've been making sure that headings have strong enough hierarchy, and that elements that belong together are spaced appropriately. Good hierarchy and visual chunking of information can help readers scan your Web pages more easily. It helps them find what they're looking for. If you're interested in learning more about hierarchy and chunking information, I go into it in much more depth in Typography for Web Designers.
But for now, what I'd like you to notice is that as soon as we changed the font, we had to look at, and sometimes fix other things in the typography; mostly size and spacing.
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.