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).
The first modern font used for printing books was designed by Firmin Didot in France around 1783. Later, modern fonts were used in advertising, like this broadside announcing a celebration of American independence in 1833. Notice the heavy italic modern font in the heading. With their crisp thin strokes, abrupt serifs, and round terminals, modern fonts are not modern by today's standards.
Their stylized romantic forms were modern in the late 1700s to the early 1800s. Modern fonts were directly influenced by two seemingly competing factors: reason and romanticism. Structurally, modern fonts were influenced by the King's Roman, which, as you remember from the last chapter, was a font designed almost a hundred years earlier. Designed by committee, per order of King Louis XIV, it was mapped to a grid, and based on mathematical principles.
It had an increased emphasis on verticality, and an increased contrast between thick and thin strokes. The font symbolized the intellectual tenets of the enlightenment, which we also call the Age of Reason. Modern fonts were also influenced by the work of transitional font designer, John Baskerville, whose fonts continue the principles set forth by the King's Roman. In fact, modern fonts continued to use many of the structural characteristics of transitional fonts, and actually pushed them further. Looking at the Bodoni BE, which is a digital font based on the work of Giambattista Bodoni in 1798, we can compare it to Baskerville, a digital transitional font based on the work of John Baskerville in the 1750s.
Bodoni has a completely vertical stress. The slight angle on Baskerville's e has straightened up. While both fonts have a strong contrast between thick and thin strokes, Bodoni's contrast is exaggerated, and the change from thick to thin is abrupt. This abrupt change in stroke width is characteristic of modern fonts. Also characteristic of modern fonts are the very thin flat serifs that no longer flow into the stem. See how the serifs form a crisp 90 degree angle to the stem? This is a big change from previous serifs.
Related to serifs, modern fonts have round bowl-like terminals. Finally, the aperture on the e closes up significantly. It has to; it has to compensate for the top right corner of the bowl, which has gotten so heavy. Plus, the smaller aperture lets the E mimic the structure of the o. While the rigid systematic underlying structure of modern fonts appears to be primarily influenced by the Age of Reason, there was another competing factor at work: romanticism.
Overlapping the Age of Reason, and in response to its scientific rationalization of nature, was the romantic period. Believing that man must liberate himself from intellectual change, romantics recognized diversity, and believed that expression was everything. Romantics believed that unique traits were what set people apart from one another, as well as nations apart from one another. In order to understand how important the idea of personal and national diversity was, it's worth mentioning that this was a time when individuality was threatened.
The industrial revolution was in full swing, and Napoleon was trying to expand French territory. Much of Europe was engaged in the Napoleonic Wars. Now, how could such a structured approach to font design possibly represent the ideas of the Romantic Age? It does in two ways. First, remember that until now, for the last 350 years or so, fonts have been based on using a broad nib pen. By pulling further away from the humanist principles defining early fonts, modern font, like Bodoni, are unique.
In fact, the modern fonts are harder to read than earlier fonts. The strong vertical strokes try to pull the eye down the page instead of across the rows. In addition, the high contrast between thick and thin strokes can create a dazzling effect in the text. That is, the thins start to disappear, leaving only the thick strokes for reading. Choosing to design such crisp, elegant fonts, regardless of readability, is an act of self-expression. But modern fonts are not purely intellectual.
Believe it or not, they're related to handwriting. At the time fonts like Bodoni were originally designed, people no longer used the broad nib pen to write. Thus, pens no longer created a natural access, or pen-formed terminals in serifs. Instead, people like Seth Barlow, who kept a log aboard the Whaling Brig, The Nancy, from 1808 to 1811, used a pointed flexible quill to write. The flexible quill responded to pressure; the greater the pressure, the thicker the stroke.
Dramatic pressure created a dramatic contrast between thick and thin strokes. And here, you can see Barlow, who was an excellent letterer, drew some Roman forms, not unlike the forms we see in Bodoni. But we're looking at script. Let me show you how the flexible quill influenced fonts like Bodoni. This is an Imperial 101 Nib that is flexible, and works similarly to the old quills. When I apply pressure to the nib it opens, like this. Let's see what happens with some ink.
I'm not very good at working with this nib; it's harder to use than the C1, but I'll do my best. I lightly draw the top of the bowl, apply pressure to create the outer edge, release pressure to finish the stroke, and start again at the top. You can see here that I increased pressure, and the nib opens, and I draw down, and finish the O. Now I'll do a letter b, starting with a lightly drawn head serif. I apply pressure, draw down, and run out of ink, so I'll try again.
I lightly draw the head serif, apply pressure, draw the stem, lightly draw the foot serif, up to the meanline, lightly draw the top of the bowl, apply pressure to draw the outer stroke of the bowl, and finish the letter. You might notice, I keep using the verb draw instead of write. When using this nib, it feels more like drawing, whereas a flat nib creates thick and thin strokes as I write.
With this nib, I decide where the thick and thin strokes are. I'll move the paper, and draw an e. Even the terminals are drawn. When making the letter a, I start by drawing a circle terminal, lightly draw over the top, apply pressure down, finish with a thin, curly spur, then lightly start the top of the closed counter, pull down with pressure, and pull lightly back up.
The extreme contrast in thick and thin, whether created by a pen, lead type, or a digital font, is more difficult to read than earlier fonts. In fact, I don't recommend using modern fonts for text. They lose their stylized romantic forms, and make it harder for visitors to read the content on your site. Save them for headings, where their elegance will truly shine.
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.