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:
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:
Now, let's look at numbers in a typeface for a bit. Numbers fall under these two buckets:
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:
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:
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.
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.