A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

15
10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+ 1/15 webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/ Advertise Here A Beginner’s 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. Let’s 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 you’re only going to find yourself confronted with millions of conflicting opinions! Let’s see if we can clarify a few things. Here’s a quick breakdown of what we’ll cover in this guide: Your Aim How Many Fonts Should I Use? To Buy or Not to Buy? What’s 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 you’re selecting multiple fonts to work together it’s 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 you’re trying to

description

Tutorial ensinando como fazer pareamento de tipos em websites

Transcript of A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

Page 1: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

1/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

Advertise Here

A Beginner’s Guide to PairingFontsIan 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 whichwork together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we canalleviate 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 ofopportunity to establish themselves and there are loads of resources to help you out. The only problem is that bysearching the internet you’re only going to find yourself confronted with millions of conflicting opinions! Let’s seeif we can clarify a few things.

Here’s a quick breakdown of what we’ll cover in this guide:

Your AimHow Many Fonts Should I Use?To Buy or Not to Buy?What’s the Nature of my Content?How Do I Achieve Successful Pairing?Pairing 1: ConcordPairing 2: ContrastPairing 3: Conflict

Your AimKeep the essentials in mind. When you’re selecting multiple fonts to work together it’s crucial that you maintainboth 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 you’re trying to

Page 2: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

2/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

achieve. Fonts, like people, have personalities. And fonts’ personalities, just like those of people, can sometimesclash. Think of your fonts as table guests at a wedding reception; one entertainer is usually enough as too manystrong 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 toe-curling wait for the speeches..

It’s no longer around, but the Fusion Ads 2011 bundle site sicks in my mind as a great example of successfulstack-em-high font use.

There are no rules to say you should or shouldn’t use a specific number of fonts on a page layout. Using multiplefonts together can be difficult, achieving harmony is challenging, but if you manage it the result can be decorativeand striking. Use fewer fonts and your task is more straight forward. Try to make the best of both worlds byselecting fonts with multiple variants and weights. In this way you can take advantage of an array of styles, safe inthe knowledge that they’ll compliment each other just fine.

Page 3: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

3/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

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,fontsquirrel’s font kit generator, but don’t immediately discount paying for fonts if the project warrants it. The costof 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 thequality. That’s not to suggest the designers behind free fonts are caged monkeys, far from it, but there is often aqualitative difference. It’s a difference noticeable in the finer details; the line thicknesses, the forms, the whitespace 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 isn’t hugely intuitive. There aretools, kern.js for example, which allow you to specify kerning on a per-character basis, but large bodies of textmake this impractical.

“Big deal, the difference is barely perceptible!” you may say, but the devil’s 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,there’s 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. Foundriesrely on healthy commerce to continue their craft. In any case, we’re looking at a cost which can be factored intothe project and passed on to the client.

What’s the Nature of my Content?When selecting fonts it’s important to consider the nature of the layout you’re dealing with. Are we talking mainlybody copy? Are there multiple headings, sub-headings? Perhaps it’s a magazine layout with decks, blockquotes?

Page 4: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

4/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

When using multiple fonts make sure that the roles are clearly established; if one font is used as a sub-heading,don’t switch to another font for a sub-heading elsewhere. Keep a font’s purpose clear.

For the time being, we’ll keep things straight forward and select a few font pairs. We’ll consider the circumstancesunder which they’ll 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 sayyour selected fonts can work well together by sharing certain qualities, or by being completely different from oneanother. However, font pairs can conflict in a number of ways – being too similar being just one.

Let’s examine each of the successful possibilities.

Pairing 1: ConcordDescribing two fonts as having concordance suggests the presence of the same trait in both of them. Perhaps theirkerning is similar, their proportions, their cap height. Have a look at these examples from Kerry Scott Jenkins andyou’ll notice clear proportional similarities.

One way of achieving concordance between fonts is to pair two from the same family. If they’re family, they’rebound to get on well, right?! In any case, the Droid family, designed by Steve Matteson for use on Google’sAndroid devices, comprises various weights and styles, with serif and sans-serif faces. Perhaps a bit unimaginative, but these two work very well together. One or the other takes charge of headings, the other the bodytext.

Droid Serif and Droid Sans

Either way round is a great combination.

Page 5: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

5/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

Droid Sans and Droid Serif

They’re clean and modern, plus (as you’d expect) they’re well suited for the web and smaller devices on accountof 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 thesurprisingly similar proportions these two fonts display (check out the ‘o’)..

Page 6: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

6/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

Cowboyslang and Supria Sans Condensed by Hannes von Döhren

Pay attention to the line quality of two typefaces. They may at first appear to have nothing in common, but twocrisply executed fonts may work better together than you’d think:

Bevan and Arapey Italic

Softer lines together can be just as effective:

Page 7: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

7/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

Anodyne and Poulaire

Pairing 2: ContrastContrast between fonts often lends a winning combination, but in what ways can fonts contrast? Here are justsome qualities to look for:

Style: Take a look at any font resource site and you’ll 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 bycontrast.Form: Consider the proportions of a typeface. The relative length of the descenders, the curvature of theshoulders, the direction of the movement.Color: Not something we’re going to go into here, but color can easily determine whether two fonts workwell together.

Page 8: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

8/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

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

It’s a classic way of pairing; take a decorative serif for the heading and a sure-footed sans-serif for the body. Ortake a no-nonsense sans-serif for the headings, with a pleasantly legible serif for the body. A winner in manycases. Let’s look at a few, kicking off with two system fonts. That’s 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.

Page 9: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

9/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

For a little more refinement..

PT Serif and PT Sans

Don’t forget the role of whatever text you’re choosing fonts for. In the cases above, we’ve shown hierarchythrough font-size; the headings are larger than the body text. There are other ways of establishing who’s the boss,weight being an obvious one.

Page 10: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

10/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

Lora Bold and Istok Web

Let’s say we’re not concerned with an entirely textual page layout. Perhaps we’re dealing with two headings andnothing more (an Under Construction message, for example). We can afford to be a little more adventurous as wedon’t have to account for long measures or large bodies of text. How about a striking h1, coupled with areinforcing 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

Here’s an example of a similar combination working very nicely:

Page 11: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

11/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

The distinctive work of Gerren Lamson and Simon Walker

And for those of you interested, here’s a breakdown of what those typefaces are:

Script: Scriptorama Tradeshow JFBody 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 onthe other’s toes..

Or how about two straight-playing sans-serif buddies? The next main heading (Conqueror) is an inline fontdesigned 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, it’s not available as a web font (yet) so you’ll have to make do with it for pixel design at the moment.. It’sdefinitely one of my favorite fonts at the moment.

Page 12: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

12/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

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 you’re not careful. Bull in a china shopsort of thing. The above example works actually very well with its more delicate partner, because it contrastswhilst also sharing some personality traits. They appear to be very different fonts, but if you examine the curves,you’ll see they’re not as dissimilar as you’d first think.

Some fonts are just so delicious that you almost can’t fail. Take Buttermilk for example; sumptuous, elaborate anddecorative. It will look great whatever you pair it with (as long as you don’t try to steal its thunder!) Here we have

Page 13: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

13/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

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. Butyou know what? I can live with this, it’s actually quite nice! I guess sometimes you can never tell..

Buttermilk and Eccentric

Pairing 3: ConflictLet’s not focus too much on what doesn’t work well, we don’t want to sour the joyous combinations in the rest ofthis guide do we? That said, let’s just illustrate how two fonts, which are arguably too similar, can look awkwardtogether.

Almendra and Stoke

But why don’t they work well together? I thought the idea was to contrast whilst ensuring an element of unity?

They’re different styles; one’s a Blackletter, the other Roman serif, check.

They have different proportions; one’s condensed with a relatively large x-height, the other more extended withtaller 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) they’ve become too

Page 14: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

14/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/

alike. They’re performing very similar roles, but the small differences are conflicting which makes for an awkwardoverall effect.

The curvatures of the spurs, for example, are completely at odds with one another:

Their axes are just ‘off’:

And the way a Blackletter’s 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. It’s a bit like when you see a celebrity standing next to their waxwork model at MadameToussauds. It’s never comfortable to look at.

It’s difficult to attribute ‘working’ or ‘not working’ to facts and figures, normally it will be a feeling you get, you’lljust know. Once you’ve concluded that you don’t like a font pairing, try to work out why and it will help youmake decisions more quickly in the future.

ConclusionI hope your approach to pairing fonts has been simplified by this beginners’ guide. If there’s one important ruleyou should take away from this it’s “You won’t 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. You’ll undoubtedly be surprised by what you find.

Tags: Beginner’s Guidefontspairing

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

Like 754 people like this. Be the first of yourfriends.

Page 15: A Beginner’s Guide to Pairing Fonts _ Webdesigntuts

10/15/12 A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

15/15webdesign.tutsplus.com/articles/typography‑articles/a‑beginners‑guide‑to‑pairing‑fonts/