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 the last chapter, I talked about handwritten letters, and how some forms look like they were done with pen and ink. I'm asking you to imagine how the shape of a pen nib combined with ink formed the characteristics of a letter. To help you visualize this better, we're going to take a quick break from fonts while I show what I mean when I talk about pen-formed letters. Now, I'm not a calligrapher; I've only taken a couple of workshops to help me understand letters better, so these letters won't be award-winning, but they'll do.
I'm using a C1 nib, which is flat and has a slight angle. The shape of the nib is what makes it a C nib. The size of the nib is what makes it a C1 nib. A C2 would be a smaller, narrower nib. I've marked out a template for my baseline, meanline, cap height, ascender, and descender. Now, in this day and age, many of us have learned to draw forms in a vector-based software. When we do that, if we want to draw an O, for instance, we would draw the outer edge, then the inside edge, then we'd fill in the shape in between.
When we draw a letter this way, we have to make very careful decisions about where to put the outer and the inner edges, so we can get the shape we want. But when we write with a nib like this one, the shape is created by the nib. I'll draw the left side, come up, and draw the right side. It's important to always pull the pen, so they always actually made out of two strokes. Notice the ribboning effect. The stroke changes rather abruptly from thick, to thin, to thick again. It was created by the angle of the pen on the paper.
I can vary it by changing the angle of the pen. The nib does all the work. I can change the angle of the pen, and write another O. The stress of the O, represented by a line drawn between the two narrowest parts of the bowl, shifts depending on the angle of the pen. I'll move the paper over, and use the nib to make another letter; an e. I can also make a head serif, and a stem, then add a bowl, and make the letter b. I can make an a one of two ways; drawing the right stroke first, then adding the closed counter, or writing a spine like a backward s, then finishing the right stroke.
Notice how I actually wrote pretty structured letters; the pen and ink added the ribboning. Even this stroke, which looks the least structured, is a vertical line. The slight curve is because I accidentally tipped my pen off the paper while I was writing. The pen and ink created the details. Finally, when we looked at the Venetian fonts, there was a special foot serif that looked hand-done. The pen pulled down, then over, then back to the right. I'll do it again on the other side.
Pen nibs come in different shapes and sizes. When letters are written with a C nib, they get a ribboning effect, and create pen-formed serifs. Venetian fonts include elements that look pen-formed. If you have the opportunity to take a calligraphy workshop, I highly recommend it. Carefully writing letters with different nibs will give you a more intimate understanding of fonts.
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.