Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Design and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Beginner
The third concept on foundational topics in web design is typography and choosing the right web fonts. Typography for the web was very limited up until recently with the introduction of free web fonts. In this lesson, we will examine the differences between web-safe fonts and web fonts as well as explore 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 that they need to be already installed on a visitors device, such as a computer or a tablet or a smart phone.
And since there are different fonts installed on Macs and PC's, the list of web-safe fonts is actually really small. And since there's no guarantee if a 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 fallback. So, for instance, you could specify that Verdana is your main web-safe font, and then have Arial, Helvetica, and Sans Serif as 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 and over again year after year, they start to feel stifling. Web fonts are quite a bit different from web-safe fonts. For starters, they're platform independent, which means that they do not need to be installed on a visitor's device. What's more, there are hundreds of options for you to choose from, so you can more easily express yourself with a particular font.
Web fonts use the @font-face selector in CSS along with a link in the head area of your web font source or a jQuery library. And you may create font sets with up to four fonts as fallback just as you could with web-safe fonts. Lastly, web fonts are hosted fonts so that you do not need to install any software or host any fonts yourself though you could if you wanted to. Typically, you get your web fonts from a subscription-based or free library of hosted fonts.
Here's a list of a few popular web font resources online. Including the popular Google Fonts, Typekit, AdobeEdge fonts, and Font Squirrel. As you learn 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. When selecting fonts for a website, it's often useful to choose fonts that are complimentary rather than being too similar.
Here are five pro font pairing tips. The first is contrast. Think in contrasts such as heavy and light. Curvy and straight. What definitely doesn't work, are when two fonts look too similar like this. Definitely too similar. Second, play with scale. Large with large. Large with Small. Or small with medium. Next is tone. Try to match your text and tone.
Make sure you choose fonts that fit the tone of your copy. For instance, the word summer should have a summery feel. Just as the words prickly pear should feel prickly. The word hotdog should invoke a hotdog. And the word sunshine should make you think of sunshine. Next, go big with scripts and slabs. For some reason, these two look really great together. Use script for the most important word. And a slab or sans serif for the rest of your copy. Last, be courageous. Try pairing fonts with a lot of contrast, like a curvaceous font with lots of fills and a modern font with clean lines.
You can also try pairing a bold slab serif with a whimsical serif italic. Alternatively, you can pair fonts that have a similar vibe to convey a stronger message, such as pairing a wide rounded sans serif with a tall angular sans serif. You can also find some font pairing suggestions on Google's web font directory. When you see a font you like, click the little popup icon next to the add to collection button. Then click the pairings tab and you can see how your selected font pairs with other fonts.
In addition to playing with the weight, size, form, style, leading, and color of your fonts, try exploring other techniques like overlapping texts, adding flat shadows, using inline fonts, letting your text touch, and playing with letter case. Use your best judgement to choose the right fonts for the job. And above all, remember that in addition to readability, your fonts are there to help convey meaning in a harmonious way.