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).
From 1530 to 1750, printers all over Europe and in the colonies created fonts we call old style fonts. Old style fonts continued to reference the human hand behind the letters. That is, they continued to have characteristics related to letters written with pen and ink, but the type designers also embraced the materials of printing technology. They moved further away from the calligraphic forms we saw in Venetian fonts, like Jenson. They were inspired by what they could do with metal. Letters became crisper; more refined.
If we were to look at fonts from France, Italy, Holland, and England, we'd see each region had their own idiosyncratic forms influenced by aesthetics as much as technology. There is a range of what old style fonts look like, and unfortunately, I can't show you all of them. Today, we're going to look at three different old style fonts, starting with the work of William Caslon, an English type designer who was influenced by Dutch type design. This is a portion of a specimen sheet printed by Caslon in 1728.
If we look closely at the letters, we can see some of the characteristics of an old style font. First, while the stress is a little less angled, the bowls still look pen formed. You can see that clearly in the lowercase e, b, p, q, and the d. But Caslon's lowercase o has a more vertical stress compared to the other bowls. The stress isn't consistent across bowls showing a departure from pen-formed letters. The aperture on the e is much smaller than on a Venetian font, because the crossbar is now horizontal.
But the aperture remains fairly open, partially because the closed counter on the e is so small. Small closed counters on the a and e is characteristic of old style fonts. Old style fonts usually have pen-formed terminals. That is, they looked like the shape a pen would make on the paper. The head serifs looked pen-formed too. Head serifs have a wedge shape, and both the head and foot serifs flow into the stem. The thin strokes here on Caslon are quite a bit thinner than what we saw in Jenson.
The letters feel less inky. Most old style letters have a thicker thin stroke than what we see here. That's probably because Caslon's work comes towards the end of the time we associate with old style fonts. He was probably influenced by some of the work we'll see being done by the transitional font designers in the next chapter. Yet if you look very closely at the closed counter form of the e, you can see there's a round edge here at the right side almost like the ink caught and pooled a little on this corner instead of creating a crisp corner between the bowl and the crossbar.
Notice William Caslon's font comes with an italic version. Nicolas Jenson's font did not. Early fonts did not have a bold or italic version. In fact, the first italic font wasn't even developed until 1506, 35 years after the example of Jenson's work I showed in the last chapter. The first italic font was developed for Aldus Manutius, who published affordable books for students. With an italic font, he could fit more words on each page, and save money on production costs.
Once italics started being produced, if a printer wanted to created emphasis with an italic, they'd use a separate italic font that worked well with their Roman font. But by the time Caslon was working in the 1720s, it was not unusual for a font to include in italic version, though old style fonts did not have a bold weight. As with Jenson, Adobe has a revival font called Adobe Caslon Pro. It was designed by Carol Twombly in 1990. She studied William Caslon's specimen sheets during the design process, but made some subtle changes that impacted the overall feeling of the font.
In fact, while Caslon's original font is considered an old style font; many typographers today considered the digital version a transitional font. And let's look at the digital version of Caslon. You can see the stress remained angled, but the inky shape in the e has been cleaned up. As for the serifs, they're more stylized. The head serif of the d still flows into the stem, but it's lost the concave shape along the top edge, and the foot serifs are crisper and thinner. But Adobe Caslon Pro didn't completely leave the old style category.
You can see the spurs on the u and d still feel like they were made by a pen being picked up at the end of the stroke. These angular spurs are an old style characteristic. Now let's look at Minion, which is another Adobe old style font. It was designed by Robert Slimbach and released in 1990. Here you can see a more traditional older approach to old style fonts. Minion looks more pen-formed than either of the Caslons. The terminal on the a, the way it ribbons into the rest of the letter, the thick stroke on the bowl of the a; it just looks more pen formed.
Even the e has a bit more ribboning to it. It almost creates a corner along the bottom of the bowl. The stress remains angled, and even the O has a bit more angle to it. Minions head serifs are slightly concave along the top, where Adobe Caslon Pro's are not. And Minion's foot serifs on the n are a bit thicker, and flow into the stem more. The last old style font we're going to look at is Crimson Text. Crimson Text is a contemporary old style font designed by Sebastian Kosch, and published under the terms of SIL's open font license.
Crimson Text has the usual old style features, like an angled stress, and serifs that flow into the stem. Of course, Crimson Text has its own unique qualities too. The head serifs on the l, b, and d feel more pen-formed. It feels like there's a slight blob of ink right at the top of the serif, and the shoulders, which is where the curved stroke meets the stem in letters like m, n and u, are thicker than in the other fonts. This gives Crimson a slightly varied texture on the page.
The counter form in the e is larger, and this makes the aperture a bit smaller. Finally, sometimes it helps to see what something is by looking at what it's not. Let's take a look back at the Adobe Jenson font, which is a Venetian font. Compared to Jenson, you can really see how old style fonts have become crisper and more stylized.
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.