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).
Now that we've finished the Museo Slab site, let's take a look at how using a slab serif font affects the look and feel of the site. First, I want to show you one problem with using Museo Slab. It's not a problem with the font, but a problem with using the font in this site the way it is designed. First you can see that the City Council Minutes link is too long. It's almost hitting the edge of the column. You can also see that we have a lonely word by itself in the last article.
Then finally, we can see the same thing has happened here with the word Pond in the Raynor Pond Clean Up event. Now here we also get the problem where this creates a white gap, which starts to visually separate the Date, Time, and Place information from the description of the event. This is all happening because Museo Slab is a wider font. It has a wider, rounder bowl. It takes up more space, so less words fit on each line.
If we compare it to another slab serif font, Adelle, which has a narrower bowl, we can see that Adelle doesn't have any of these problems. There is fine space after this link. The word shine is not by itself. Unfortunately, though, we can see we do still have it with the word Pond. If I were going to use either of these fonts, I would slightly change the layout of the page to make sure that my words all fit on the lines I expect them to.
Now, with sites like this, where different events and different articles are going to go up each month, you can't control everything, but I would try to find the best line length possible to work with one of these fonts in order to minimize this happening. Now let's take a look and compare these two fonts a little bit more. You don't have the Adelle page yet. We did not make it in this course. I made it independently, just for comparison purposes, though I do include it in the final files. We can see that both fonts have the light version for the heading, which is very nice.
Both use bold, Adelle is using a semi- bold, and we can see that the text for Adelle, if we just relax our eyes, and don't look at the detail, it feels a little bit more textural, and a little bit more humanist. You may remember that Adelle has a slight angle on the serifs. It has the slightly narrower bowl, and it also has the slightly more open apertures, and all these things help to make Adelle look a little bit more humanist.
We can also see that Adelle's italic feels a little more humanist. It has some very nice details. It has the extended stroke on the f, and it has the rounder, more italic e when compared to the Museo Slab. We can also see that Adelle has the old style figures. They're not true old style figures, but the 6 slightly goes above the meanline, and the 9s, and the 5, and the 7 slightly go below the baseline, and we don't see that in Museo Slab, which has the lining figures.
One problem with Adelle is that its bold does not hold up cross-browser. That's why we're using the semi-bold, and the semi-bold does have some problems at larger sizes, but we're using smaller sizes, so we're okay. We're not going to have a problem with the semi-bold. We could use either of these fonts. I do also want to take a moment to compare Museo to the PT Sans that we used in the last chapter. The PT Sans looks much lighter, and much more textural. It has more thicks and thins.
It has serifs that are not slab serifs, which helps with the texture. You can also see that the italics and the PT Serif feel more pen-formed than the italics on the Museo Slab. This is interesting, because the PT Serif italics look less pen-formed than some of the earlier fonts, like the Crimson Text. You could use either of these fonts as well. I think, though, that I would be interested in using one of the slab serif fonts. We have to be a little bit more careful with Adelle.
You may remember, I was concerned that Adelle has a slightly tighter letter spacing, but it would work on this site because the articles are short. We very rarely ask the readers to read more than a sentence or two at a time. If the site were using longer text, or more theoretical texts, I think that this type is a little bit too tight, and I would recommend the Museo Slab. But as I said, I do enjoy the slab serif fonts. There's a nice subtle historical connection here.
They work well with the picture of the renovated mill up at the top of the page. The slab serif fonts would have been used in the early to mid 1800s, and the mill would have been built in the mid to late 1800s. And in fact, many old mill buildings in the Northeast have these old stone signs that are built into the structure, and many of the signs use slab serif lettering. So most people probably won't even notice this historical connection, because they don't pay attention to lettering on signs, but at the same time, we often feel an intuitive connection.
So if someone has seen an old mill building in a photo, or a movie, they could be influenced by this font, with this image. So I'd go for a slab serif.
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.