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).
Looking at the refined Crimson Text version of our Web page, it looks like we're done, but we're not. What you can't tell by looking at my screen, because I'm on a Mac using Firefox, is that the way Google Web Fonts tells you to use their system doesn't work correctly on Internet Explorer 7 or 8. Take a look at this screenshot of the same page, viewed on Windows 7, Internet Explorer 8. Look at the italics in the quote about libraries. They are fake.
If you're new to looking at fonts, you may not realize they are fake, but the A and E give it away immediately. Most true italics have a single-decker A, not the double-decker one like we can see here, and Crimson Text E is softer and rounder. The fake italics has neither of these things. It uses the regular version of the text, and just slants it over. You can also see the difference in the Y and F very clearly. Let's toggle back to our Web page.
There is the F with the tail, and the Y with the curved stroke, and the fake italic has neither of these things. There are two reasons why fake italics aren't good; one is aesthetic. If we just spent ten minutes getting the italics to look good, it's frustrating that people using Internet Explorer 7 and 8 can't see them. The second reason, and perhaps more importantly, is legibility. Now, it doesn't matter quite as much with Crimson, because quite frankly, Crimson's italics are pretty narrow, and not that easy as italics to read.
But later, as we move out of the older style fonts, and into more contemporary fonts, you'll see some italics are actually quite open, and very easy to read. When those italics convert to the fake italic, legibility is compromised. The change in the italics is more immediately recognizable, but the bold is fake too. Internet Explorer just makes the font look bold by slightly stretching the vertical strokes, so they are a bit lighter. The semi-bold italic sentence about the Bay Road businesses has both a fake bold and a fake italic.
It has been both stretched and slanted, and the results are not delightful. So why does this happen? We'll open the file from the last lesson, and let's look at the code. See how the Google code surfs up all four versions of Crimson Text in the same line of code? Internet Explorer 7 and 8 only recognize one font surfed up; the first one. All the other weights and styles are then faked by the browser. Fixing this is relatively easy. First, immediately following the current code, let's put in a return here, and we're going to add the following conditional comment.
We're going to say a conditional comment of if, Internet Explorer, and then end if. Then what we're going to do is go back to Google Web Fonts, and get the code for each individual weight and style. So now we have normal 400 selected, copy; back in our document, I'll paste that in. Toggle back to Google Web Fonts, choose the Normal 400 italic, copy that, paste it, choose just the semi-bold, copy that, and paste it into my document.
And now the semi-bold italic, select that, copy it, toggle back, and paste it, and then we'll save this. Go back into the browser and refresh this, and if you're not using Internet Explorer, you didn't see anything change, but it's now working in both Internet Explorer 7 and 8. I'll show you a screenshot of the fixed version. And this is what you'd see if you were using Internet Explorer 7 and 8.
The italic is fixed, as is the bold. Unfortunately, we also see that there is a bit of a spacing problem in the Crimson italic on Internet Explorer 7 and 8. Now, you might wonder why I had you use a conditional comment, and only serve the individual weights and fonts for Internet Explorer. Wouldn't that approach work in all other browsers? Not necessarily. If you didn't use the conditional comment, the fonts wouldn't work properly in Opera. When faced with multiple weights and styles of a single font, Opera always uses the last weight and style of the font pulled in from Google.
I can show you what that would look like as well. So if we didn't use the conditional comment, Opera would have pulled in the last weight and style, which was the semi-bold italic, and Opera would have used it for all the text on the page. In doing it the way that we did, Opera also works correctly. So now our old style font works properly across every srowser that supports Web fonts. Even though Google Web fonts takes care of most of the technological aspects of using Web fonts, it's still good to keep track of how things are working cross-browser, and be willing to make changes to how you use their service.
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.