Start learning with our library of video tutorials taught by experts. Get started

Productivity Tips for Web Designers
Illustration by John Hersey

Productivity Tips for Web Designers

with Sue Jenkins

Video: Pairing fonts for the web

- 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.

Watch this entire course now —plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Productivity Tips for Web Designers
1h 16m Appropriate for all Jul 31, 2014 Updated Oct 16, 2014

Viewers: in countries Watching now:

Productivity Tips for Web Designers is the weekly series for web designers who want to enhance their design, software, and freelance business skills and streamline their workflow. Whether you're new to web design or working professionally as a seasoned designer, you'll discover techniques that can help you become more proficient at your craft. Tune in every Thursday for a new tip on topics including typography; SEO; design software like Illustrator, Photoshop, and Dreamweaver; and web coding in HTML and CSS.

Subjects:
Web Web Design Web Foundations
Author:
Sue Jenkins

Pairing fonts for the web

- 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.

There are currently no FAQs about Productivity Tips for Web Designers.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Productivity Tips for Web Designers.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.