7 Commandments of Ecommerce Typography
Typography has a place in eCommerce. This artful take in font style, size, colors, and whatnot, serves not only the eyes of the customers, but also affect how they perceive the brand itself.
Typography also ensure legibility and readability, a factor that should be considered by a business whose existence is primarily confined to a virtual store, its eCommerce site, in which the design has a lot of say in whether or not a customer will stay and shop, or leave.
Typography should then be given attention by eCommerce business owners, and that it should be implemented with much meticulous thoughts.
In this light, we have come up with 7 commandments that eCommerce site owners and managers should put in mind when it comes to eCommerce typography:
First Commandment of eCommerce Typography: Consider the Mood and the Voice
Typography can visualize mood and voice, so it is essential that you choose the right font, color, and size in order to visualize the right mood, and the right voice.
To help you come up with the right mood and voice that your ecommerce typography would relay, here are some considerations that you should give thoughts to:
a. Determine who you audience is, and match your typography for it
Make sure that your font, color, and size matches your audience. Certain typography are appealing to the youth, and some are more appropriate for more matured audiences.
b. Bring out the personality of your brand
Your brand also has a personality that is matched with your audience, so let this speak through your choice of typography.
c. Suit your typography to your message
You should also match your message to your typography choices. There shouldn’t be any disconnect on what you want to say, and how your visitors would read the message.
OARS has been exemplary in demonstrating this commandment. Their effective use of typography in creating the sense of adventure through traveling makes it catchy. The main font has been widely recognized for people’s #TravelGoals photo captions.
Second commandment of eCommerce Typography: Don’t use too much Font
If you think using many different fonts is a good idea, then you should ask for help from another person to deal with your ecommerce site’s typography. Some of the worst sites out there make use of more than two fonts and this can cause visual diarrhea.
Shopify’s sell clothes online landing page has only two fonts that separate the headers from the body texts.
You should use a maximum of 2 fonts. A different font can be given for the heading, and another one for body. Any more than that is an eye sore. Instead of having more than two fonts, make use of the four main weights that each font has – regular, italic, bold, and bold italic.
Third Commandment of eCommerce Typography: Make use of weight and width contrast.
Weight has been introduced on the previous commandment as a way to make a variety of a font so that you wouldn’t have to make use of a lot of font. Font weight refers to how dark a letter is. Weight should also be used intelligently as each weight is more effective in a specific situation e.g., when stressing the importance of a word, making it bold is a good idea, like stikwood’s design:
On the other hand, width contrast refers to the variation of stroke of a letter, i.e., how heavy the stroke is at the center, as compared to how heavy the stroke is at the ends of the letter. And like weight, width contrast also has its own story to tell.
Fourth Commandment of eCommerce Typography: Take note of size rules
Let’s now focus on size. There are lots of considerations for the font size: cap line, midline, topline, beardline, baseline, and whatnot. There are lots of rules depending on the style that you would want to follow, and there are lots of resources that can help you, but we would just like to stress out the importance of font size when it comes to your ecommerce site.
Your font size should allow your shoppers to read your texts clearly. Not too small, and not too big. You can also make use of size to highlight important messages so make sure that texts of the same level of importance should be of the same font size.
Fifth Commandment of eCommerce Typography: Ensure proper spacing
Spacing should be given much consideration by your ecommerce site designer. Your site should not looked cramped up, but your site should also not look to loose. Your site, and the texts that you have, should look intelligently organized to make it comfortable to look at.
Some of the things that you have to consider when it comes to spacing are columns and line height.
Notable typographists suggest that columns should not be more than 80 characters long.
As for the line height, most fonts already come with their optimal line height so that they would appear on their ideal look.
The very basic idea in dealing with spacing is that texts should have ample spacing so that it wouldn’t discourage your shoppers from reading them.
If you don’t believe proper spacing is a must, then feast your eyes on ARNGREN.
Sixth Commandment of eCommerce Typography: Use Variations in Headings
We have been repeatedly saying how we can only make use of different font or size for headings, and a different one for the body of the text. And that’s for a reason – your headings carry more importance, and would be seen first by your shoppers, and what’s in it will determine whether or not they will read the body of the text.
Experts in typography also stress the benefits of variating your headings from the body. First, it has an aesthetic effect. Second, it promotes organization. Third, it gives your text character, alluring customers to read them.
Seventh Commandment of eCommerce Typography: Choose your colors wisely
Color is the last thing on this list, but it is not the least important. All of the factors that we have mentioned in this enumeration should be treated equally important and should be given the same amount of attention by web designers.
Colors have a lot of effect on your site and your color decisions can make or break your site’s overall appeal. Since we are concerned with typography, let’s assume that your background color is already okay.
The color of your text should promote readability. It should contrast the background color. At the very basic, you should be able to tell if your text is not painful to the eyes when read.
Furthermore, you shouldn’t also have that much different colors on your site. Establish a color scheme that you will maintain for all the pages of your eCommerce site.
There are many ways on how to use a dark theme, since most dark websites require contrasting color schemes. Some of the best eCommerce sites rocking dark themes are the following:
Just avoid ending up like below:
FOLLOW THESE COMMANDMENTS AND YOU WILL DO WELL WITH YOUR ECOMMERCE TYPOGRAPHY
Our guide has tackled eCommerce typography at the most basic level. Here’s a guide on the rules of typography.
Ultimately, we would just want you to ensure that your ecommerce site makes use of typography to ensure that your text is readable, so that whatever message you would want to relay, you will be able to relay it well.
So follow our seven commandments for ecommerce typography and have an ecommerce site that is great to look at!
Kenneth Sytian is one of the leaders in web design in the Philippines. He has been designing websites and developing web apps for more than a decade. His no-nonsense approach to design coupled with his vast creativity is a winning combination for his clients.