Font Pairing for Web Design

Andrew Tuzson – Founder / CEO

I love trolling the internets. I find all sorts of juicy little nuggets while on my quest to locate the holy grail of digital content. Recently, I encountered an article that simultaneously made me cringe and laugh uncontrollably. I stumbled across an article claiming that the only two principles of great web design are colors and fonts. If your designer ever makes this statement, run away. Fast.

However, this article does raise an interesting point. Font pairing is hands down, one of the sexiest components of web design. The buttery smooth way some fonts intertwine with others is damn near sexual. The flip of that coin is pairing the wrong typefaces in web design can lead to disastrous results. That is why we thought it wise to share some rock solid font pairings for your next project. Let’s begin.

First up is Roboto and Roboto Slab. The entire Roboto font family is super slick and it looks solid in the browser. Using Roboto Slab as your header font and Roboto for your copy is a great way to create bold focal points within your copy. Throw a span tag into the mix with some color variations……brace yourself, conversions are coming.

Next, lets check out one of my all time favorite font pairings, PT Serif and PT Sans. Using PT Serif for your headers creates a sleek and modern headline with a subtle serif effect. The PT Sans typeface is well rounded and is very easy on the eyes. This pairing is one that I use often and I highly recommend.

Montserrat and Crimson Text. Montserrat is an incredible typeface and the sans serif family is a great way to create variation within your headers. Crimson Text is a clean approach to serif typefaces and it is very easy for the eyes to move over the copy, allowing for a solid layout.

A font combination that has been overlooked by many is Droid Sans and Droid Serif. This combination is similar to our third example, however this approach is more condensed. The lack of inherent kerning creates a tight setup that screams modern design. I love the sans serif headers paired with serif copy – it’s so damn sexy.

Finally, we want to share our absolute favorite font pairing, that being PT Sans and Open Sans. Man, these two fonts together look incredible and this approach will work in almost every style of design. Both the headers and copy present the user with a wicked smooth sans serif approach and the two fonts, while from different families, compliment each other incredibly well. This is the Romeo and Juliet of typefaces, expect with less tragedy and death. Basically, it’s just awesome.

Obviously, there are droves of combinations that we missed, but we wanted to share some of our favorites with you. What combinations do you love to use? We would love to hear what you’re using and perhaps we can feature your approach in our next edition of font pairings. Until next time.