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).
Nicolas Jenson's fonts are what we'd call humanist or Venetian fonts. Humanist fonts have forms that were created by the human hand. Today we have a Web font available called Adobe Jenson Pro. Let's take a closer look at it. Immediately noticeable is how much smaller Jenson Pro's x-height is compared to Georgia's. We can also see that Adobe Jenson Pro looks more like it was written with pen and ink. Look at Jenson Pro's lowercase b; look at where the bowl meets the stem.
We can imagine a pen being pulled up out of the stem then around the bowl, creating this ribboning effect, and where the pen meets up with the stem again, it would create this pool of ink. Now compare it to Georgia's b, where the wide stroke in the bowl is more uniform, and there's a carefully designed spur at the bottom of the stem. Jenson feels more inky and handwritten. You can see the same ribboning in the c, and here in the e. The e is a dead giveaway for a Venetian font. It has a rising crossbar; this is a Venetian characteristic.
Not all fonts with rising crossbars are Venetian, because the characteristic has been borrowed and recycled by contemporary type designers, but all Venetian fonts do have rising crossbar. Now let's look at the original Jenson font. Adobe Jenson Pro, like all digitized versions of old fonts, tries to capture the essence of the original font, but capturing the essence is not the same as creating an exact copy. Look at the e. You can see that Adobe Jenson has captured the rising crossbar.
It also has a similar stress to the original. That is, the angle of the imaginary line drawn between the thin parts is almost the same from one font to another. But Adobe Jenson Pro emphasizes the little bit of ink coming off the crossbar. If we look closely at the e's in Jenson's original font, we can see a hint of this form, but it's not as strong as it is in the digitized version. Also, look at the lowercase a. The digitized version actually looks more ribboned than the original.
Look at the terminal on the Adobe version. It has a shape that suggests a pen stroke ended here. On Jenson's original, the terminal is rounder, a little less pen-formed, and some of the a's don't have an extra terminal at all. Finally, let's look at the lowercase n. Jenson's original n has a thickening where the stroke meets the left foot serif. Adobe's version is thinner; more delicate and refined. But Adobe's version does keep the shape of the right-hand foot serif.
See how it looks like a pen pulled down and to the left, then moved to the right, and lifted up off the page? You can see the same form in Jenson's original. These are just some of the characteristics that make the font feel handwritten. Venetian fonts are sometimes called humanist fonts for this reason, but it's important to remember the digitized versions of old fonts are not a perfect match. Let's back out and look at the two as text. Adobe's version looks more even, and a little heavier.
Next let's look at a more contemporary version of a Venetian font, Calluna, designed by Jos Buivenga. The first thing you'll notice when looking at Calluna is that it looks more like Georgia than Adobe Jenson Pro did. It has a similar x-height, and the letters look more refined. The letter strokes are less ribbony, but you'll see references to forms handwritten with pen and ink. Let's look at the lowercase n. There's that foot serif we saw in Jenson. It looks like a pen was pulled down, over, and back.
And Buivenga also added a similar feature to the bottom of the descender on the lowercase p. Look at the lowercase e, and you'll see the rising crossbar, though it's at less of an angle. Calluna is what I would call a contemporary or modernized Venetian font. The rising crossbar and hand-drawn serifs feel very Venetian to me, even though the bigger x-height and more stylized letters feel more contemporary. If we back up and look at Calluna as text, it is slightly lighter and more open than Adobe Jenson Pro.
It also doesn't feel quite as handwritten as the Adobe Jenson Pro does. It's important to understand that just because a font is classified a certain way doesn't mean it will look like all the other fonts in that classification. We looked at Jenson's original printed font, Adobe Jenson Pro, and Calluna. There are specific similarities that make them all Venetian, but each font also has its own unique qualities that affects how it looks when set as text on the page.
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.