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 Crimson Text site, let's take a look at how using Crimson Text, an old style font, affects the look and feel of the site. Let's compare Crimson Text to Calluna. Calluna was the Venetian font we used in the last chapter. If you just sort of relax your eyes, don't look at the detail, but look at the overall texture of the page, Crimson Text looks older, inkier, more pen-formed than Calluna. Based on the history of the two fonts, Venetian is the older, more pen-formed approach to type design.
This is sort of surprising, but remember, we chose a more contemporary approach to Venetian fonts when we chose Calluna. Yes, if we look at the main heading, we can see the rising crossbar on the E. We can see the pen-formed head serifs on the H, the L, and the D, and we can even see the angled serif under descender of the P. But Calluna also has a stylized approach to the letters. The relationship between thick and thins is relatively even. The letters are crisp, the x-height is relatively large.
On the other hand, we chose a more pen-formed old style when we chose Crimson Text. It too has the pen-formed head serifs on the L, the D, and the H. It also has a smaller x-height than Calluna and an A with a smaller closed counter, and a more pen-formed terminal and bowl. Finally, Crimson Text's thicker shoulder on the N and H help create slightly darker, more inkier looking spots in the texture of the text.
If we had chosen an older looking Venetian font, like Jenson, and a less pen-formed old style font like Caslon, we'd have a completely different visual experience looking at these pages. It's important to remember that even within a typeface classification, like Venetian and old style, there is a wide range of fonts to choose from. The other element that makes the Crimson Text page feels so old and pen-formed is the italic. Let's scroll over here and look at this italic; it has some lovely details.
Looking at the library quote, and you'll find an extra loop on the arm of the lowercase k. You'll also find a lovely terminal at the end of the F. If we look at the italic on the Calluna, we can see it also has a loop on the K, but it does not have the terminal on the end of the lowercase f. Crimson Text's italic is a little bit narrower than I like to use, but it's okay with small amounts of text in the situation, and the narrow calligraphic forms are actually what make it feel so old.
I enjoy Crimson Text; it's a pretty good font for being a free font. It offers a variety of weights and styles, it holds up fairly well cross-browser, and it has some beautiful letter forms. But I'd be remiss if I didn't point out one of its faults: it has spacing problems, which unfortunately stands out quite a bit on this site. Let's take a look at the word Welcome here at the very top of the page, the very first word we see, and the space between the W and the E is just too wide.
It begins to read as W-elcome. If we go back to the quote, we can see the same problem in the word benefit. It becomes Benef-it, and you'll remember from when we looked at this page in Internet Explorer; there were some spacing issues with the italics in the quote. This is an unfortunate problem in an otherwise very pleasing font, but you should be aware of it. You'll often find problems like these in fonts that aren't supported by a person or even a team of people that can put in the hours required to properly space and hint every letter and combinations of letters. It's a big job.
Having pointed out the spacing problems, I have to say, it's a good font that does its job quite well. If you're currently only able to use free fonts, this is a font you should keep in mind, and consider using, especially if your project does not need an italic. It has some lovely features.
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.