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).
We've already looked at six modern fonts, and haven't found one that meets our needs. Before we give up, I want to make one last attempt at finding a modern font, and we'll do that with Typekit. Typekit has a feature called Browse Lists up here along the top. The staff at Typekit have created these lists as a starting place, in case you're not sure what kind of font you're looking for. We're going to use it to see if they have other suggestions for a modern font.
As we scroll down, we can see they have a category here called Didones, which look decidedly modern, and we can see here also that LTC Bodoni 175 is in this category. Well, the first modern font was designed by Firmin Didot, and thus, modern fonts are sometimes referred as to Didones. So this is group of fonts that we're looking for. So let's go to that list and take a look. The first font is LTC Bodoni 175, which we've already looked at.
The second font, Ambroise STD, is a little too playful. Take a look at the top of that k there. It's beautiful, but not what we're looking for. Teimer Web, we have not used yet, and that could be a good choice. The thins are a little thicker, but it might actually help it hold up onscreen. Mittwoch is too playful, and so is Abril Display. It's a little more subtle here, but you can see on the terminal of the c and the a the playfulness of those terminals. Abril Fatface is too heavy; we don't want to use that.
And also, both of these, the Abril Display, and the Abril Fatface, have been designed for display. And what we know is that if a font was designed for display, or for use in headlines, the letter spacing is going to be a little bit tighter than we want for text, so we'll stay away from those. The last font is Kepler Std, which we've already look at. So there's one font that we can take a look at that we haven't used before, and that's the Teimer Web, so let's click through to that. We can see it's included in the Personal plan or higher, so not everyone has access to it, but at this point we don't have any other fonts to use, so let's see if this one will work for us.
Typekit offers a specimen sheet similar to the one that I use, and what you do is you make sure you choose the weight and style that you want to test. Our only options here are Light and Semi Bold; let's go with Light. We can open the expanded Web font specimen sheet, and take a look at what it would look like in text. I always find it a little bit hard to decide whether or not a font is really going to do what I want it to do when I look at it in this Web font specimen sheet, because the line height is a little bit tight for me.
That's why I take the time to use my own Web font sheets, but I can see that the letter spacing is good, and the word spacing is good, and there are no characters jumping out at me when I look at this text, so I know that it's worth looking at a little bit more closely. We'll close that up, and go back to the Teimer Web page. Before choosing whether to use a Web font, we need to know whether or not it will work cross-browser. A quickly way to do that in Typekit is to look at their browser Samples.
They have a number of screenshots that were taken on different operating systems and browsers. Now, I work on a Mac, and can test Mac screens more easily, so I always go straight for the Windows, and I click through to see how the font will look on different browsers. I'm keeping my eye on the 16 pixel type, because that's about the size we'll probably use, and I can see here in Internet Explorer 8 that the text breaks. The thin strokes break, so the e becomes two sides of the e, and the o also breaks into two different shapes; there's a left curve, and a right curve.
So unfortunately, we cannot use Teimer Web as one of one our fonts. I can keep trying, but I know I will have a problem with this font in text, so I'm not going to use it. But at least Typekit gave us another option to consider, and it gave us a quick way to look at whether the option would work for us. So we've looked at seven modern fonts, and none of them met our needs for this project. I'm not really surprised. Modern fonts require high resolution technology to show off their elegant, crisp characteristics.
We saw some beautifully designed fonts here, but just none of them worked for the screen. Modern fonts often work best in headlines; even in print. Part of being a good typographer is knowing when to try another solution. If a font doesn't work, it doesn't work, no matter how well-designed it is. Maybe we'll be able to use one of these modern fonts later in the course when we pair two fonts together. Until then, it's time to move on to the slab serifs.
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.