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).
Up until now, the development of fonts has been pretty straightforward. The earliest fonts reflected forms created by writing with pen and ink. Later fonts were crisper and more stylized. Finally, slab serif fonts were some of the first fonts created for marketing purposes, and were meant to catch the eye, rather than create an enjoyable reading experience. Now we're going to look at other serif fonts; fonts that don't easily fall into any of the previous categories.
In order to this, we're going to skip about a 150 years, and dozens of styles of font design. Some, like sans serif, wood type, and art deco fonts we'll cover later in the course. The rest, in our quest for readable fonts appropriate for extended text on the Web, we're going to let go. If you're interested in the variety of fonts designed from the mid 1800s to the late 1900s, I highly recommend A Typographic Workbook: A Primer to History, Techniques, and Artistry.
In the late 1980s, with the advent of the personal computer, font design exploded. Anyone with the right software, and some knowledge of how letters work in a system could create a typeface. Some font designers pushed against the clean, crisp typography made possible by design software, and purposely designed fonts that were damaged or defective. Some font designers pushed against historic approaches to font design, and dismantled traditional forms, slicing and dicing, and recombining letter parts.
Other font designers dedicated their time and considerable talents to bringing historic fonts, like Jensen, Caslon, and others we've seen throughout the course into the digital era. Still others embrace historic approaches to font design, but searched for ways to merge traditional approaches and letter forms. This approach was less about slicing and dicing, and more about evolving shapes and spaces. For example, this is Tisa Web Pro, a digital 21st century font.
The designer was inspired by 19th century slab serif type, and wanted to develop a softer more dynamic version. If you look closely you can see both the slab serif and humanist elements in Tisa. Tisa Web Pro has substantial serifs. They're slab like, and they remind me of the serifs we saw in Museo Slab, though Tisa serifs feel more chiseled. Tisa Web Pro has strokes that are not monoline. They have slight changes in thick and thin, but the changes are subtle making the strokes feel more uniform.
Some of Tisa's terminals look like the stroke just ends. There isn't a pen form shape involved. When the terminal does have a shape, it references the slab serif. These characteristics make Tisa Web Pro feel like a slab serif font. Yet, Tisa has a double decker g, which is an older approach to the letter g, and its closed counter on the lower case a is smaller, which is also an old style characteristic. Tisa Web Pro's aperture on the e is more generous than a slab serif's aperture, and it's bowl on the b is less structured.
It has a suggested stress. Finally, the spurs on Tisa's a and u flip up at the end. These are the subtle characteristics that make Tisa Web Pro feel more like a combination of two different historical approaches to type design. Next, let's look at Le Monde Courrier, another 21st century font. With Le Monde Courrier, the designer was challenged to create a style halfway between writing and printing. So again, we'll see a meld of structured in humanist forms. Le Monde Courrier's g is single-decker, like we see in Museo Slab.
The close counter on its a is generous, and its terminals, while feeling slightly pen-formed, do not have an extra shape at the end of the stroke. While Le Monde Courrier is not monoline, the contest between thick and thin is subtle, so the strokes feel more substantial than old style fonts. All this characteristics relate back to a later font, to the slab serif fonts, but the serifs are pen-formed, and the bold on the b has an implied stress. The spurs on the a and u flip up.
So again, here is a font with humanist old style characteristics. In fact, Le Monde Courrier goes so far as to have an italic e, though it feels almost monoline. Once again, we have a font that suddenly combines aspects of slab serif's from the mid 1800s with old style fonts from the 1600 or 1700s. And yet, if we compare the two fonts, they look quite different from each other. They have combined the slab and the old style characteristics in different ways.
While some of the serif fonts available for Web type fit within the old style, transitional, modern, and slab serif classifications, most don't. Since the 1980s, font designers have been using vector-based software, which allows them to merge old approaches, and create new forms. Knowing what kind of characteristics you're looking for will help you narrow your choices as you search for a new font to use.
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.