Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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).
Now that we've covered some of the basics of choosing and using Web fonts, you probably have other questions like, where can I get more fonts? We've spent a lot of time working with two of the top sources for Web fonts. Let's look more closely at some others. FontShop is the studio that created some of the fonts we've been looking at in this course such as FF Meta Serif Web Pro and FF Meta Web Pro. Many of FontShop's fonts are available with the Personal Plan or Portfolio Plan on Typekit, but if you have a client who expects to use one of FontShop's fonts as part of their identity, it's probably in their best interests to purchase a license for a FontShop font directly from the source.
FontShop's licenses are for 500,000, 5 million or a 50 million page views per month. The original license is perpetual. So you or your client would only pay once to license the font unless monthly page views were to increase dramatically. Now I'm not crazy about FontShop's gallery. We can click over here and view some of the galleries of their Web fonts.
The gallery uses all screenshots instead of live HTML and I think it's important to see how fonts really work in context. But on the other hand, I have to say every FontShop font I've ever tested has performed beautifully. So this may not be an issue. They also aren't clear about how to use their fonts, though I expect it works similarly to Typekit system since they seemed to be keeping track of monthly page views. Fontdeck offers free access to up to 20 unique IP addresses.
So you can test fonts for free as long as the site isn't live. The 20 unique visitors will allow you to share the testing stage with others such as your design team, your client, et cetera. Once you want to license the font, licenses are yearly and per font. So this is different from what we've seen before. In this case, per font means per weight and style. So if you want to use multiple weights and styles you'll need to license each, but fees are reasonable.
Fonts start at $2.50 a year, though some I've looked at are as high as $17 a year. I love the idea of Fontdeck. It hosts the fonts for you and it allows you to add fonts to your repertoire without breaking the bank. It's also an affordable and convenient way for a client to subscribe to just the fonts they want on their site. Your client may not need more than a handful of fonts and might find it makes good financial sense to license with the provider like Fontdeck rather than to use a subscription like Typekit.
There are extra monthly fees if you have a really busy site, but if you're under a million page views a month, there's no extra monthly fees at all. Once you found fonts to use, the process to use them is very similar to Typekit's. Now Fontdeck has a gallery I really enjoy. They call it the Showcase and you can go and see the fonts actually in use. So this will link you to the websites and you'll be able to see them. Next, I'd like to talk about Fontspring. Fontspring is unique in this group.
We looked at them briefly during the course. You can license a font or a font family with a one-time fee. So this is more like print designers are used to. There are no page view limits and no domain limits. These fonts are self-hosted. So for example we can look down at their bestselling fonts here and one is Museo Slab and you may remember Museo Slab has multiple styles and weights.
If you wanted to have the right to use Museo Slab on a whole bunch of sites, you could purchase a single license to use the font. And your one-time payment would allow you to use the font on as many sites as you want to regardless of the number of page views. The only catch is they don't host the fonts for you. You'd need to use the @font-face rule and self-host the fonts on your server. You might also be wondering about something else besides where to get more fonts. You might be wondering where to learn more about Web typography in general.
And I want to show a couple of resources that I rely on. One is Smashing Magazine. They've recently started paying more attention to Web typography and it may sound simple, but I get them in my Facebook feed. They don't just promote their own articles, they scour the Web and share articles from other sources. So it can help you keep up-to-date on what people are writing about Web typography, which in turn will keep you up-to-date on what people are doing with Web typography. For example, they recently posted about this site which is a great simple blog about pairing fonts.
It's a curated list by someone who obviously has good type skills. The blog is a great resource, especially if you're just learning to choose fonts to pair together. I'll scroll down a couple of more so you can see the different styles that can be created with pairing or just simply using a font. This is a lovely resource. Another resource that I visit, not as frequently as I visit Smashing Magazine, but probably every couple of months, is Nice Web Type.
And he's got some great resources for a Web typographer. He is both a good typographer and he has his finger on the pulse of Web type technology. He has a resources section down here. In fact, his site is where I found out about my new favorite tool which is the WhatFont Tool. And this quickly tells you what fonts other people are using in their site. So if you like somebody else's fonts, you can see what they're using. It works quite simply.
Let's turn on our Bookmarks toolbar here and drag this to the Bookmark toolbar. If you click on it and go over any type, it will tell you what the font is. In addition, if you click, it will also tell you the font size, line height, and even the color that's being used. It's quite lovely. It saves a lot of time. These resources will change overtime, probably in the next 12 months.
In the meantime, I'd like to say congratulations. You've reached the end of this course. I've thoroughly enjoyed sharing my love of fonts, their history, their structure with you. Regardless of what new fonts, subscription services, and resources await us, keep looking carefully at the fonts you use. Notice their structure, their readability, whether their letters work in a system, their letter, and word spacing, and if they work cross-browser. Keeping an eye on these characteristics will help you choose and use Web fonts wisely.
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.