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).
Handwriting fonts soften the digital presentation of text. Most of them are not easy to read. I wouldn't recommend using them for extended text, but they can be used for short passages. Many clients, designers, and bloggers like to use Handwriting fonts because it brings the personal voice, the representation of humanity back into pixel-based presentation of information. This unspoken need for incorporating the human hand reminds me of Gutenberg and his Bible back in the 1450s. You may remember from the beginning of this course that Gutenberg purposely mimicked manuscript books of the time.
He believed his work would be better received if it looked and felt like the handwritten books people were used to. In fact, you may remember that Gutenberg created multiple versions of letters so they did not all look alike. Slight variances in letters helped the texture of the page feel imperfect, unique, and handwritten. One of the problems with digital handwritten fonts is the repetition of letters. A unique handwritten personal feeling is undermined when we can easily see that the exact same forms are used over-and-over again.
Compared to an original script written in Seth Barlow's whaling log in 1809 we can see the digital version doesn't hold up; whereas, Barlow's writing feels elegant and personal, the digital version feels, well, digitally manufactured. The other problem with handwritten fonts is that even if you spend hours trying to find a good match you'll often have to settle for something that's not quite what you wanted. Barlow's script is nowhere near as ornate as this one, but it was the closest match I could find. Of course, Handwriting fonts don't have to be a script.
Many Handwriting fonts are Roman fonts that have been designed to feel more personal, more casual. Comic Sans is a font designed to mimic the text in comic books. It's been overused and there are plenty of designers who love to hate it. But the reason it's been overused is probably because people connect with it. Comic Sans looks more like hand-printed text than the Humanist Sans Serifs like Gill Sans and PT Sans, but when compared to Gill Sans and PT Sans we can see that Comic Sans has a pretty normal systematic structure.
This may also be why it's a popular font, it's quite legible. Mostly, the letters don't stray far from traditional letter forms, they just have rounded corners on the strokes; some slight wiggles in the strokes, a couple of unexpectedly curved lines and a slightly tilted form or two. There are other Handwriting fonts out there that find the same balance between imperfect handwriting and systematic structure. Myndraine and Amatic Small Caps both fall into this category, and both are Web Fonts.
Handwriting fonts aren't recognized in the five families of Type, and many are not appropriate for extended amounts of text, but we need to recognize them as a popular element in web design. If we don't talk about and critically analyze Handwriting fonts we can't find the best ones to use and we can't expect to have more high quality Handwriting fonts to choose from in the future.
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.