Ecommerce Font Pairings that Look Good Together

FontPairings

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_Source Sans Pro

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_Lato

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_Bitter

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_Roboto

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_Source Code Pro

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.

About 

Monica Chow is a Senior Web Designer at Volusion, where she uses her six years of professional design experience to create stunning custom design websites. When not designing, you can find Monica rock climbing, cooking and snowboarding.

4 Responses to “Ecommerce Font Pairings that Look Good Together”

  1. Ama

    Looks really great…. (all) can you tell me what would be really nice font for a boutique store.

    Reply
  2. Karyn Kistler

    Hi Monica! I love the first font pairing that you use in the first graphic with text “Font Pairings”. What are those fonts? Thanks!

    Karyn

    Reply

Leave a Reply