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).
When you're ready, you can build your font library by purchasing licenses to use fonts on your Web sites, but when you're first starting out, I recommend working with a service that provides a variety of fonts to choose from, rather than individually licensing fonts. In this course, we'll primarily use Google Web Fonts and Typekit. There are other sources for Web fonts out there, and I share some of them with you at the end of the course, but I recommend Google Web Fonts and Typekit for a couple of reasons. First is cost.
Google Web Fonts are free, and Typekit has a variety of plans available, one of which is a free trial plan. While I require my students to purchase the Portfolio plan, so they have more fonts to choose from, I have done my best to organize this course around fonts that are available either in Typekit's free trial plan, or via Google Web Fonts, so you're not required to purchase any plans for this course. The second reason why I recommend these two sources is access to a variety of fonts.
Having more fonts to choose from means you can experiment more. You can learn what kinds of fonts work for the sites you're designing, and which ones don't. Of course, having so many fonts doesn't mean that they're all appropriate for text. Many have designs that affect readability. Others don't offer a variety of styles and weights. Still others don't retain the readability cross-browser, but there are some gems waiting to be discovered, and more Web fonts being released every month. As you find new fonts, and consider using them, I recommend testing them thoroughly.
Of course, you need to find a testing process that works for you, but here's a little background on how I do it. I use a Web font specimen sheet that I've developed based on the sheet created by Tim Brown. My font specimen sheet uses text set in English, since most of the sites I design are set in English. It also lets me see how text looks at different sizes and line heights, what the bold, italic, and bold italic look like, and what it looks like set in all caps, spaced 1 pixel.
Whenever I'm interested in using a font, I make one of these sheets. I keep them in a folder, and can refer to them later for other projects. If you're interested in making your own Web font specimen sheet, Tim Brown, who by the way, is the type manager for Typekit, has posted his Web font specimen sheet online here at webfontspecimen.com. It's shared via a Creative Commons license. Once I've created a font sheet, and think I'm interested in using the font, I'll test it via crossbrowsertesting.com.
I work on a Mac, so it's important I make sure fonts look as good on other operating systems and browsers as they do on my own system. I usually take screenshots of what the fonts look like on various browsers. I look at so many fonts, and testing them takes a lot of time, so I try to keep records of what fonts work best for me. It saves me time in the long run. I'll share some of my screenshots with you throughout the course when I talk about how fonts hold up cross-browser. And there's one last reason why I recommend Google Web Fonts and Typekit.
They take care of a lot of the technical aspects of working with Web type, so you don't have to. You do need to know how to do some basic HTML and CSS to get them to work, especially on Internet Explorer, but it's easier than doing all of the @font-face syntax from scratch, although you will use some @font-face syntax at least once in this course. It's important to know how to do it for when you're ready to incorporate Web fonts that are not offered by Google Web Fonts or Typekit.
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.