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).
Sans Serif fonts do not all look alike while Transitional Sans like Helvetica and Arial are sometimes called Generic or Anonymous, and some Sans Serifs based on circles and triangles are called Geometric. Others which incorporate humanist forms reminiscent of old style fonts are called Humanist. In 1926, right around the same time Paul Renner was designing Futura, a Geometric San Serif, Eric Gill was designing Gill Sans.
Gill Sans is what we'd call a Humanist Sans Serif. Looking at this digital version of Gill Sans we can see it has a double-decker G with a closed loop. It has a double-decker Humanist form a with varying stroke thickness. The a ends with a curled form. It has relatively generous apertures and the shape of the bowl suggest a stress even though the stroke is monoline. Gill Sans also has a round O but that's the only bowl in the system that is Geometric, the rest of the font feels Humanist.
There are many humanist Web fonts available today. Most of the Sans Serif text fonts designed in the last 20 years tend to have Humanist qualities. I suspect, that's because the more generous apertures help texts stay readable at smaller sizes. Humanist Sans Serifs are the most readable of all the Sans Serif fonts. Of course, typographers don't agree on the exact definition of a Humanist Sans Serif. In addition to generous apertures some say a Humanist Sans Serif font has a modulated stroke, that is there are subtle thicks and thins in the strokes.
The slightly modulated strokes can be pretty subtle. The blue lines laid over this large PT Sans e are the same length. Other Humanist San Serifs have more obvious modulated strokes. Some typographers say a Humanist Sans Serif has stems that do not lay flat to the baseline. Others say a Humanist Sans Serif has a double-decker g with a closed loop. I would consider any of these fonts to be Humanist, they all have Humanist qualities though they don't all have the same characteristics.
A Humanist Sans Serif has a certain feeling when used in text. When looking for a Humanist Sans Serif I look first to the texture. The things that makes Sans Serifs feel more humanist to me are the open apertures and bowls with an implied stress, that is bowls that don't feel like they're heaviest part is to the outside. Here, these bowls have a shape that implies heaviness in the upper right hand corner. The second thing I look for when I'm trying to decide if a font is a Humanist Sans Serif is the Italic.
Does the Italic look Humanist? I look for a single decker a, and extended stroke on the f, and sometimes I'll hit the jackpot and find a rounded Italic e. If the Italic is oblique like Pragmatica's italic then the text won't have an overall humanist feeling on the page. The last thing I look for are the details in individual letters, whether it's a double-decker a and g, whether there's curve at the end of the lowercase l. For example, if we look at Museo Sans it has a double decker a, and a curve at the bottom of the l, but it feels like a Geometric font when use in text.
Museo Sans bowls in the e, the b and the g are not Humanist. I wouldn't call Museo Sans is a Humanist font just because it has some Humanist details. I always look at the overall texture and feeling of the font. Verdana, a popular Web font, is a Sans Serif with both Transitional and Humanist qualities. Matthew Carter designed Verdana with generous apertures and Humanist bowls to maintain legibility on the screen. Verdana's slight vertical structure compliments Georgia, which is the Transitional Serif font Carter designed for the screen.
Verdana's Oblique provides contrast to Georgia's Humanist Italic. The more Sans Serif fonts you look at, the more you'll find characteristics gently blended into a single font. Contemporary Humanist Sans draw inspiration from a variety of sources.
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.