Pairing fonts is not an exact science, but a general rule designers like to follow is opposites attract. Two fonts need to have enough visual contrast to pair well together. While not all complementary pairings follow that rule, it might be a good place to start. By using attributes like color, size, weight and classification you can create a pairing of “opposites.” Here are a few examples of good ecommerce font pairings using a free resource we love – Google Fonts.
Crimson Text Regular and Source Sans Pro Regular
Combining a sans serif with a serif is one of the most popular font pairings. Here, I’ve chosen to use a serif called Crimson Text with a sans serif, Source Sans Pro. This classic pairing has a calming affect on viewers, and would look great with skincare, spa and yoga related sites.
Lato Light and Lato Regular
Sometimes using different fonts in the same family can work as well, but make sure you create adequate visual contrast between the two. For a sleek look, I’ve paired Lato Light in a bigger size with Lato Regular at a smaller size. This combination will work well with fashion and jewelry sites.
Luckiest Guy and Bitter Regular
For more fun and playful sites, you might want to choose a display typeface that showcases your brand’s youthful personality. Here, I’ve used a playful typeface called Luckiest Guy in combination with a slab serif, Bitter. This grouping will go well with stores selling products for children.
Montserrat Bold and Roboto Regular
Sometimes you just need a nice clean font pairing. While two sans serifs aren’t exactly opposites of each other, I’ve used font weight to create more contrast between the two fonts. Montserrat Bold is a heavy font that works well with the lighter Roboto Regular. This pairing can be seen on stores selling electronics or industrial parts.
Raleway Bold and Source Code Pro Regular
Using a combination of color, size, weight and classification, I created a font pairing with Raleway Bold and Source Code Pro Regular. This union creates a masculine personality that fits will menswear.
Selecting font pairings might be daunting, but hopefully you can use these examples to create your own font pairings. Using attributes like color, size, weight and classification, you can create a duo that works well together. If you need help choosing the right typeface for your store, take a look at Typography 101: How to Choose the Right Fonts for Your Website. If you have no idea what typography even is, read An Introduction to the Power of Typography.