There are volumes written on proper design techniques for images, layouts, navigation, menus, user flows, etc., but one unsung hero doesn’t get as much attention as its counterparts, despite being just as important: eCommerce typography.
If you’re one of those designers that underestimates typography… don’t. Jennifer Aaker’s work with brand personality, for one, shows how typography can lead to better brand relations and even sales.
In a 1997 Journal of Marketing Research paper, Aaker showed how, for the fast food chain Wendy’s, more consumers were willing to believe their claim of being “old-fashioned” when the font was changed. On a whole, the paper shows how the emotional response of typography establishes connotations, good and bad, with shoppers perceptions of brand and product.For Wendy’s, more consumers were willing to believe their claim of being “old-fashioned” when the font was changed. Click To Tweet
Moreover, the significance of typography extends into more directly practical areas. At the bare minimum, typography is responsible for a site’s legibility and readability. At more advanced levels, it can aid in a page’s organization, and even feed visual hierarchies to influence what the user sees and in what order.
Suffice to say, typography matters. So we’ve compiled our list of 7 fundamental rules to follow for designing typography on eCommerce sites.
1. Mood & Voice
At its heart, typography is a visual art. The way your text looks can affects how the user feels, or at the very least their impression of you. Pins Won’t Save the World has a quirky, ironic sense of humor, directly reflected in their cartoon-y typography. It works perfectly for their site, but would have the opposite effect for retailers of more serious products, like medical or construction equipment.
Source: Pins Won’t Save the World
Poor typographic choices make your brand seem untrustworthy, unprofessional, or just plain incompetent. Likewise, smart choices reflect the emotions your shoppers are looking for, getting them excited about a sale.
Source: Pins Won’t Save the WorldPoor typographic choices make your brand seem untrustworthy, unprofessional, or just plain incompetent. Click To Tweet
Aran Reeks of Evosite points out that it’s rare for font choices to be universally good or bad — what makes them effective or not depends on the site. His example of two fonts, both used correctly and incorrectly, demonstrates this well:
Source: Aran Reeks, “Can typography really make a difference to eCommerce conversions?”, LinkedIn.Aran Reeks of Evosite points out that it's rare for font choices to be universally good or bad Click To Tweet
Reeks continues to make these three points about choosing the right font for your goals:
- Know your audience — Just like with the content itself, you want the typography to match the shopper’s voice. Fonts evoke personalities that can be young, casual, bold, old-fashioned, formal, etc., so choose the one that will “speak” to your readers. The best way to hone in on your target audience, and their preferred styles of communication, is through constructing personas, which we explain in our article about improving your eCommerce content strategy.
- Know your brand — Your font also mirrors the personality of your brand. In addition to speaking in a voice that your readers can relate to, you want voice that represents your brand identity. Choose your font in accordance to your brand goals and match any slogans. Your copy voice shouldn’t just reflect your brand personality, it should also make your brand likeable. We discuss the finer points of how in our article about developing a likeable brand persona.
- Suit the message of the content — As Reeks puts it in his own words, “The most dangerous effect you can create is discord between what the words mean, the meaning or mood implied by the typeface, and the values you want to convey.” Make sure the font is appropriate for what the text itself is communicating.
The emotional connection of your typography will have the greatest effect on sales. While the rest of the typographic decisions tend to rely more on cut-and-dry facts, this first decision will involve a little more heart… and effort.
2. No More than Two
It’s a rookie mistake to use too many fonts. As a visual element, there’s a misconception that more fonts make a page seem more visually exciting. That certainly seems to be the principle governing Mortimer Lumber below, which landed on Web Pages that Suck’s 20 Worst Websites of 2014.
Source: Mortimer Lumber
However, at some point the variety stops adding to the look of the page and starts taking away from it. And that turning point is after two different fonts.
As Jamie Wright at Engage explains, there’s almost never a reason to use more than two fonts. One for the heading, one for the body text. Anything more than that makes the screen start to appear cluttered and distracting.As Jamie Wright at @engagetweet explains, there’s almost never a reason to use more than 2 fonts Click To Tweet
Consider that for each font, you have 4 main weights to choose from: regular, bold, italic, and bold italic. That’s a total of 8 different looks — more than enough diversity to keep your site’s visuals interesting without overstimulating your reader.
You can even dive deeper into even more intricate weights: light, thin, extended, condensed, etc. by using web font services like Typekit. For example, some fonts, like LFT Etica, have as many as 40 different weights. That’s plenty of variety without necessitating an entirely new font.
Source: Hotel Magique
Hotel Magique, above, uses a small cap, sans serif font for their buttons and navigation, and a serif font for their title and descriptions. To spice it up, they use italics on the serif font to separate titles and descriptions — but a whole new third font is unnecessary.
3. Consider Character Weight & Width Contrast
In her article for SitePoint, Laura Elizabeth outlines 3 key factors for deciding a font choice, and the first two are weight and width contrast. (The third is legibility, which we discuss at the end.)
Source: Laura Elizabeth, “Taking the Guesswork out of Typography on the Web,” SitePoint.Do you know what are the 3 key factors for deciding a font choice? Click To Tweet
Character weight refers to how thick the strokes are, or in other words, how dark the lettering is. The bold style has a greater weight than the regular style. Weights, like the fonts themselves, are not good or bad, but their effectiveness changes based on how they’re used. Elizabeth suggests deciding the styles you’d like to use first, then find a weight that can sustain them.
Source: Laura Elizabeth, “Taking the Guesswork out of Typography on the Web,” SitePoint.
The letter contrast, is how much the width varies in a single character. For example, if the strokes are heavy in the center, but taper off at the ends.
Source: Austin Cake Ball
Proper usage for weights should be subtle, like Austin Cake Ball above. Prices and titles are thicker than in the body copy, and for good reason. Weight signifies importance.
Elizabeth recommends using heavy width contrast for titles and headings because it creates a more dynamic visual. However, for body text and long strands of words, stick to medium or light width contrast. This makes continual reading easier on the eyes; heavy width contrast over a long period causes too much strain.
4. Rules for Size
Naturally, the size of your text affects how it’s perceived, as well as how much attention it draws. It’s also dependent on trends and styles; for example, a current minimalist trend favors large, bold titles, sometimes dominating the entire screen. Much of your typographic size decisions will depend on the style of the site.
There is some disagreement about body text size. Current design writers, such as Smashing Magazine’s D Bnonn Tennant as well as Elizabeth mentioned above, favor 16 pixels. Beware traditionalists who say 13 pixels, the fixed ideal before mobile browsing.
For more information on font size and responsive design, read Laura Franz’s article for Smashing Magazine (2014).
Another size consideration is the relation of lowercase characters to tall or uppercase characters. Christian Bailey of Design Instruct introduces laymen designers to typographic terms like “baseline,” “x height,” and “cap line.”
Source: Christian Bailey, “The Basics of Typography,” Design Instruct.
According to him, the x height (the middle line that’s the height of normal lowercase letters like x) should be half the height of the cap line. Like other rules, this applies mostly to body text — contrast and variation are more than acceptable for titles and headings.
There’s more than meets the eye for Ambassador’s title typography, a Geometric sans font in caps with a higher-than-average x height. Not only is this eye-catching and aesthetic, it’s also reminiscent of the Bauhaus design style of the 1920s and 1930s — a masterful choice to parallel the elegance of their watches.
5. Rules for Spacing
It’s time to step away from the more creative typographic choices and into the more pragmatic ones. Spacing decisions are critical for legibility, and tend to have more black-and-white rules. It’s also a fundamental building block to layout composition, which we dissect in our article Laying It Out: a Practical Approach to Grid Systems for Your Website.
The first concern is columns. In the same article, Reeks explains the basics of setting columns. His golden rule is “setting column widths to anything more than 80 characters is really just asking for your content to be ignored.” Acclaimed typographist Mark Boulton offers more precise advice at 52-78 characters.Setting column widths to anything more than 80 characters is just asking for your content to be ignored. Click To Tweet
Column width should be the first spacing issue addressed because the greater the column width, the more vertical space is needed between lines. Wider columns require extra space to help readers find the start of the next line. This vertical space is known as “line-height.”
Much like the shelving unit Karton is selling, their spacing between levels is wide enough to optimize legibility without hindering it (with the exception of the lesser-important shipping fine print). The white space actually makes the text more appealing, encouraging the shopper to read it.
The UXPin eBook Web UI Design Best Practices sets a couple of specific figures for dealing with line-height:
- The ideal line-height is 120–140% of the font size (closer to 140% for wider columns). So, if you’re using a 16-pixel font size, aim for a line-height of 19.2–22.4 pixels.
- A single empty line is adequate to separate paragraphs. Anything over 1.8 lines, however, starts to suggest an entirely new section.
When reading about typography spacing, you’ll often hear terms like “kerning” or “tracking.”
Luckily, unless you’re designing your own original font, you won’t have to worry too much about these. Most pre-made fonts settle these issues on their own, and you should only customize them if you notice a problem on large sizes or for printing.
This discussion in the Adobe forums gives a little more information on optical vs. metric kerning, if you’re interested in getting more hands-on.
6. Differentiate Headings
As we’ve mentioned above, body text and headings/titles have different rules, namely that headings and titles can sustain more flamboyant choices. This isn’t just an allowance, it’s also a best practice. Your headings and titles should be more exuberant and have an expressive character.
Elizabeth explains that differentiating your headings from your body text has visual benefits for a page, both aesthetically and organizationally. If a reader can identify both headers and body text at a glance, they can understand section divisions more easily, which facilitates browsing.
Furthermore, the diversity keeps the words’ appearance on the page from coming off as bland and negligible. Just look at how charming the Teapigs example is.
She goes on to suggest using a serif font for one, and a sans-serif font for the other. This echoes what Wright mentioned about using two fonts on a page, one for headings and the other for body text.
Standard practice is to use a sans-serif font for body text, since the simplicity lends itself to sustained reading. This isn’t a fixed rule, however, and there are plenty of sites that use a serif font for body text. Consider the style of the site.
Last, we’ll end with the absolute most important concern for typography: legibility. Without legibility, all other issues are moot. Luckily, if you’ve correctly applied all six of the previous rules, your text should be completely legible. There is just one remaining factor, and that’s color.
Color choices are one of the most significant in web design, and our article Everything You Need to Know About Choosing a Color Scheme explains what to pay attention to when making these decisions. For now, we’ll keep the focus on how text color and background color interact.
Source: Soap Co.
More than just a preference or convenience, the way your text color contrasts with the background color affects its legibility on a whole, especially for visually handicapped readers. Considering those with weak vision or color blindness, this group of people is larger than you might think.
The Web Content Accessibility Guidelines (WCAG) 2.0 put the ideal color contrast ratio at 4.5:1. This is suitable with the visually impaired, making it perfectly crisp and clear for the average shopper.
Source: Color Safe
In order to double-check that your color choices work, use the free online tool Color Safe. This site allows you to enter in your desired typographic choices, and then calculates your acceptable color palette options, in accordance with WCAG standards.
eCommerce typography doesn’t have to be as difficult as some designers make it out to be. Just keep in mind our 7 commandments, and the best practices for each:
- Choose the appropriate font for your brand’s identity.
- Don’t overdo it with more than 2 fonts.
- Consider character weight and width contrast, and how they affect legibility.
- Consider both the size of the font, as well as the size of individual characters within the font family.
- Follow the concrete rules of spacing to optimize legibility.
- Add some flair to headings to set them apart, or at the very least use a different font.
- Test your color choices to make sure they pass the recommended legibility guidelines.
If you have any questions, comments, or suggestions of your own, add them in the comments below.