{"id":44930,"date":"2017-04-14T06:54:05","date_gmt":"2017-04-14T13:54:05","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=44930"},"modified":"2024-04-15T23:05:02","modified_gmt":"2024-04-16T06:05:02","slug":"how-to-pair-fonts","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/how-to-pair-fonts","title":{"rendered":"Typographic Contrast and How to Pair Fonts for Interest"},"content":{"rendered":"As a web designer<\/span><\/a> I’ve come across so much bad typography on the web. Some people don’t even understand that font selection is a significant factor in creating high-end design, opting instead for Open Sans on every project because it’s a Google font, and it’s free.<\/span>If content is king, typography is its red carpet.<\/em> Typography sets the tone for online publications, brands, and applications of every type and variety. <\/span>

<\/span>Typography Helps a Design Look Readable<\/span><\/h2>If typography looks sloppy, the interface or design feels unprofessional. If the design looks unprofessional, what does that say about the company or organization it represents? <\/span>Because customers can’t always see the product or service that the website or print publication is representing, they have to make guesses. <\/span>Guesses based on the look and feel of the website, on your photography, reviews, badges, and what is visible. And what takes up much of the page? Content – using typography. <\/span>Do they consciously think to themselves “this font pairing looks disjointed, therefore I think this company may be unprofessional”? Maybe not, but I promise you that it still affects their decision-making process subconsciously. <\/span>What about if you have a classy – very intentional and considered font pairing that grabs people’s attention and is readable and legible? They’re more likely to read the content and associate the high-end feel with your brand. <\/span>

<\/span>Typographic Contrast<\/span><\/h2>Font pairing is like color theory in that if you take two colors just a shade off from each other, the combination can look unintentional and thus unprofessional. Make sure to choose fonts that are different enough to complement each other, without looking like they’re fraternal (not identical) twins. <\/span>Here’s an example of that.<\/span>\"TypographicAre both the headline font (Surveyor Display Black) and the sub-headline font (Baskerville Bold) classy fonts? <\/span>Yes! <\/span><\/em>But the problem comes when an undiscerning eye might just perceive them as similar, which causes a connotation of messiness. <\/span>What would be better?<\/b>How about a pairing of a big blocky san-serif font (Brandon Grotesque)  as the main headline and keeping the serif Baskerville in place as the sub-headline?<\/span>\"Typographic

\n \n<\/p>

<\/span>How Many Fonts Should I Use?<\/span><\/h2>

\nYou don’t need to limit fonts to two, but make sure you can master using two before moving to three and so on. Veteran designers can wield ten fonts and still manage to make their designs look exquisite, but if you are just starting out, my suggestion is to limit yourself to two fonts until you really start to master this art – and then move on to three and master that. <\/span>\nUtilizing fonts is kind of like juggling, if you don’t know how to juggle two you won’t be able to juggle three, and using six is going to be a disaster.<\/strong>\nSimilar to juggling as well, there are a lot of designers that can juggle three, but very few who can make using six look effortless. <\/span>\n<\/p>

<\/span>Pairing Fonts for Interest<\/span><\/h2>Medium.com has <\/span>long been a advocate of clean readable typography<\/span><\/a>, and social networks like LinkedIn and Facebook have since improved the typography for people writing and reading articles on their platforms. Perhaps these sites were inspired by Medium’s very intentional approach, or at least ‘downwind’ from it. <\/span>

\n[[cb-fontpairing]]\nLinkedin’s typography for articles:<\/span>\n \n\"Linked\n \nFacebook’s instant articles:<\/span>\n\"Facebook\n \nWhy does it seem like these companies are creating a highly intentional set of fonts for readability on their platforms?<\/span>\nPeople are going to read longer.<\/em> They’re also going to likely enjoy the experience of writing on their platform – instead of their blog or other publishing options because there’s a lack of quality in, whether they realize consciously or not, the typography. The feel…. The line-height, the visual hierarchy in the headlines and the overall cohesiveness of the experience. <\/span>\nThe trick is to integrate that feeling into our designs and products.<\/span>\nBy using contrasting fonts – for instance a very bold sans-serif font, a lighter sans-serif and a bold serif font we can create variety, if you balance this with weighing the attributes and similarities in the fonts to make sure they are not so far-flug that they appear hap-hazard<\/strong> you now have interest, but also a high-end feel. <\/span>\nSo said more succinctly – fonts paired for interest should be:<\/b>\n<\/p>