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 now that we've picked our font, Limelight, 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 in the head of the HTML document and I've set the font-family as usual. Let's take a look at it in the browser. And it's got a few problems. The most noticeable problem is that the heading is too big. The first line is breaking, so book is all by itself.
I don't think we should go any bigger with this font. The repetition of the vertical strokes and the vertical counter forms is very strong. It would start to feel more like shapes than letters and words. We could break the first line after the word Reading, but I think that's going to give us an almost diamond-shaped text block. Here let me show you. Back in the text editor, down in the HTML, I can add a br tag here.
I can save and refresh it in my browser and you can see how the headline is starting to look a little bit like a globe. The shape doesn't add any meaning to the layout and sort of detracts from the words themselves. I think it'd be better off removing the break and just making the heading smaller. So in the text editor, we'll remove that, up in the CSS, our h1. Let's go ahead and try making that a 65 instead of 75, and let's keep the line-height the way that it is.
Go ahead and save this, back in the browser and refresh, and that's starting to look much better. I think that the heading could be a little smaller, although it's hard to tell because we're using the Limelight in the text here which we need to get rid of. The very strong thick lines and then the very thin lines make this font very hard to read at a small size. So we need to get rid of the Limelight in our text. We can do that by copying and pasting the font-family from the universal selector down into our h1, and then let's remove limelight from the universal selector so all our text will be Georgia.
And then I thought about making our h1 a little bit smaller, so let's make that 63. Go ahead and save that, back in the browser and refresh, and now it looks better. I have to say after the very thick Wood Type that we were just working with, it feels a little bit boring. And Art Deco type, though based on geometric shapes and lines, is usually in a more decorative context like elaborate architecture. So let's take a look at some of the architecture from the time.
Even a more simple architecture will give us some inspiration. Here I'm looking at the American Stock Exchange building and I'm noticing these horizontal lines sort of above the windows. Maybe we can add a top border to our ad. So back in TextWrangler or whatever text editor you're using, let's go to the main_container and let's add a border-top. Let's make it 9 pixel and we'll make it double so that we have that extra border up there.
And let's go ahead and make it the same color as the rest of the border. Close that with our semicolon and we'll take a look. Refresh, and now it looks good. When adding an extra element, thinking about the historical context of the font can help. For example, adding the double border to the top of the container instead of adding it all the way around feels more architectural and it draws our eyes up and emphasizes the heading.
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.