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).
All four versions of the Library Used Book Sale page are done. They each worked individually, but let's take a look at them as a system. First, I'd like to look through them quickly and just enjoy the variety of fonts we've used and the different approaches we've taken to highlight each kind of font. Now you won't be able to do this on your end if you're using the Trial Plan in Typekit. We used four Typekit fonts to make these pages and the Trial Plan only allows us to use two at a time.
I had to cheat and use my own Portfolio Plan to get all of these pages to work at the same time. So you might want to just sit back and watch. Here we have the Script, the Wood Type, the Art Deco, and the Futuristic. Not bad. But something caught my attention and I want to spend some time looking more closely at it. Let's go back and look through them again, but more slowly. The Script is Lobster Two, centered, which helps create a more traditional Humanist layout and that works well with the Script.
Lobster Two is paired with Open Sans. The Wood Type is Holtwood One. We created lines of varying size type in order to mimic an old broadside. This approach works well with the Wood Type font and Holtwood is paired with Museo Slab. The Art Deco font is Limelight. It's centered and paired with the top doubled border on the container to mimic the architectural details of a 1930s building.
This works well with an Art Deco font as it is both decorative and stylized. Limelight is paired with Nimbus Sans. The Futuristic font is Tenby Eight. It's left-aligned creates a less humanist and organic shape. It creates a square black of texts. This works with a Futuristic font. We use two weights so we could break up the sentence which was getting hard to read and the Tenby Eight is paired with Open Sans. Each page works well on its own.
But when I look at them quickly in a system, one of them stands out to me and it felt a little bit like it didn't quite belong. The Art Deco page feels smaller, less important than the others. The heading has less impact. The single page looks great. It looks like it's respectful to the font and the period, but it doesn't quite work as well in the system. Now we could approach this one of two ways and I think, quite honestly, either one would be fine.
First, we could remind ourselves that no one is going to see all of these ads at the same time, they are series. They will randomly pop-up on the main library's website and maybe on the city website for a week or two before the sale. It's not like anyone is going to see the Wood Type page next to the Art Deco page and think, wow, that Art Deco page looks kind of wimpy. If we think of the situation that way, the Art Deco page is fine just as it is and this would probably be the approach I would take, but not everyone would agree.
You yourself might be thinking, no, I want the Art Deco page to have more impact. I want it to feel more like the others in the system. So I took the liberty of creating another version of the ad. It's available with the Exercise Files for the course. I made some simple changes, but the heading definitely has more impact. The changes that I made to the Art Deco file are; I increased the size of the h1 to 70 pixels, I kept the line height the same so it set a little tighter, I removed most of the line breaks in the heading letting the text flow naturally in the space.
I did add a single line break after the word reading, because I really wanted to keep the words one book together. When I made these changes the heading looked similar to the others, but we had made some vertical spacing changes as well, and then this page looked a little different from the others. So I changed those back. I changed the main container top padding back to 30 and I changed the bottom margin on the author class back to 64. So now the vertical spacing on this page matches the other pages in the system.
So let's take a look at our pages in the system again. We have Script, Wood Type, Art Deco, and Futuristic. The Art Deco page looks more like the others. This would work very well. It doesn't undermine the integrity of the Art Deco page. It's a good solution. Now there's just one last thing I want to point out about this system and that's the text fonts. We're using three different text fonts in the system.
We're using Open Sans, Museo Slab, and Nimbus Sans. Some designers would say we can't do this. This is a system and we should pick a font for the text and use it throughout the whole system. In fact, I often follow that same rule. But here it makes sense to me to break away from such a systematic approach to the text. We set our headings and fonts that represent 200 years of typographic history. The fonts have completely different forms and each creates its own unique feeling.
I think choosing unique text fonts to pair with these display fonts is fine. In fact, I think it's good. It allows each page to work together as a whole connecting the different kinds of fonts to the different kinds of books listed across the bottom.
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.