Students will discover how Typography requires special consideration when choosing and using web fonts.
- [Instructor] Typography for the web was very limited to a handful of fonts, until around 2009/2010, when subscription-based TypeKit and free Google fonts came onto the scene. To make the most of your web typography knowledge, we will examine the differences between web-safe fonts and web fonts, explore the web fonts online, and discuss strategies for successful font pairings. Let's start with going over the differences between web-safe fonts and web fonts.
Web-safe fonts must be cross-platform, which means they need to be already installed on a visitors device, such as a computer, tablet, or smart phone, and since there are different fonts installed on Macs and on Pcs, the list of web-safe fonts is actually rather small. Since there is no guarantee if a website visitor will have a particular web-safe font already installed on their device, most web-safe fonts are specified in CSS as part of a font set.
Font sets ensure that unavailable fonts have a specified fall back. For example, you could specify that Verdana is your main font in your CSS, and then have Arial, Helvetica, and sans-serif as the fallbacks. To see what I mean about limited options, here is a list of 24 commonly used web-safe fonts. 24 might seem like a lot, but if you use them over and over again, they can start to feel stifling.
Web fonts are quite a bit different, and super easy to use. For starters, they are platform independent, which means they do not need to be installed on a visitors device. What's more, there are now hundreds of options for you to choose from, so you can more easily express yourself with particular fonts, while still specifying font sets with up to four fonts as fallbacks, just as you would with web-safe fonts. Google fonts require two elements to work, a simple rule in your CSS, along with a link in the head to the web fonts source.
Typically, you get your web fonts from a subscription-based, or free library of hosted fonts. Here are a few popular websites to find web fonts. There's Google fonts, Typekit, Adobe Edge Web Fonts, FontShop, fonts.com, and Font Squirrel.
As you learned while exploring fonts in the elements of design, there are a few general categories for font types. There's serif, and sans-serif, as well as display fonts, like slab serif, cursive, handwriting or script, decorative, and typewriter. Here are five pro font pairing tips for the web. First, think in contrasts, like heavy and light, and curvy and straight. What definitely doesn't work are two fonts that look too similar.
Two, play with scale. Go large and small, small and medium, or large and large. Three, match text and tone. Make sure you choose fonts that fit the tone of your copy, such as the word summer should have a summary feel, just as the word soda pop should portray an airy, bubbly vibe. Number four, go big with scripts and slabs. For some reason, these two just look great together.
Use a script for the most important word, and a slab, or sans-serif for the rest of your copy. And number five, be courageous. Try pairing fonts with a lot of contrast, like a bold curvaceous script with a thin, modern sans-serif, or a statement making display font with a whimsical italic serif. Alternately, you can pair font opposites, like a wide, rounded font with a hard edged, angular sans-serif.
You can find some great fun pairing suggestions on Google's web font directory. As your scrolling through the font directory, when you see a font that you like, first you will hover over the font, then click the see specimen option, then just scroll down the screen a little ways until you see the fun pairing options. As you click on each one, the font will change so you can see how it looks with the suggested font pair. In addition to playing with the weight, size, form, style, leading, and color of your fonts, try exploring other techniques, such as overlapping text, using inline fonts, playing with letter case, and adding flat shadows.
As you work with fonts for your own web projects, consider the five Pro font pairing tips for thinking in contrasts, playing with scale, matching text with tone, going big with scripts and slabs, and being courageous. Try something new, like overlapping text, drop shadows, inline fonts, letting text touch, and varying the letter case. Use your best judgment to choose the right fonts for the job, and above all, remember that, in addition to readability, your fonts are there to help you convey meaning in a harmonious way.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices