Making font combinations that work [Infographics]

Picking up the right font combinations that go with the mood of your apps and websites and to keep users focused on the content rather than the typefaces used can be a daunting task. Today we have brought an Infographics from Designmantic that explains the basics behind making font combinations that work.

In words of Designmantic author,

“Even though typography is an art and art is supposed to be subjective with minimal parameters, these rules can still be applied in order to save time and too much experimentation!”

Tap on image for Larger Version

font combinations infographics

via DesignMantic.com

As the infographic says, one needs to know about the different font-families first before making a font combination. Each font type has a personality of its own. It is therefore also good to have an understanding of the font psychology before choosing fonts as this can make or break your design.

While contrast is the key to a successful font-combination, combining a serif font with a sans-serif is one of the most popular font-combinations.

A few weeks ago we did a makeover of the Super Dev Resources site and one of the steps involved was to choose typefaces for our content. After trying out gazillions of font combinations, we finally decided on using Open Sans, a popular Sans Serif font, for both our headings and body text as it provides excellent legibility at different point sizes. It is a free font available on Google Fonts as well as many other free fonts sites.

Recommended: Sites to Download Best Free Fonts for Your Apps and Websites

Though typography is quite open ended and there are no rigid rules, still to have knowledge of the basic practices for making font combinations can always come handy. In the end you have to trust your eyes and instincts when choosing typefaces for your own projects. Tools like Fontjoy can be used when you are experimenting with fonts. And in case you are drawing inspiration from others, tools which identify fonts can come in handy.

Leave a Comment