Join Sue Jenkins for an in-depth discussion in this video Pairing fonts for the web, part of Productivity Tips for Web Designers.
- Hi everyone, this is Sue Jenkins with Productivity Tips for Web Designers. In this lesson, I'll show you four general guidlines for successful font pairing on the web as well as show you a handful of sample Google Font pairings. While there are no specific rules for creating successful font pairings you can follow my four basic font pairing guidelines to increase your chances of making smart font selections. The first is to match the font personality with the content. Next, is to set a hierarchy of meaning, then you'll follow the basic pairing rule and end with limiting your font usage.
Let's consider each of these in more detail. All fonts have character that communicates more than just the words that they represent. Think of it like people at a gathering; some fonts just have more distinct personalities than others. So when you are choosing your fonts for your headings and your paragraphs consider the mood that you want to convey and choose the fonts that have the right personality to match your content. Certainly the fonts you choose for a bridal website would be very different from the ones you choose for a law firm or a site that sells children's toys.
One of your goals as a designer is to choose fonts that will convey the importance and authority of meaning. So you really need to guide the reader with your typographic choices so that they'll intuitively understand which parts of the layout are more important than others. To do this successfully, you need to consider the content and then choose the fonts that will make each area in your layout distinct while still maintaining a sense of harmony and visual interest throughout the entire layout.
Strive to choose appealing contrasts. And that goes for color, for size, style, weight, line height, form, everything. The visual hierarchy that you create helps the reader know where to look. If you're ever unsure of whether your choices are working, try squinting at the blocks of text. Each section should be clearly defined rather than looking like they all run together into a single block. If it looks like one or more sections are combined, go back and adjust your font size, your font face, your line height or anything else until each of the areas look distinct.
If you try the squint test on this example, the fonts on the left tend to run together while the fonts on the right seem separate and distinct. The basic font pairing rule helps you create a sense of visual interest by pairing contrasting font styles like a Serif and a San Serif. For example, if you choose a Serif for your headings, you'll want to choose a San Serif for your body text or vice versa. If you don't follow this rule and pair fonts in the same style, your text can start to look a little bit monotonous and be unappealing to the reader.
So to keep your readers engaged but not distracted try using a contrasting font pairing like Serif, San Serif. How many fonts should you use in a web design? At most you will only need about two to three fonts for each web site. Yes, only two to three. One is your primary font for your headings, another as your secondary for body text and a third, if needed, for content accents like your navigation, author name or blog details. Then follow the basic pairing rule when choosing your primary and secondary fonts.
If you do choose to add a third or even a fourth font to your site, avoid pairing fonts with similar styles like two display fonts or two script fonts. Instead, consider one of these two suggestions. Either try a more dramatic display font for heading one while you use your Serif, San Serif font pairing for your headings two through six or instead of introducing an additional font you could actually use font styles from the same family if both Serif and San Serif are available.
Fonts in the same family will have built-in compatibility with the fonts that you're already using. So for instance, if you use the Merriweather Google Font for your headings, you could use the Merriweather San Serif font for your paragraph text. Then if additional styles are needed, both fonts come in several Roman and italics styles as well as bold weights. Google Fonts like Noto and Droid also come in Serif, San Serif versions. And remember, when you choose fonts from the same family it really helps to make typography more seamless with the content so the reader barely notices it.
Now that we've reviewed the four font pairing guidelines, let's go switch over to Dreamweaver and take a look at some Google Font combos. In Dreamweaver you can actually preview Google Fonts by clicking the live button at the top of the document workspace. So this first set of fonts pairs Bevan, Droid Serif and Arimo. And I'll just scroll down to show you a few others. Here we have Oswald, Playfair Display and Open Sans. Next is Amatic SC and Roboto Condensed.
We have Patua One and Raleway. And Alpha Slab One with Roboto and Corben. In addition to Google Fonts there are several wonderful free web font resources online. Here's a listing of a few of my favorites including Google Fonts, Typekit, AdobeEdge Webfonts, Font Shop, Fonts.com and Font Squirrel. Pairing fonts is a skill that takes a lot of practice, some might even call it an art. And when it's done well, a successfull font pairing can really add visual interest and improve readability.
The best way to see if a pairing will work is to go ahead and test it out yourself. Google Fonts offers suggested font pairings when you click on a font's pop out menu. That's the third button on the right, you get a pop up window and one of the tabs is Pairings and if you scroll down you'll see the different font pairings that they suggest like Open Sans with Oswald. You can also play with Google Font selection on the Typecast.com website. Here you can put in your own text and choose from several fonts.
Another great tool is Typetester, there is three places for you to choose from. The web safe fonts, Google Fonts or you could even specify your own fonts. Choose the size, leading, tracking, etc. and then compare them side by side. And one of my favorite tools to use is The Web Font Combinator. Again, there's three lines of text and you can choose from different Google Fonts, play with the size, the line height and the color and see how that looks before you add the fonts to your cascading style sheets. Make it your goal with every web project to choose your web fonts thoughtfully.
The more you pair them successfully, the better you'll get at it and the more likely your designs will look polished and professional.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.