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 geometric Sans Serif font looks like, we need to pick one to use. We'll start with Futura PT. This is a digital version of Futura, a well-known geometric font. It is as geometric as possible and can still be easily read in text. You can see immediately, when compared with Verdana, the Futura has a very small x-height. In fact, we need to set the text at 18 pixels for it to be readable. When text type starts getting that big, it makes me get a little nervous because if the Web font doesn't load, the fallback font will look huge.
Both Arial and Verdana have a much bigger x-height than Futura PT. Other than that when looking at Futura PT, you can see it has the round circles for the bowls and we can see that as well in the text, and you can see it has a very heavy bold. There's a lot of contrast in this font between bold and regular. I think this helps emphasize the overall geometric feeling of the font. We're not going to use this font for two reasons. One, it has the very small x-height. That means the text needs to be set so big just so that it looks good in a text size.
The other is that the font is available only in the Personal Plan and higher on Typekit, so not everyone has access to it. So let's take a look at another font. Here we have Muli. Muli is a geometric Sans Serif font available via Google Fonts, and again, it has the very round bowls we can see here in the a. And we can also see that the a is a single-decker a and it's a bit lighter than what we saw in Futura, but it's still legible. It does not have an italic, but we could still make it work.
We saw that with Merriweather. But my concern with Muli is that it did not hold up cross-browser. Part of this has to do with how light it is and part of it has to do with hinting. On Safari 5 and Opera 10 in Windows XP, there were some hinting issues. You can see how the heading here gets light and dark within the letters. It's still readable and it does not completely fall apart. I would personally avoid this font until browser upgrades in Safari and Opera mean we could expect less readers to see the font this way.
But Muli held up beautifully across all other browsers so it's a good solid font. Now let's take a look at Museo Sans. This font tends to look geometric on the page and text even though it has the double-decker a and some other humanist characteristics, like the slightly open aperture on the e. It still has very round bowls and it has the oblique italic. That is, the italic is not humanist. It looks more like it's just been slanted over a bit. Museo Sans has a slightly smaller x-height than Verdana, we can see here, and the bold isn't quite as heavy as Futura PT's bold was.
Museo Sans is also available in the Trial Plan in Typekit, so everyone has access to it. So this may be the font we use. Looking at another geometric Sans Serif font, this one is too light and too loose, it's difficult to read. It becomes like little specs of texture on the page. The letters in each word float away from each other and they don't feel cohesive. And the text almost looks like it has a pixel of letter spacing added even though it doesn't. Then of course, the lightness of the font also makes it more difficult to read.
This geometric font has better letter spacing. It might actually be a little bit tight, but that's not a make-or-break deal at this point. It has a good weight overall, but my concern with this font is that it has a slightly hand-drawn feeling. I'm going to zoom in here, Command++ (plus) on the Mac, and you can see that there are these imperfections in the edges of the letters. They almost look like they've been traced. The o is not a perfect circle and the G here is more egg shaped. Now this doesn't mean it's a bad font.
It just means that it's not appropriate for this project. I'm looking for a true geometric feeling font, and this is a little bit too casual. And I don't feel it's appropriate for this project or for a city. It doesn't feel business-like enough to me. If I wanted something that referenced to the human hand, I would look for a more humanist font. So we won't use this font either. Based on looking at all of these fonts, we're going to use Museo Sans. It's available via the Trial Plan, so everyone can use it, and it's got a good letter spacing, good contrasting weights, and it works cross-browser.
Some weights and styles are even available to use with @font-face.
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.