Typography 101: How to Choose the Right Fonts for Your Website

Want to learn more about typography but don’t know where to start? Then you’ll want to check out this crash course in typography from our senior web designer.

Volusion_Blog_Typo2

Now that we know how important good typography is to your store’s success, it’s time to get into the nitty-gritty of selecting the right typefaces for your store. With so many fonts available to us, it can be hard to know where to begin. But don’t worry, because this is typography 101 and class is officially in session.

In this post, we’ll check out some aspects to consider when choosing the right typeface look for your store, as well as a few typographic fashion faux pas to avoid.

 

Lesson 1: Legibility and readability

Two things to consider when choosing your store’s typeface are legibility and readability. While legibility and readability sound very similar, they’re actually quite different. But together, they work to effectively communicate your brand’s message.

 

Legibility

Legibility is being able to distinguish specific letterforms from each other. (Think of a letterform like the specific structure and shape of a letter in that typeface, complete with the correct width and spacing, and any details like serifs or patterns.)

For an example of good versus poor legibility, let’s look at the typeface Homestead. When it’s used in a header, you can easily see all the intricate details of each letterform.

legibility1

It’s pretty darn legible and attractive. However, as body text, notice how fuzzy the edges are and how you can no longer see each letterform’s stripes and dots. In other words, when Homestead’s been shrunk down to a smaller size, it’s become illegible.

Since body copy tends to be smaller, a more legible option would be a typeface with simpler, clean lines.

legibility2

As you can see, by opting for one of these simpler typefaces, we’ve improved legibility by leaps and bounds.

For peak legibility in your online store, we recommend using one of the following typefaces for body copy:

  • Arial
  • Verdana
  • PT Sans
  • Times New Roman
  • Crimson Text
  • Podkova

 

Readability

Readability refers to how text is arranged so that the eye can easily read the content.

There are a number of things that affect the readability of text including:

  • Line height: The spacing between lines of text. If there isn’t enough space between the lines, not only will it not look as nice, but readers will more easily lose their place.
  • Letter spacing: The spacing between letters in a word or group of words. Too much or too little spacing can affect readability.
  • Text size: If the text size is too small, it can get pretty hairy to read. (Think old, dense college textbook.) While size often depends on what works with the design, a good rule is to never go smaller than 12px.
  • Color: It’s important to think about color contrast when dealing with readability. For more about color, here are some examples:

color1color2

Bright red text can cause reader fatigue.

Low contrast can make words hard to see.

 

color3color4

High contrast can cause colors to “vibrate.”

Good contrast helps the reader access the content easily.

 

Lesson 2: Appropriateness

Just as you wouldn’t wear an old pair of sweatpants to the presidential inauguration, you don’t want to dress your website in a typeface that contradicts the tone of your brand or industry.  As mentioned in our previous typography post, the typefaces you choose have a huge impact your website’s overall voice and mood. So when selecting a typeface, a good rule of thumb is to choose one that matches your target audience’s expectations.

For example, when you’re visiting a news site like The Texas Tribune, you’d expect to see a typeface that commands a sense of authority. The Texas Tribune has wisely chosen the typeface Georgia to create that feeling.

TexasTribune with Georgia

But watch what happens when I change the typeface to a script called Grand Hotel.

Texas Tribune with typeface Grand Hotel

Yikes, right? While Grand Hotel could work on a more playful design, it portrays the wrong mood for The Texas Tribune. (To return to our earlier analogy, this would definitely be wearing sweatpants to the Whitehouse.)

 

Lesson 3: Pairing typefaces

Pairing typefaces is not an exact science, but there are some guiding principles that can help you find complementary looks. One of those rules is that opposites attract and should be paired together. Two similar typefaces will actually compete with each other and stress out your readers’ eyes.

Here’s an example of this rule in action:

oppositesattract

On the left, we have two typefaces that are both slab serif typefaces. While they’re technically different typefaces, their inherent similarities create some visual tension that’s unpleasant to see.

On the right, we have one slab serif typeface and one serif typeface, and whew, what a difference. Immediately you can tell that the tension’s been relieved. That’s because pairing contrasting typefaces allows each typeface to speak while still keeping the peace.

Here are more examples of opposites complementing each other:

contrasts

 

Lesson 5: Typography faux pas

If there’s a hard and fast rulebook for typography, these faux pas would be in the first chapter. Here are some typography don’ts that you should never EVER do:

 

Don’t mess with proportions

A good typeface should be left alone. While it’s fine to make a typeface larger or smaller, it should never be compressed, stretched, skewed or manipulated in any way that messes with its original proportions.

fauxpas1

Never use these fonts

Sadly, there are a few typefaces that have been abused, overused and need to be excused. They’re so bad that they have the dubious honor of getting a visceral reaction from most designers (seriously – I’ve seen designers retch) and non-designers alike.  For your sake and the sake of those around you, you’ll want to steer clear of these typefaces.

 

Comic Sans

Comic Sans is a casual comic book style typeface and was created for informal use. Widely misused, Comic Sans now lends a particular air of unprofessionalism to anything it touches.

If you’re looking for a fun, childlike typeface, try these alternatives instead:

 

Papyrus

Papyrus was created to look like handwritten text on Ancient Egyptian papyrus paper. Like Comic Sans, it has fallen victim to overuse and misuse. Using this typeface now gives off an unsophisticated, inauthentic vibe that no business would ever want on its site.

If you were considering Papyrus, here are some alternatives that’ll make you much happier:

 

School’s out. Time to dress for success!

While choosing a typeface can be intimidating task, you now know some simple guidelines that can help you make the right selection for your store. If you’re in the process of selecting your typography, or are considering a redesign in the future, we strongly encourage you to explore the wide selection of typefaces available to you.

Here are two fantastic resources for downloading typefaces:

 

My Fonts

My Fonts has a great selection of fonts you can purchase for your store. It’s actually a favorite resource for high quality typefaces.

 

Google Fonts

Google Fonts is a number one resource for commercial free, web-ready fonts. All the fonts available here are free to download and use.

 

Stay tuned for our third and final installment, where we’ll tip our hats to sites around the web that are using typography effectively.

 

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.

One Response to “Typography 101: How to Choose the Right Fonts for Your Website”

  1. Ben Leah

    Nice article, some great tips for store owners and developers in need of some design direction!

    Have to pull you up on Comic-Sans bashing… It wasn’t designed for informal use, it was originally designed for screen display on a child’s educational game – so in terms of it’s intended function for which it was designed it’s a great *functional* typeface… You’ll often hear designers jump on the band wagon and say how bad it is, but the truth is (and same applies to plenty of typefaces) fonts are more often just misunderstood and misused by bad designers than are actually themselves badly designed fonts.

    Reply

Leave a Reply