Episode 56 - Fonts in your Shopify Store

The Podcast

---

Show Links

• Display of all Shopify fonts
• My recommended Shopify fonts
• Overlap of Klaviyo and Shopify fonts
• Klaviyo (affiliate link)

---

Help the Podcast

---

Transcript

Hey.  Scott Austin here.

In this episode, I'm going to talk about fonts. This is meant to be a basic primer on typography.   So I'll talk about some the vocabulary that defines fonts.  Then I'll give you some advice on how to pick fonts for your Shopify store. 

Lets start with some basics about fonts

Fonts fall into the following groupings:

1. Serif - Serif letters has small extensions at the end of the lines.  Like you see in typical newspaper print.  Times New Roman is common serif font.
2. Sans-Serif.  Sans letters have clean lines without serifs.  Examples are Helvetica and Arial.
3. Script.  Script fonts have very ornate letters like you would see on a wedding invitation.   Shopify doesn't have many script fonts which is appropriate as their use should be limited in ecommerce stores. 
4. Handwritten - handwritten fonts look like handwriting.  Shopify only provides a couple of them which is unfortunate, because when properly used, they can make a site look more personal.
5. Slab - slab is subset of serif fonts.  In slab, the serifs are less curved and more horizontal lines at the top and bottom.  A capital I that looks like a beam is an example of a slab font.
6. Monospace - monospace letters all take up the same amount of horizontal space.  Just like typewriters did, for those of you that remember typewriters.  Monospace is not as readable sans or serif and is usually used to represent computer code.

Now when I look at a bunch of different fonts, it used to be hard for me to see the differences between them.  With some highly stylized fonts, it's easy to see the differences.  But with fonts that are more similar, it takes a trained eye to spot the differences.  What helped me was understanding how fonts treat the geometry of the letters differently.  Here are some terms about typography that can also help you identify the differences in fonts:

1. Cap Height - the height at which the top of capital letters go.  Tall small letters like d or l can stop below the cap height, go to the cap height or go above the cap height.  But usually, all capital letters will go to the same height.
2. Base Line - the starting point for most upper case and lower case letters.
3. X-Height - the height of the lower case letters.  Fonts with a low x-height may look stylized, but low x-heights makes the text harder to read.  Fonts with high x-height may make it difficult for the reader to distinguish between small and capital letters.
4. Descenders - lower case letters that extend below the base line.  Typical letters that do this include g, j, p, q and y.
5. Ascenders - tall lower case letters that extend above the x-height.  Typical letters that do this include b, d, f, h, k, l, and t.
6. Contrast - this how the thickness of the line varies throughout a letter.  In a no-contrast font like Helvetica, the line thickness is always the same.  In a high-contrast font like Goudy Old Style, the vertical parts of the line are much thicker than the horizontal parts of the line.
7. Letter-Spacing - the horizontal space between letters in the same word.  Too close and too far apart are harder to read.  That said, the larger the font size, the more acceptable it is for the letters to be closer together.
8. Weight - Weight is the varying of the thickness of the lines for a given use, like Bold.  A single font can come in multiple weights like Light, Regular and Bold.  But not all of the fonts in Shopify come in multiple weights.  I recommend sticking to those that do come in multiple weights.  As using multiple weights within a single font is a good way to differentiate the structure of the content.  Headings can have a different weight than body text.

Now, let's look at numbers in a typeface for a bit.  Numbers fall under these two buckets:

1. Old Style - old style numbers are not the same height and have descenders and ascenders.  These can be appealing when numbers are used within the copy of the site.
2. Lining Figures - Lining figures all have the same height.  This is preferred when numbers are presented on their own in tables and lists.

So that's some basics on fonts.  Now let's talk about using them in your Shopify store.  For me, the most important requirement for a font is that your customers can read them.  Some fonts are highly decorative and hard to read.  Other fonts, are only readable in large sizes like headings and are not readable when used in body text.

Its easy to spend too much time talking about and deciding upon which fonts to use in your store.  Now if you own a highly defined brand where brand consistency is super important, you've probably got your typography well defined in your brand guidelines.  So I'll talk now to the stores that don't have typography defined.  For you, I recommend you keep things simple.  Go with one or maybe two fonts.  That level of consistency will help keep the customer's attention focused on the products not the clever use of typography.  So let's give names to the two types of fonts we may have.  One is called body and that's the font used for regular copy on your site.  That font needs to be very readable and in most cases will be a sans font.  The other is called the display font.  It is used for headings and banners.  If the display font is different from the body then make sure they are different.  In other words, don't use two different sans fonts for body and display.  In the body font is sans, then use a serif or slab font for display.  Now you don't need two different fonts.  Changing the font weight and size can help differentiate between body and display.

Shopify rolled out a much larger set of 'built-in' fonts in the past couple of years.  While more fonts sounds great at first, it makes choosing one or two more complicated.  You see, they now have more than 300 fonts.  And this is one of those situations where having more options makes it harder to make a choice.  And there's no good tools provided to help you make the decision.  You can't even filter by sans or serif fonts.  And there's no preview of the font characters.

As such, I've put together a tool that lets you see the full character set of all 300+ fonts currently included in the Shopify admin.  It's a very long page, but fun to scroll through.  I'll include a link to it in the show notes. 

Now with so many choices, we need a way to pare the list of options down.  So, here are 3 different strategies that you can use in picking your fonts:

1. Going with the classics
2. Picking a font super family
3. Picking fonts also available in Klaviyo.  This of course assumes you are using Klaviyo and want consistency between fonts in your store and in your emails.

1. The Classics

There are plenty of lists that espouse the best fonts available.  So I pulled from a couple of them and cross-referenced if their selected fonts are available on Shopify.  Here are the results which I am calling my recommend Shopify fonts.  I'll have a link in the show notes that takes you to a page where you can see each font's character set.  Much of font choice is subjective, so I won't give you my take on the differences between these fonts.  I encourage you to follow the link in the show notes and see them for yourself.  Decide which you like and ask yourself why do you like it.

I came up with 9 recommended Sans fonts:

1. Din Next - comes in 6 weights and italic
2. FF Meta - comes in 8 weights and italic
3. Univers Next - comes in 9 weights and italic
4. Verdana - comes in 5 weights and italic
5. Roboto - comes in 6 weights and italic
6. Open Sans - comes in 5 weights and italic
7. Cabin - comes in 4 weights and italic
8. Lato - comes in 9 weights and italic
9. Oswald - comes in 6 weights but no italic

I also have 6 recommended Serif fonts.  I have less Serif fonts recommended than Sans fonts as most stores that are new to branding should start out with one font and that font will probably be Sans.

1. FF Meta Serif - comes in 6 weights and italic
2. Garamond - comes in 3 weights and italic
3. Rockwell - comes in 3 weights and italic
4. Sabon Next - comes in 4 weights and italic
5. Bembo Book - comes in 3 weights and italic
6. Palatino - comes in 2 weights and italic

2. Method number 2 is to use a family of fonts that match. These families are designed to complement each other. For example, the sans could be used for body while the serif or slab is used for headings.  And a condensed font could be used for buttons or menus.  Of the classics fonts that I just listed, 4 of them have more than one font that make up a font family.

1. Din - comes with a sans and a slab.
2. FF Meta - comes with a sans and a serif.
3. Open Sans - comes with a sans and a sans condensed.
4. Roboto- comes with 4 fonts: a sans, a sans condensed, a monotype and a slab.

3. Matching Klaviyo fonts. If you've listened to previous episodes, you know that I recommend Klaviyo for email. Klaviyo only provides 19 fonts to use in its email.  And of those, 8 are also provided by Shopify.  So if you want an easy way to match your website and email fonts, go with these choices:

Even though there are over 300 fonts available within the Shopify Admin, there are times when that is not enough.  In those cases, its relatively easy to add your own font to your store.  A common reason for this is to map to existing branding that is in the logo, packaging or other marketing materials.  To add your own font, check your theme developer's help site--it should have good documentation on how to add a font to the theme.  One thing to note about adding your own font is that it will not be available within the Font Picker in Theme Customization.  So you'll have to override the font settings with your added font in a CSS file.  But if you are technical enough to load your own font in the store then you'll have no problem with the CSS.

That's all I have on fonts for this episode.  Once again, check out the show notes.  It has links to pages where you can view all the fonts I've been talking about.  And as far as I know, no other place let's you view all of the available fonts.

Thanks for listening.