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).
In 1967, inspired by the cathode ray tube and the increased use of electronic communication devices such as televisions, Wim Crouwel designed a new alphabet. He proposed a rule-based system for rendering letters based on horizontal lines instead of curves. While it was highly experimental, it was not particularly readable. Fortunately, there are futuristic fonts based on grids and geometric forms which are more readable.
Unfortunately, they lose much of the experimental quality found in Crouwel's alphabet. For this last version of the Library Used Book Sale page, we're going to be inspired by the fact that some of the books available are science fiction books. So we're looking for a font that says future and technology. Aldrich is a fine font, it's systematic and based on a grid, but it's not as futuristic as I'd like. Ethnocentric, while not grid based feels very futuristic.
The angled ends of the horizontal strokes make the letters feel slightly three dimensional. The B and P have unexpected open-counter forms which suggests speed and forward motion. I'm interested in this one. It's not available in Typekit's Trial Plan, but I Googled the font and this weight of Ethnocentric is available for free download from myfonts.com. It's also clearly approved for use as a Web font. We could download it, make it a @font-face kit at fontsquirrel.com and incorporate it using @font-face.
We'll keep this one in mind. Changeling Neo isn't bad. I like the wide letters and the grid-like structure. But this one is not available for free so I don't want to use it in this course, so we'll keep looking. Domyouji is beautiful but not what I'm looking for. I don't think Geo will have the impact I want, it's narrow and spaced out. It feels lighter than the other fonts. I'm also not crazy about the S in the word is. It feels a little complex compared to the other letters which have been simplified.
Iceland is okay. It has some of the 3D effect going on with the angled cuts on the ends of some of the strokes. At the same time the effect here makes the font look more complex, probably because this font isn't in all caps and it isn't as bold as Ethnocentric. Nova Square isn't right for this project. The angled cuts are in all the wrong places. They're top to bottom and it makes the font feel a little uneven. Orbitron is a possibility. It feels like it might be a little light to me though.
Now, Simply Mono does not feel light at all. The heaviness of this font combined with the similarity of all the letters and the really wide word spacing makes this font sort of hard to read, but not in a bad way. It reminds me a bit of the new alphabet I showed at the beginning of the lesson. It's not available on Google Web Font or via Typekit's Trial Plan, but it is available for free download via dafont.com. I've downloaded the license and it's not clear if it's approved for use with @font-face.
So I'd have to do some more research on this one before I could use it. Tachyon reminds me a little of Orbitron because it's so wide but I think it's a bit too heavy. The counter forms are getting too thin in the E and the A for my taste. It makes me feel too complex compared to the other more open and simple letter forms, so it's not quite what I'm looking for. Tenby Eight could work. It's bolder than Orbitron but lighter than Tachyon. It is definitely influenced by the grid, but it's a little softer than something completely grid-based like Simply Mono.
And I have to say I'm sort of partial to the wider letter forms, so this could be an option. Tenby Seven is another font by the same design studio out of Australia. It's not as wide so I don't think it feels quite as futuristic. And Zekton, while lovely is a bit too curvy for what I want for this project. We've looked at a lot of fonts. My favorites were Ethnocentric, which is a great cliche futuristic font with a heavy stroke, a 3D effect and a wide structure.
And Tenby Eight, which has a heavy stroke and a light structure. I'm tempted to go with this one because it's actually a little less cliche, though it feels too Humanist with all the lowercase letters. I like the uppercase structure we saw in Ethnocentric. So I tried Tenby Eight in all caps and I know this is the font I want to use. I love the word reading and how the D, N, and G are all subtle variations of each other. I also like it as a final addition to our set of display fonts.
I know people won't actually see all of these fonts in the same place probably, but I'd like them to work as a set to show a lot of variety, you know, to represent the variety of books available at the Book Sale. With Ethnocentric I think this set starts to feel a little too similar. All four fonts have heavy elements, and Ethnocentric and Limelight while completely different, have a similar black and white pattern thing going on. Again another good typographer could disagree and say they'd prefer the similarity between the fonts and that would be a fine decision.
But I'm going to go with Tenby Eight. I looked at Typekit's browser samples and it looks good. I think it's going to be a great choice.
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.