DIY Design Webinar Part 1: Picking the Perfect Font

This summer we're bringing you five weeks of webinars based on design-related goodness. This week, in our first episode, we discuss how to pick the perfect font — and how to avoid choosing the wrong typeface for your store.



Can't watch the video right now? No sweat: we have the transcription right here:

Fonts speaks volume about your brand, and can be crucial to your online store success. However, selecting fonts for your online store doesn't have to be daunting. In today's DIY design tips, we'll go over the proper tips for determining the right fonts for your website.

Before we jump in, here's a crash course in different font styles. Understanding these will come in handy as we go over each tip. The first is Serif:

Screen-Shot-2018-07-24-at-8.34.14-AM

Serif Fonts have small projecting features called serifs at the end of each stroke. Oftentimes they're referred to as the "feet" of the letter form. Serif Fonts are known for their sophisticated, elegant qualities.

Next: Sans Serif. Sans Serif letter forms have no serifs or feet:

Screen-Shot-2018-07-24-at-8.36.39-AM

These are the most commonly used fonts on the web because they are the easiest to read. For modern flair, Sans Serifs are great option.

The last fonts style you need to know is Script. A Script Font oftentimes mimics calligraphy, and is commonly use as a display font for headlines. It's not recommended for body text.

Screen-Shot-2018-07-24-at-8.37.19-AM

Now, that you're up to speed, let's dive in. The first thing you'll want to consider when choosing a font for your website is appropriateness. Just like you want to dress for the occasion, your store should be dressed with fonts that appropriately reflect your brand. Let's use the Coach website as an example. With high-end products, its target audience expects an online shopping experience to match.

Screen-Shot-2018-07-24-at-8.38.12-AM

The fonts here are refined, sophisticated and accurately represent the brand. If Coach changed one of their fonts to a Script font like Yellowtail, the mood would instantly change, and suddenly your entire experience and perception of the brand would be different. Remember, typefaces have a huge impact on your website's overall voice and mood.

Next: legibility and readability. These might sound like they're similar, but in regards to your online store, they're very different. Legibility means being able to clearly distinguish each letter. Here's an example of great versus poor legibility using the Google font Ranchers. When it's use in a headline, it looks great, and each letterform is clearly distinguishable. However, if we take it down to use as body copy, that isn't quite the case anymore:

Screen-Shot-2018-07-24-at-8.39.17-AM

The intricacies of the font make it difficult to read at a small size. Readability refers to how text is arranged so that the eye can easily read the content. Some things that affects the readability of text include line height, which is the spacing between lines of text; letter spacing, which is the spacing between letters in a word or group of words; and text size and color. It's a good rule of thumb to never use a font smaller than 12 points and always carefully consider color contrast.

Our last tip is to carefully consider your font pairings. There isn't an exact science to pairing fonts, but here are some guidelines to find complimentary looks. The general rule of thumb to remember is opposites attract. Here is an example of a block of text with two Slab Serif typefaces:

Screen-Shot-2018-07-24-at-8.41.15-AM

Slab serif is the technical way of describing a font with thick, block-like feet or serifs. While they're technically different fonts, their inherent similarities creates a visual attention that's unpleasing to the eye. If we replace one of the fonts with a Sans Serif, the difference is tremendous. Not only does it feel better balanced, but the tension that was there before has disappeared. Some other popular font pairings include a heavyweight font with a smaller lightweight font and a Script Font with a Sans Serif.

That's it, now you're ready to pick out your fonts. Google Fonts is a great resource to use. Volution stores also come loaded with the entire Google Fonts library for your convenience.

Have any questions about this webinar, or want to suggest a future topic for us to cover? Let us know in the comments!