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 Merriweather site, let's take a look at how using an other serif font like Merriweather can affect the look and feel of the site. We're starting here with a split screen comparing the Merriweather page on the left to the old style page set in Crimson Text on the right. If we just relax our eyes, and take in the overall feeling of the page, the Crimson page has more texture. The shapes of the serifs, and terminals, the smaller closed counters on the lower case a and e, and the ribboning from thick to thin strokes, and the bowls add visual complexity to the font.
This complexity creates more visual texture. Merriweather on the other hand feels lighter and more open. Looking closely at details we can see that the letters in Merriweather are more open. Let's look at the lowercase a in the first few words here of the first sentence, John and Sarah. Looking at the name Sarah here, and over here in Crimson, we can see that Merriweather's a's are more open. You might hear people use the term friendly when they talk about a font.
Merriweather feels friendly. Even though Merriweather feels more monoline, less inky, and has a larger x-height, it still feels humanist. It has serifs. The bowls in the b, d, q, and p suggest an angled stress, and it has old style figures; you can see here in the address. Comparing Merriweather to our other slab serif font, Museo Slab, we can see that the geometric forms in Museo Slab, the round bowls in the o, the c, and the e make the font feel a little mechanical compared to Merriweather.
And the thick heavy structured serifs promote this mechanical feeling. So again, Merriweather feels more open and friendly. I still wish Merriweather had an italic. If the information on our site were more complex, we probably couldn't make it work without an italic, but it works here, and in fact, any of these fonts could work for this page. Choosing the best font would depend on the message the client wants to communicate. Are they deeply rooted in history? Do they want to convey a feeling of trust and stability? Then perhaps an old style font would work best.
Are they a revitalized city, and they want to focus on their new economy, and how it's linked to their old manufacturing economy? Then perhaps we'd use a slab Serif. The texture of a font, its stability, its darkness or lightness, all these qualities play a role in helping a client convey their message. But I have to say, if I could just pick a font based on form, and I didn't have to worry about the client's message, the Merriweather page might be my personal favorite so far.
I think its slight slab serif qualities relate to the picture of the restored factory building in the header image. Since both the original factories, and the slab serifs would have been in use around the mid 1800s in the area, I think it's a good match. At the same time, the thinner stokes of the font make it feel as so it belongs to the 21st century, and they keep the font light and legible. And the subtle humanist touches, like the narrower bowls with the subtle stress, the open apertures, and the old style numbers; they all make the page feel a little more welcoming than a true slab serif font.
As usual, changing the font changed the overall feeling of a page. Now that we've moved further along the timeline, as we've started using fonts designed for marketing, not just books, as we've started using fonts created with computers, not originally cast in lead, the changes had become more noticeable, and the options have become more varied. But even when we're talking about serif fonts that aren't easily classified, we can still use the same language we've used all along.
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.