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).
A third way to use more than one font on a page is to use one font for the text and to bring in another font when you need it for special characters. This can happen when text has mathematical characters in it or words or phrases that need to be set in a non-Latin script. Today, we're going to integrate another font into the Merriweather version of this site which we made in the chapter about other Serif fonts. One of the things that I missed about Merriweather is it doesn't have an italic.
This is isn't terrible. We were able to work around it and we created hierarchy into separate voice for the Italic, but when I was looking at some screenshots I've taken of the Handwriting Fonts, I realize that Ruluko looks somewhat similar to Merriweather. They both are somewhat narrow fonts with a vertical structure. They both have open Humanist forms and they both have sort of thin strokes and they feel pretty monoline. It occurred to me that they look lovely together and they might be able to work together.
I wondered if I could use Ruluko as a sort of italic for Merriweather, would they be a good enough match? I've saved the Merriweather page that we made earlier in the course and I've renamed it merriweather_ruluko_site.html and it's available in the exercise folder for this chapter. Let's open it in the text editor. You can see that I've already added the Ruluko to the Merriweather page and I've changed the em which is our italic for the word union to Ruluko and I have removed all the styling.
I have kept the font style normal because in em has a default style of italic and I don't want it to come in as Ruluko Italic. I've also added Ruluko to the quote and I've kept everything else the same. These are all the same sizes and colors that we used in the original Merriweather site. So let's take a look at how that worked. What happened is that the Ruluko is way too small to work with the Merriweather. We can see here the union is very small in this sentence and the quote feels a little bit weak and small.
So what I did was I made a second version of this page and I made the fonts a little bit bigger and don't be surprised if you have to do this. Sometimes you need to make the second font a little bit bigger or smaller to make it work. So I changed the em to use here in union to 16 and I changed the quote here to 17 pixels on a 22-pixel line height. Now this is much larger than the Merriweather text size of 14 pixels.
But let's see how that looks in my second version. It looks really good. The union just flows right in that sentence. Now sometimes a font pair can't be used this way because the second font will look a hair too small at one size and then look a hair too big when it's set only one pixel bigger and unfortunately, we can't work with one-half pixels. But this worked. We got lucky. Union flows right in with the rest of the text. It doesn't pop out of the text. It just has a subtle emphasis. It's really nice and the quote down here is obviously a different font but when that works structurally well with Merriweather, it doesn't feel out of place.
When you need to mix fonts within the same sentence or paragraph and you don't want them to be in conflict with each other, look for two fonts that have a similar internal structure as well as a similar weight. If Ruluko or Merriweather had been a heavier font, this wouldn't have worked.
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.