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).
So now that we know what a slab serif font looks like, we need to pick one to use. First we'll look at Adelle, which is available on Typekit's trial plan. Adelle serifs have a subtle angle to them, which is enjoyable. The change in stroke width gives the font a little more energy, especially when used at headline size. It has a narrower bowl, and a slightly more open, humanist aperture. The font slightly tighter in text than I like to see used online, but the large counter forms in the lowercase a and e help Adelle remain readable, so I'm not going to rule it out yet.
If we scroll down, you can see it has a lovely italic. It has some humanist elements, like the extended stroke on the f, and the rounded e. This is a nice contrast to the structure of the slabbed roman forms. Unfortunately, Adelle's bold does not hold up cross-browser when tested on Typekit. You can see here that the a at 18 points; the closed counter gets very squished. But luckily Adelle does have a semi-bold that we could use we needed to, so we won't rule it out, but let's keep looking.
Next is Arvo, which has a rounder bowl, and more traditional slab serifs. In fact, the slab serifs look very square, and almost heavier than the strokes in the letters. Arvo feels very solid compared to Adelle's energy. I like the letter spacing here; it's a little bit looser, although at this size in text, the word spacing looks a little bit tight compared to the looser letter spacing. The bold is a little bit too bold for my taste, although that is a personal preference, but I do think that the counter forms in the s and the e start to sparkle.
Finally, Arvo's weight does shift when viewed cross-browser. So we can see here at 18 pixels, the regular weight of Arvo looks quite bold, and at 16 pixels, it looks quite light. So let's keep looking. Museo Slab is a contemporary slab serif font. It has square slab serifs, but it also has a bit of curve at the bottom of the l, like what we saw earlier on the Officina Serif. The bowl is round, and the bold is good; not too heavy.
And it comes in a wide variety of weights, so we could go heavier or lighter if we wanted to. It has good word spacing, and good letter spacing, and it holds up cross-browser, and it's also available in the trial plan on Typekit, so this might be the font we're going to use. I do sometimes get concerned about fonts with circular bowls, though, because they're wider, and will fit less words on a line of text. I know the line length on our Springfield, Rhode Island site is short, and Museo might be too wide to fit comfortably.
So let's look at a couple of other fonts first, just to be sure. This slab serif has a lot of potential. It has good forms, and a good spacing, and the bowl isn't too big, but it's way too heavy; it looks like it's a bold, and it's not. This is the regular weight. This slab serif, it has a better weight for text, but it feels a little too square to me, The squareness sort of calls attention to itself. I like how the bowls are a little narrower, so we could fit more words on a line, but when I read the text, I find myself thinking, Wow! This is a really square font.
And I find myself paying more attention to the shapes of the letters than to the words themselves, so I think this font is better for a display font; it's great for headlines. So we've look at five slab serif fonts, and I think Museo Slab is our best bet for this project. It may be too wide for our layout, but we won't know until we try, and if for some reason it doesn't work, Adelle would be a good second choice.
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.