Typography is one of many critical design elements – along with things like color, imagery and white space – that designers employ to create mood and atmosphere in their work. Users react to these elements in a fundamental, subconscious way, so it’s important to consider how a layout works to manipulate emotions – does the design make people feel happy, adventurous, dangerous, elegant? Is it structured or chaotic? And does the typography enhance or distract from the overall user experience in this regard?
Readability
Readability is one of the biggest considerations in terms of font selection for e-commerce sites. Sans-serif fonts are typically used because they have a more modern feel and lend themselves to e-commerce sites’ light copy style. (Serif fonts are generally considered easier on the eyes for, say, book publishing.)
The most commonly used fonts for e-commerce are simple sans-serif fonts like Arial, Helvetica and Verdana. Helvetica comes pre-installed on Apple machines, and Arial on Windows. The fonts share similar spacing and style, which means there will be minor differences in terms of cross-browser compatibility. Google Fonts are another popular way to specify font use on a site — they enable designers to select from more than 650 typefaces and use them via a simple HTML snippet pasted into the page. This allows font choices to transcend the user’s operating system altogether.
Quality
And then there are the more subtle effects of font choice. In e-commerce, users want to feel good about traits like quality and integrity. Is this a no-frills brand or a purveyor of luxury goods? Can you remember the last time you saw a novelty font on a major e-commerce site? There’s a good reason for that. Comic Sans does not inspire users to think about quality or integrity.
Simplicity
The last thing to remember about typography for e-commerce is to keep it simple in terms of mixing fonts and overusing colors and font weights. There is rarely an instance where more than two fonts is actually a good thing – one font for display copy and one for body copy should more than suffice. When there’s too much going on visually, users get distracted and confused. When it comes to color and font weights, these things should be used with purpose, to create a clean hierarchy of information that guides the eye and helps to create a path from Point A to Point B. A page with too many variations in color and weight creates chaos and confusion for the user.
It’s easy to see all these ideas in play on popular e-commerce sites. Take a look at the sites below, and compare the ways they use font choices and color, particular for their display copy.
RH
RH follows convention and uses sans-serif fonts for body copy and navigation, but they use a distinguished serif font for display copy. The serif typeface communicates the brand’s ritzy, upscale feel and lends a sense of elegance with its clean black and white palette.
Walmart
Walmart’s site uses a combination of ultra-light and extra-bold sans-serif fonts that result in a bold, clean look. The fonts are on-trend but basic – like the company itself, they say, “We aren’t doing anything crazy or fancy here.” This helps enhance the idea in users’ minds that the company is a great place for filling everyday needs.
Cabela’s
Cabela’s site, which is targeted toward the male demographic, also uses clean, sans-serif typefaces – but they mix it up a little with a condensed font and tighter spacing, which creates a bit of tension in their display text and lends a masculine feel to the design. Their accent colors – oranges, browns and grays – further help to create a manly vibe.
It’s easy to use typography for both emotional appeal and higher conversion rates – it just takes a little know-how to make it work with your overall site design.