Font combinations that will work great with your Shopify theme

by Michael Hill

Font combinations that will work great with your Shopify theme

Shopify’s theme customizer makes it easy for any design maven to access a myriad of Google and Monotype fonts for free without any hard work for configuration — giving you more ways to make a big impact on your Shopify store.

Font basics

In this post, we’ll be exploring some combinations of fonts that are available by default in the Shopify font picker.

In the world of fonts, serifs are small “feet” or “accents” that appear on each letter. A very popular example of a serif font is Times and Times New Roman.


In Latin, “sans” means “without” — so sans serif fonts don’t have serifs. Common examples are Arial and Helvetica.

 

Headline fonts

Headline fonts are basically what they sound like — fonts that are used for the larger “headlines,” headings, sub-headings and other short, larger blocks of text. Some fonts are better suited as headline fonts — namely because they are less legible on computer screens.

Body fonts

Body fonts are ones that are applied to larger blocks of text, such as product descriptions, paragraphs and longer snippets. In general, sans serif fonts have better readability, especially on computer screens, so most designers tend to stick to them whenever a large block of text is displayed.

That said, using sans serif fonts for body copy is not a hard and fast rule — and there are plenty of serif fonts that are still very readable. It’s just important to test and check — plus ask others to take a look since people’s levels of vision can vary greatly.

Font combinations to consider

Below is an overview of some interesting potential font combinations to use in your Shopify theme — or other design projects.

 

bio rhyme and chivo fonts

Bio Rhyme and Chivo

Bio Rhyme is unique enough to be a little fun and quirky but still easy to read. Chivo, meanwhile, is a sans serif font that has eight variants and would work well as both headline or body copy. The two fonts share that slight “flair” without overdoing it, making this an interesting combination.

 

basic commercial fonts

Basic Commercial and family

Basic Commercial is a clean, geometric font that could work well for websites ranging from high fashion to tech to children's products or home accessories. The font comes in eight variants, so it can be used on its own as both headline and body copy. There’s also a “rounded” version with three variants that has a slightly more playful look and is a bit more subtle than some other rounded style fonts.

 

itc officina fonts

ITC Officina Sans and ITC Officina Serif

As you can probably tell, these two fonts are related — which typically means they’re designed to play nice with each other. This font has a slight “techie” and structural feel to it — but has a tad bit of flair, especially the serif version. It can also work well for B2B stores, children's products or fun and games. At smaller sizes, the sans serif option can be readable, making the serif more of a headline font, but for mid-size applications the serif can work well.

 

ff meta serif and ff meta fonts

FF Meta and FF Meta Serif

These two fonts were also developed to work well together and have some similarities to Officina, though both are slightly more elegant. Technology and electronics are a natural choice for this font — but it could also be an interesting choice for high fashion or luxury items as well as food products.

 

oswald and new century schoolbook fonts

Oswald and New Century Schoolbook

This combination combines bold with classic, so it can be a good choice for handmade products, apparel and more. Oswald is a bit of a fickle font — it’s bold and condensed, but those characteristics also can make it tricky to use. That said, the font harkens back to sans serif newspaper headlines — which often used more condensed fonts to fit more letters on each line. That’s why we’re pairing it with New Century Schoolbook, an all around classic typeface that has some clear connections to newspaper body copy. In general, Oswald works best as headlines or in smaller doses.

 

abril fatface and work sans fonts

Abril Fatface and Work Sans

Abril Fatface is an incredibly distinct font with a little bit of that “vintage” feel to it. The one downside is that it’s almost always better as a headline font because it’s so thick and narrow — and it only comes in that single variation. However, pairing it with the lightweight, clear and well spaced Work Sans for body copy is a great study in contrast. This font works great for handmade goods, natural foods and beauty products and other product lines.

 

cardo and bauer bodoni fonts

Bauer Bodoni and Cardo

Bodoni is a classic typeface that’s similar to iconic fonts used in high fashion magazines, so it can be ideal for high fashion, luxury or other high-end products. Bauer Bodoni comes in a variety of styles and lighter versions can be used as body copy — though it’s important to make sure the lines in the letters don’t become too light. Meanwhile, Cardo is a nice complimentary serif font that’s a bit more legible. Additional options include some of the other sans serifs listed here, such as Work Sans and Basic Commercial.

 

alegreya fonts

Alegreya and Alegreya Sans

Here’s another two fonts that were designed to be used together — so they naturally complement each other. That said, this typeface is notable because of its unique letterforms that have some interesting strokes and curves. This combination could be great for health and beauty products or for lifestyle brands that could benefit from a bit of mystery or uniqueness.

 

Michael Hill
Michael Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn. While comments and feedback are always appreciated, Michael regrets that, due to the volume of inquires received, personal responses are not possible. For specific assistance or support with Out of the Sandbox themes, visit the help center.