small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

From Design System to ‘NFT Design System’: Creating TinyFaces

<p>Published on <a href="https://blog.prototypr.io/the-no-nonsense-guide-to-font-pairing-64e4ead688a6?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> martinollivere <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_pJoVieTz3pAZ5B_9_Mgdg.jpeg"></p>
<p>The business of pairing compatible fonts is a tricky one and involves more intuition that science. Indeed the first thing to note is that there are no hard and fast rules. A grasp of some fundamental principles however can make for more harmonious font pairings in our typography design systems.</p>
<p>Being typographically challenged myself, the development of <a href="https://archetypeapp.com/">Archetype</a> (a tool I needed to help create typography designs more easily) enabled me to dig deeper into the accepted best practices of font pairing and consolidate the core concepts with associated dos and don’ts here in this time-sensitive guide. Without further ado, let’s get on with it:</p>
<h3><strong>1: Select Appropriate Font Personalities</strong></h3>
<ul>
<li>Pick fonts that exude the appropriate personalities for the job at hand, observe thus:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NGfhUO429jvaMGMJqPax-Q.jpeg">Lora Regular: Maybe. Gorditas Bold: Maybe not…</p>
<ul>
<li>Try and pair one font with a more overt personality with a second that is more neutral to establish an obvious hierarchy and avoid a battle for attention:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YiwYPaMzN9e7m9qi_1q91g.jpeg">Abril Fatface doesn’t fight for attention with neutral Lato like it does with the more distinct Aldrich</p>
<ul>
<li>Avoid combining fonts with conflicting personalities for obvious reasons:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4Aa6jqbYO2nLcIA_eUrfsw.jpeg">Elegant, vintage Pinyon Script hates child-like and friendly Fresca</p>
<ul>
<li>Avoiding well worn design clichés will lead to more unique, refined outcomes. A design cliché is often the most obvious thing that comes to mind when imagining a solution because it has become so overused (e.g wacky fonts for anything ‘fun’):</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8zpkDuC7EvZHmD9Idqkb1Q.jpeg">Avoid design clichés in applications that scream for fonts with certain personalities (fun and friendly in this case)</p>
<h3>2: Create Visual Contrast</h3>
<ul>
<li>It’s essential to establish the hierarchy of typography elements on the page by creating a high visual contrast, that is to say the visual differences need to be obvious enough to instantly understand the relative importance of each element:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9y9J47hm78_Y8bd2lngN6A.jpeg">Go for big visual differences in size, weight, spacing and font features to create a high contrast and clear visual hierarchy</p>
<ul>
<li>Assign roles for each font in your typography design and apply them consistently (usually the clearer and fewer the roles the better). For example you may have one font that is only used for specific types of headings and nothing else.</li>
<li>Limiting yourself to just using 2 or 3 fonts in your design can make it easier to assign and stick to specific roles for each font (especially if you’re just starting out).</li>
<li>Using different weights and styles from the same font family is sometimes a simpler way to create a high level of contrast whilst maintaining visual harmony between elements.</li>
<li>Obvious one but vary the size of each font to strike the right contrast balance. The same two fonts can pair beautifully at certain ratios and form an indistinguishable muddle at others:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Qso09pMrIdhPqZ0S23DT1Q.jpeg">Source Sans Pro + Merriweather demonstrating how the right sizing ratio can create higher visual contrast</p>
<ul>
<li>Try varying the line-height (leading), letter-spacing (tracking) and the spacing between elements to find a pleasing visual contrast (utterly shameless but this is very easy to do in <a href="https://archetypeapp.com/">Archetype</a>).</li>
<li>Stand back and squint at your font pairing/typography elements. If they all blur into one amorphous blob, you need to create more contrast, the visual hierarchy should still be obvious:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qo12X44RVI2pJzHUH8HkTw.jpeg">Perform a regular ‘squint test’ to ensure you have enough visual contrast between your fonts and typography elements</p>
<ul>
<li>Beware, font pairs with too much contrast look unbalanced in larger blocks of text. They can however sit more happily together in logos or other such minimal-text applications:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xGwiBO9bx2aw09UgQhczsA.jpeg">Fonts with too much contrast cause imbalance in larger text blocks. They can work for applications such as logos where minimal text is used</p>
<ul>
<li>Only use weights and styles that the font was designed with. e.g. Don’t artificially bold it using CSS if no bold version exists, it won’t look natural and you’ll go straight to design hell.</li>
</ul>
<h3>3: Compliment Not Clash</h3>
<ul>
<li>Pairing a sans-serif with a serif font is one of the most tried and tested routes to typographic harmony:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UtdnrrS45IdqjxMqRpy-Tg.jpeg">Oswald Bold + Droid Serif and Merriweather Bold + Open Sans Regular are examples of sans+serif font pairings</p>
<ul>
<li>Fonts that share a couple of roughly similar traits (e.g. x-height or glyph width) tend to sit alongside each other more agreeably than those that don’t:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RONhkrP_D62QL0yrkIRBoQ.jpeg">Merriweather Bold + Open Sans Regular share some similar basic letter shapes, x-heights and glyph widths.</p>
<ul>
<li>Fonts displaying similarities between their fundamental shapes (certain letters for example) can be more complimentary than those with noticeable differences (see above).</li>
<li>Strive to pair fonts from different <a href="https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications">classifications</a> to avoid an unseemly clash of font features. For example pairing two slab-serif fonts where the serifs themselves have noticeably different styles can look incongruous:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7U90l4pnktmoV9Erej3IHw.jpeg">Two fonts from the same classification: Droid Slab + Josefin Slab look awkward together</p>
<ul>
<li>Pairing fonts from the same time period that contain different features will often produce congenial results.</li>
</ul>
<h3><strong>And if in Doubt…</strong></h3>
<p>Pairing a sans-serif header font with a distinctive personality alongside a more neutral serif body font is the ‘old faithful’ of typography design.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FylO10rfWOwiYf_pCec5Lw.jpeg">Montserrat Semi Bold+ Lora Regular</p>
<h3>A Few Useful Font Pairing Resources</h3>
<ul>
<li><a href="https://archetypeapp.com/">Archetype</a></li>
<li><a href="http://typ.io/">Typ.io</a></li>
<li><a href="https://fonts.google.com/">Google Fonts</a></li>
<li><a href="http://fontpair.co/">FontPair</a></li>
<li><a href="https://www.typewolf.com">Typewolf</a></li>
</ul>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=64e4ead688a6" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/the-no-nonsense-guide-to-font-pairing-64e4ead688a6">The No-Nonsense Guide to Font Pairing</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


The No-Nonsense Guide to Font Pairing

The No-Nonsense Guide to Font Pairing

Top Stories