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 modern font looks like, we need to pick one to use. First, let's look at LTC Bodoni 175. It is a modern font based on the Bodoni's original font. Notice the contrast between the thick and thin strokes. The contrast is far greater than what we see in Georgia, and that's because Georgia is a transitional font. Like all modern fonts, the serifs are thin and flat, and they do not flow into the stems. This font is a little different from the Bodoni BE we saw in the last lesson.
The terminals are less round, as are the bowls. The thin stokes in this Bodoni feel even thinner. This is a fine font, but I'm not crazy about it for this project. This font was designed to be used in headings. That means it has slightly tighter letter spacing. Tighter letter spacing helps keeps big text from looking too loose, but then the letter spacing is too tight when we use the font for text. If we use LTC Bodoni 175 for text, the tighter letter spacing will make an already hard to read font even harder to read.
And even if it was the perfect font, with better letter spacing, and slightly thicker thin stokes, it's only available from Typekit in the Personal plan or higher, so not everyone has immediate access to it, so let's keep looking. Kepler Standard is marketed as a modern font with humanist details. It's a well designed font and holds up across browsers. But the humanist details, like the serifs that flow into the stems instead of creating a 90 degree corner, and the terminals that are softer, and not ball-shaped, like here on the a, and there are not quite vertical stress, like here on the d; all these things make the font feel sort of un-modern to me.
Now don't get me wrong, it's a gorgeous font, and I would definitely consider it for another project. It's just not what we're looking for right now. Next, let's look at Unna. Unna is available on Google Web Fonts. It has good forms with some solid modernist characteristics, but like LTC Bodoni 175, since it's meant to be a headline font, the letter spacing is little too tight to use in text. Also, when tested cross-browser, Unna works fine in very large headlines, but when used for smaller headlines, and for text, it has problems in Windows XP, Opera, and Chrome.
The strokes get inconsistent, and even harder to read, so we'll keep looking. Next we have Vidaloka Regular. This is a great example of a contemporary modern font. It's really funky. It has the extreme contrast between thick and thins. It has round terminals, and the thin flat serifs that we're used to seeing in the modern fonts, but the bowls are slightly narrow, and the thick strokes are organic. So the letters are less systematic than a traditional modern font.
It's a fine font, it has good spacing, and the forms work well together, and they make a pleasing system; it's just not what we're looking for for our project, so we're going to keep looking. This font has a decidedly modern structure, but it's too heavy, and a little too loose. I'm also not crazy about the lowercase a; here you can see the aperture is way too tight, and that's makes the a sort of pop out in the text. And then finally, this modern font, it's a little too loose, and it's not quite as modern as I'd like.
We can see here that the serifs are flowing into the stems, and the contrast between thick and thin isn't as strong as I'd like to see in a modern font. So we've looked at six modern fonts, and haven't been able to find even one that meets our needs. Before we give up, though, we're going to try one last search on Typekit.
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.