10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

Advertise Here

A Beginners Guide to Pairing Fonts

Ian Yates on Jan 26th 2012 with 64 comments Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Lets see if we can alleviate any headaches. This guide will help you get started with font pairing for the web. Luckily, typography has been around a lo-oong time. Typographic rules and conventions have had plenty of opportunity to establish themselves and there are loads of resources to help you out. The only problem is that by searching the internet youre only going to find yourself confronted with millions of conflicting opinions! Lets see if we can clarify a few things. Heres a quick breakdown of what well cover in this guide: Your Aim How Many Fonts Should I Use? To Buy or Not to Buy? Whats the Nature of my Content? How Do I Achieve Successful Pairing? Pairing 1: Concord Pairing 2: Contrast Pairing 3: Conflict

Your Aim
Keep the essentials in mind. When youre selecting multiple fonts to work together its crucial that you maintain both unity and variety.

How Many Fonts Should I Use?

How many fonts you throw into the mix is entirely up to you, but bear in mind the overall effect youre trying to
webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/ 1/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

achieve. Fonts, like people, have personalities. And fonts personalities, just like those of people, can sometimes clash. Think of your fonts as table guests at a wedding reception; one entertainer is usually enough as too many strong personalities can make the atmosphere awkward, like an episode of Big Brother. Make sure that there is some charisma in the group though; eight people with little to say just results in a toecurling wait for the speeches..

Its no longer around, but the Fusion Ads 2011 bundle site sicks in my mind as a great example of successful stack-em-high font use. There are no rules to say you should or shouldnt use a specific number of fonts on a page layout. Using multiple fonts together can be difficult, achieving harmony is challenging, but if you manage it the result can be decorative and striking. Use fewer fonts and your task is more straight forward. Try to make the best of both worlds by selecting fonts with multiple variants and weights. In this way you can take advantage of an array of styles, safe in the knowledge that theyll compliment each other just fine.

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

2/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

To Buy or Not to Buy?

There are loads of free services through which you can take advantage of @font-face: google fonts, fonts.com, fontsquirrels font kit generator, but dont immediately discount paying for fonts if the project warrants it. The cost of a single domain license can vary, but there are several advantages to shelling out. Quality. The care and attention which goes into the production of commercial fonts is usually evident in the quality. Thats not to suggest the designers behind free fonts are caged monkeys, far from it, but there is often a qualitative difference. Its a difference noticeable in the finer details; the line thicknesses, the forms, the white space and the kerning (spacing between characters). Compare these two similar fonts..

Quicksand and Museo Sans Rounded The kerning executed with Museo is superior. Without some tinkering, the kerning in Quicksand is imperfect (focus on the o and the i for example), and tinkering with kerning on the web isnt hugely intuitive. There are tools, kern.js for example, which allow you to specify kerning on a per-character basis, but large bodies of text make this impractical. Big deal, the difference is barely perceptible! you may say, but the devils in the details. So my Nan tells me. Originality. Another advantage is the opportunity to stand out with original work. Having paid for your fonts, theres a greater chance your design will retain an element of uniqueness. Community. Putting your hand in your pocket is also a way of encouraging the growth of the industry. Foundries rely on healthy commerce to continue their craft. In any case, were looking at a cost which can be factored into the project and passed on to the client.

Whats the Nature of my Content?

When selecting fonts its important to consider the nature of the layout youre dealing with. Are we talking mainly body copy? Are there multiple headings, sub-headings? Perhaps its a magazine layout with decks, blockquotes?
webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/ 3/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

When using multiple fonts make sure that the roles are clearly established; if one font is used as a sub-heading, dont switch to another font for a sub-heading elsewhere. Keep a fonts purpose clear. For the time being, well keep things straight forward and select a few font pairs. Well consider the circumstances under which theyll work well together, and ask ourselves why.

How Do I Achieve Successful Pairing?

You might have already heard this; successful pairing relies on concord, or contrast, but not conflict. That is to say your selected fonts can work well together by sharing certain qualities, or by being completely different from one another. However, font pairs can conflict in a number of ways being too similar being just one. Lets examine each of the successful possibilities.

Pairing 1: Concord
Describing two fonts as having concordance suggests the presence of the same trait in both of them. Perhaps their kerning is similar, their proportions, their cap height. Have a look at these examples from Kerry Scott Jenkins and youll notice clear proportional similarities. One way of achieving concordance between fonts is to pair two from the same family. If theyre family, theyre bound to get on well, right?! In any case, the Droid family, designed by Steve Matteson for use on Googles Android devices, comprises various weights and styles, with serif and sans-serif faces. Perhaps a bit un imaginative, but these two work very well together. One or the other takes charge of headings, the other the body text.

Droid Serif and Droid Sans Either way round is a great combination.

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

4/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

Droid Sans and Droid Serif Theyre clean and modern, plus (as youd expect) theyre well suited for the web and smaller devices on account of their large x-height. The x-height of a font describes the height from the base line to the upper reaches of the lower case characters, like the x. A proportionately large x-height helps with readability. And these two both share that quality.

Equally, fonts from the same designer often share qualities which help them achieve harmony. Look at the surprisingly similar proportions these two fonts display (check out the o)..

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

5/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

Cowboyslang and Supria Sans Condensed by Hannes von Dhren Pay attention to the line quality of two typefaces. They may at first appear to have nothing in common, but two crisply executed fonts may work better together than youd think:

Bevan and Arapey Italic Softer lines together can be just as effective:

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

6/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

Anodyne and Poulaire

Pairing 2: Contrast
Contrast between fonts often lends a winning combination, but in what ways can fonts contrast? Here are just some qualities to look for: Style: Take a look at any font resource site and youll see them categorized as Blackletter, Monospace, Script, Slab Serif etc. Fonts of different styles will often contrast. Size: Big font, little font. Say no more. Weight: Varying the weight of fonts is a common way to establish visual hierarchy. Hierarchy achieved by contrast. Form: Consider the proportions of a typeface. The relative length of the descenders, the curvature of the shoulders, the direction of the movement. Color: Not something were going to go into here, but color can easily determine whether two fonts work well together.
webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/ 7/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

At its most simple, consider the contrast between serif and sans-serif fonts.

Its a classic way of pairing; take a decorative serif for the heading and a sure-footed sans-serif for the body. Or take a no-nonsense sans-serif for the headings, with a pleasantly legible serif for the body. A winner in many cases. Lets look at a few, kicking off with two system fonts. Thats right, even they can work well together.

Georgia and Arial Where can you see these two in action? Have a look at the skeleton boilerplate. Stripped of all superfluous styling, Georgia and Arial work perfectly in this environment.

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

8/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

For a little more refinement..

PT Serif and PT Sans Dont forget the role of whatever text youre choosing fonts for. In the cases above, weve shown hierarchy through font-size; the headings are larger than the body text. There are other ways of establishing whos the boss, weight being an obvious one.

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

9/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

Lora Bold and Istok Web Lets say were not concerned with an entirely textual page layout. Perhaps were dealing with two headings and nothing more (an Under Construction message, for example). We can afford to be a little more adventurous as we dont have to account for long measures or large bodies of text. How about a striking h1, coupled with a reinforcing h2? Condensed fonts always work well to get your attention, as they take up a lot of vertical real estate.

Bebas Neue and Alex Brush Heres an example of a similar combination working very nicely:

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

10/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

The distinctive work of Gerren Lamson and Simon Walker And for those of you interested, heres a breakdown of what those typefaces are: Script: Scriptorama Tradeshow JF Body copy: Actor (Google Web Fonts) Heading: Custom typeface by Simon Walker And again, utterly contrasting qualities, yet a clear hierarchy through color which prevents either from stepping on the others toes..

Or how about two straight-playing sans-serif buddies? The next main heading (Conqueror) is an inline font designed expressly for titling. With it being an uppercase font, you might need to expand the letter-spacing a bit, as done in the example below. Inline describes a typeface with white lines appearing inside the character strokes. fonts.com Sadly, its not available as a web font (yet) so youll have to make do with it for pixel design at the moment.. Its definitely one of my favorite fonts at the moment.

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

11/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

AW Conqueror Inline and Gudea Take this slab serif font; minimum effort, maximum impact.

Alpha Slab One and Mako Slab serifs make very effective attention grabbers, but can be a bit pushy if youre not careful. Bull in a china shop sort of thing. The above example works actually very well with its more delicate partner, because it contrasts whilst also sharing some personality traits. They appear to be very different fonts, but if you examine the curves, youll see theyre not as dissimilar as youd first think. Some fonts are just so delicious that you almost cant fail. Take Buttermilk for example; sumptuous, elaborate and decorative. It will look great whatever you pair it with (as long as you dont try to steal its thunder!) Here we have
webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/ 12/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

pairing with Georgia:

Buttermilk and Georgia And with Aller, an equally subtle sans-serif: Buttermilk and Aller Then this was going to be my example of pairing it with a clashing personality too strong in its own right. But you know what? I can live with this, its actually quite nice! I guess sometimes you can never tell.. Buttermilk and Eccentric

Pairing 3: Conflict
Lets not focus too much on what doesnt work well, we dont want to sour the joyous combinations in the rest of this guide do we? That said, lets just illustrate how two fonts, which are arguably too similar, can look awkward together. Almendra and Stoke But why dont they work well together? I thought the idea was to contrast whilst ensuring an element of unity? Theyre different styles; ones a Blackletter, the other Roman serif, check. They have different proportions; ones condensed with a relatively large x-height, the other more extended with taller ascenders, check. Yet they share weight and size, and both share those odd spurs on the end of each character.

Therein lies the problem. By sharing those last three details (weight, size and decoration) theyve become too
webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/ 13/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

alike. Theyre performing very similar roles, but the small differences are conflicting which makes for an awkward overall effect. The curvatures of the spurs, for example, are completely at odds with one another:

Their axes are just off:

And the way a Blackletters formed gives it a slight direction, as opposed to the vertical nature of the Roman:.

These differences might not be a problem in other examples, but here we have two fonts which (at first glance) appear the same. Its a bit like when you see a celebrity standing next to their waxwork model at Madame Toussauds. Its never comfortable to look at. Its difficult to attribute working or not working to facts and figures, normally it will be a feeling you get, youll just know. Once youve concluded that you dont like a font pairing, try to work out why and it will help you make decisions more quickly in the future.

Conclusion
I hope your approach to pairing fonts has been simplified by this beginners guide. If theres one important rule you should take away from this its You wont know until you try! Be adventurous. As web designers we have an ever-growing repository of fonts available for use in our designs. Consider the fundamentals, then experiment. Youll undoubtedly be surprised by what you find.
Like 754 people like this. Be the first of your friends.

Tags: Beginners Guidefontspairing

By Ian Yates
Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

14/15

10/15/12

A Beginners Guide to Pairing Fonts | Webdesigntuts+

webdesign.tutsplus.com/articles/typographyarticles/abeginnersguidetopairingfonts/

15/15