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 we're going to pull back and look at the big picture. Let's talk about general categories of fonts. There are many ways to classify typefaces, and that none of them are perfect. Typographers and type designers themselves can't agree on one way to classify fonts. This is because, unlike Biology, type design is an art, not a science, and everyone has their own way of thinking about fonts. But there is a traditional way of classifying fonts; it's called the five families of type.
In the top row, we have examples of old style, transitional, and modern fonts. Next, we have slab serif fonts, and finally, sans serif fonts. The five families of type is a great place to start, but it's an imperfect system. One problem is that it classifies fonts in terms of historical shifts in font design, but the fonts originally designed during these historical periods only span from the late 15th century to the mid 20th century, so the system leaves out the earliest approaches to type design, as well as type designed after the mid 1900s, which means it leaves out the variety of fonts designed since the advent of the personal computer.
It's also imperfect because it's a bit broad. For example, if we consider the term sans serif it groups all sans serif fonts together, but sans serif text fonts don't all look alike. Finally, using fonts that mimic the texture of personal handwritten text has become popular as more information is provided digitally, so we're starting to need a category for fonts that look more like handwriting. In this course, I'm going to expand on the five families of type.
We'll start by adding Venetian, which is a type style earlier than old style fonts. Venetian fonts aren't used as much in page layout, and actually don't work well on the Web yet, due to how different browsers render type, but browsers are constantly changing, and there are a few good Venetian fonts out there, so we'll cover them in this course. A couple of years down the line, there may be a great option for Web text. Then, we'll keep the old style, transitional, modern, and slab serif categories, and we'll add a category of fonts to act to sort of a catch-all for the fonts that don't fit neatly elsewhere.
We'll call them other serif fonts. Typographers don't have a common word for these fonts; we just know they are out there. We'll keep the sans serif category which can also be called transitional sans serif. But we'll expand it, adding geometric sans and humanist sans categories. Finally, we'll add a category of fonts called handwriting. Now that I've told you all the reasons why classification is imperfect, I want to be clear that classifying fonts is important for three reasons.
One, it helps us talk about fonts. Even if we don't agree on a perfect classification system, most typographers and font designers are familiar with the five families of type. We use it like a kind of shorthand. You'll see where it's like old style and transitional pop up in descriptions of fonts. You can also use these words to describe to someone else the kind of font you're looking for. Two, it trains our eyes to look closely at fonts. As James Craig says in Designing with Type, there is no better way to train the eye than to study the subtle changes in typefaces over the centuries.
Three, learning about the five families of type focuses on type history, which in turn focuses on the shifts and materials and technology. As you'll see, this helps us understand why fonts look the way they do, and why they feel old, or elegant, or casual. The five families of type, even with my additions, is fairly general and easy to remember. There are far more complex ways to classify fonts. One is the Panose system, which assigns fonts a 10-digit number based solely on their visual characteristics.
It's a complex system. I personally do not teach it, or use it myself, but if you're interested in a more specific classification system, you might enjoy learning more about it on your own. Looking at this modified five families of type, what we've got is a list of categories for text fonts, that is, fonts that theoretically can be used in text, so you'll find some of them don't work as well onscreen as others. We'll use this list as our guide as we move through the chapters on text fonts in this course.
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.