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).
As I test fonts looking for good ones to use, the same problems come up again and again. One is spacing. If spacing is too tight, the letters feel cramped together; if letters are too loose, they feel like they're floating away from each other. Another problem is inconsistent spacing. Inconsistent spacing creates an awkward texture on the text, making it more difficult to read. Letters that are too tight or too loose in words break the rhythm of the text.
Spacing that is too tight, too loose, or inconsistent can make it a little harder for people to read, and as always, if a text is too hard to read, people may choose to simply leave the page. Fonts with a narrow bowl, even if they're well designed, can be difficult to read in text. Fonts that are too light start to get lost on the screen. Fonts that are too heavy start to lose the spaces inside the letters. We need both strokes and spaces to easily recognize letters and improve readability on the screen.
I won't go into this in-depth, but if you'd like more information on how strokes and spaces affect readability, I cover it in my previous course, Typography for Web Designers. Another common problem with fonts is when one or more letters in a font is too unique. In text, the letter pops out and says, look at me, I'm different. Like here, the stress on the o and d are at an odd angle. The o looks like it's tipping over and the d's bowl looks too thin. Unique letters often look different from the other letters, and can distract the reader or impair legibility, either way, making the text a little harder to read.
A final common problem to look out for is punctuation that is not well-designed. For instance, if you're interested in the finer points of typography, and want to use curly quotes, and appropriate apostrophes, I recommend checking out a font's punctuation from the beginning. I'll be pointing out these problems throughout the course, as well as problems associated with specific styles of fonts. If you avoid fonts with these problems, you'll be well on your way to choosing a great Web font for you project.
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.