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 an old style font looks like, we need to pick one to use. I'm interested in using something that feels old and pen-formed, like Minion. Minion is beautiful font. It has a consistent texture, it's not too loose, and while it's a bit tighter than I usually prefer, it's not too tight. The only drawback I see is the x-height is a bit small, as are the closed counters on the e and the a. So I have to set this font a little bit bigger to be legible.
Set it 17 on 23 here on this page. This could cause a problem with the fallback font, but it's not a deal-breaker for me. I tested Minion cross-browser, and it performs beautifully. It's available through Typekit's Personal plan and higher, so we probably won't use it in this course, but you should know it's out there. Next, let's look at Sirba Web. This one is also available through Typekits Personal plan, so we probably won't use it, but if you have access to it, you might want to give it a try.
I've tested it cross-browser, and it holds up beautifully. The letter spacing, again, is a bit tighter than I usually prefer, but it's not too tight. The text is still comfortable to read. Sirba has a larger has a larger x-height than Minion, which makes it a little more readable on the Web. It also has a darker, inkier quality that I enjoy. Looking at the title, you can really see the ribboning in the letter b. The organic shapes of both the head and foot serifs almost looked Venetian.
Next is Crimson Text. We looked at Crimson Text in the last video. Like Minion, Crimson Text has a small x-height, and a small closed counter on the a, so it needs to be set larger than I personally feel comfortable with. If the font doesn't load, the fallback font will look quite large. I'm also not a fan of Crimson's bold italic. It looks a little dark and narrow to me, but this isn't a problem if we don't need to use a bold italic. I've tested Crimson Text cross-browser, and it holds up fairly well and remains legible.
It has a slightly looser letter spacing which helps, but it does have some problems related to hinting, which bother me as a typographer. Crimson Text, when set at 20 pixels, gets these little dots at the tops of the letters, and at 18 pixels, the X gets larger, so it's now runs above the main line. At 15 pixels, it gets a little bit lighter, with these little sorts of blobs of dark strokes in the text. Now, all of these sizes remain legible, there're just slight problems, and also, this doesn't have to be a deal breaker if we avoid certain sizes when using Crimson Text.
In fact, the font is actually quite pleasing if you use it at 19 pixels, and 17 pixels; there are no problems at those sizes. In addition, Crimson Text is available on Google Web Fonts, which means we all have access to it, so that makes this a strong candidate for this course. But I did want to show you a couple of other fonts as well. Another font I looked at had a couple of overly unique letters in it, so I wouldn't use this one. The stress on the o, b, d, and other bowls is just far too angled.
In fact, the O in the title feels like it's tipping over to me here, and then also here in the capital O. Also, I'm not a fan of the lowercase a. The terminal is a bit too pointy, and the stroke going down to the terminal is parallel to the stroke in the closed counter. We can see that here; those parallel strokes. It creates a form that sort of jumps out at me when I'm reading the text. Finally, another font I looked was just too dark. I wanted to take a closer look at this font, because I like the inky, old pen-formed quality.
It reminds me of Sirba, but the strokes are just a little too heavy, the letter spacing is just a little too tight, so it's harder to read, and I always try to use fonts that are easy on the eye. I want to create the most pleasing reading experience possible. So looking over all these fonts, we're going to use Crimson Text for the rest of the chapter. It has some minor problems cross-browser, but none of that interferes with readability, and since it's available via Google Web Fonts, we all have access to it.
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.