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 don't have serifs. The first sans serif font was released in 1816 by the great grandson of William Caslon, whose old style font we looked at earlier in the course. It was not well-received, and in fact, was called grotesque. To this day, some sans serif fonts use the term grotesque in their name. Sans serif fonts gained some popularity in the mid to late 1800s.
Like slab serif fonts, they were heavy, and primarily used on broadsides, and for headlines. In fact, looking at a digital version of Franklin Gothic, which was released right at the turn of the century in 1902, we can see the font is bold-weight; not designed for reading extended amounts of text. Shortly after Franklin Gothic, font designers started designing sans serifs for use in text. Today, there are thinner weights of Franklin Gothic, which were released in the 1980s.
We usually associate sans serif fonts with feeling modern or technical. Some people even call them cold, because they lack the humanist calligraphic forms we associate with many serif fonts. But the association between sans serif fonts and technology is more than just lack of calligraphic forms. In fact, as you'll see later in the course, there are humanist sans serifs. We tend to associate sans serif fonts with ideas of modernism and technology, because of when they were developed and used.
The start of the 20th century was a time of change. Innovations in communication included wireless signaling, and the first transatlantic radio signal. Innovations in transportation included the dirigible, the first airplane, and the first prototype for a liquid-fueled rocket. Innovations in industrialization included the assembly line, and mass production. Innovations in economics included the first bank with a national presence in the U.S., mortgages, auto loans, and consumer credit.
And of course, World War I, the war to end all wars, was fought from 1914 to 1918. Millions of lives were lost in the battle due to technological advances in firepower. Many civilians suffered from malnutrition due to lack of manpower to grow food, and lack of fuel to transport it to populated areas. So after almost a century of whimsical fonts, which were display faces not used for text, designers turned to a simpler streamlined typeface.
In the decade immediately following World War I, some designers wanted to move forward. They wanted to embrace technology, and order, and cleanliness. They did not want to reflect on their humanist roots, which can remind us of the fallibility of man. This new rational approach to design, modernism, demanded clean fonts devoid of ornamentation. Thus, many sans serif fonts were developed in the first half of the 20th century. But perhaps the most well-known sans serif is Helvetica, designed by Max Miedinger in 1957.
A prevalent default Web font, Arial, is very similar to Helvetica, and is designed to be a generic sans serif font. In fact, Helvetica and Arial are so similar; it's hard to see their differences unless we overlay them. Here Helvetica is red, Arial is blue, and the purple is where they intersect with each other. Helvetica and Arial both have monoline strokes with no stress. They have a slightly narrow, but not condensed bowl, tiny apertures, terminals that end without additional shapes, and large x-heights.
Sans serifs like Helvetica and Arial are sometimes called transitional sans, because of their upright structure. Notice the similarities in structure with Utopia, a transitional font we looked at earlier in the course. For example, they both have smaller apertures in the e, and a slightly narrow bowl on the o. Sans serifs like Helvetica and Arial are also sometimes referred to as anonymous sans.
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.