E-Store Web Design: Making a Case for Typography

Fast Loading? Checked! Simple Navigation? Checked! Persuasive Call-to-Action Buttons? Checked! High-Quality Product Images? Checked! Powerful Product Content? Checked! Secured Check-out Process? Checked!

Typography? Really?! Does typography matter? – A question that would pop-up in many of the eCommerce entrepreneurs’ head who are all set to launch their store online.

The answer is ‘YES’ – and this article will prove you this fact!

Ideally, new e-store entrepreneurs are full of zeal and enthusiasm to convert their brick & mortar store into a profitable online business. In their rush to see their websites go live, many of these entrepreneurs might just focus on bigger and broader questions; ignoring some small but highly impacting design elements like typography.

But, the fact is that typography is one of the most essential web design elements which if ignored can badly impact revenues.

So, let’s get down to the nitty-gritty of typography to understand its importance and impact on e-store sales:

Typography: What is it exactly?

Here’s the Wiki definition:

“Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning).”

Impact of Typography on User-Experience

Typography speaks to your visitors.

People look at your homepage as a whole, scanning the text, type of font, size of the letters and length of the lines. Now, if they don’t find your content readable, they will leave the site immediately and jump to your competitor’s site. This is not a conscious decision. But the website design (which includes type, size of the font, color and whitespace) prompts them to do so.

There has been a research study that proves the fact that typefaces have a great impact on the way we process information. One study was conducted by Oscar winner documentary filmmaker Errol Morris and titled “Are you an optimist or pessimist?” In this interesting study, he discovered that readers are more likely to trust a statement if it was written in Baskerville font than presented in any other font like Georgia, Comic Sans, Computer Modern, Helvetica or Trebuchet.

It is clearly evident from this study that simply having keyword-rich pages or quality content (product description, product images and product videos) is not sufficient for generating sales; but it is equally important to have right type and size of the font on your web-store.

Selecting the right typography

Selecting the right typography will provide exceptional user-experience to your visitors. It will help you hold visitor’s attention for long; ensuring that visitors full focus is on the products/services you are offering. A focused attention will help you boost your sales.

Impact of Typography on Google Rankings

The search ranking algo of Google considers nearly 200 signals to rank a website. Typography, currently has not gained a spot in this list of ranking factors. So, choosing the right typeface and font size will not directly help you rank high in SERPs.

However, all e-store web designers are highly aware of the fact that providing good user-experience to visitors will help them rank higher in Google compared to websites that provides poor web experience. It is been clear from the aforementioned point that typography plays an important role in providing good user-experience to users. So, the equation now is:

Typography provides good user-experience to users

Here’s Steve Jobs Take on Typography

This is what Steve Jobs, rightly known as godfather of fonts, had said about Typography in one of the most inspiring commencement speech he gave at Stanford University:

Steve Jobs speech

Factors to Consider Before Selecting Typography

Now, that we know the impact of Typography on conversion rates, let’s get deep down to understand how you can make typography related decisions:

There is no single formula for typography that can work for all e-stores. It depends on some critical factors like target audience, your brand image, industry your business falls into, whether it’s a B2B or B2C company, products/services that you want to sell and the message that you want to convey to your visitors. Critical evaluation of all these factors will help you select the right typography for your firm.

For example, a B2B company must go for fonts like sans serif which help them garner respect and trust in digital space. Yapstone, an online payment service provider, for instance, uses Gotham typeface which gives brand a trust-worthy image. Gotham was even used in the campaign material for Barack Obama in 2008 presidential elections.

Barack Obama in 2008 presidential elections
Source: Yapstone.com

On the other hand, an e-store selling children’s items like clothes or toys must opt for fonts that give playful and fun feel. Take a look at how childrensplace manages to win our hearts with its typography:

Fonts that give playful and fun feel
Source: Childrensplace.com

One another important factor that needs consideration is mobile audience. Since, more and more people are shifting to m-commerce, you need to keep in mind the mobile audience before zeroing on typography.

In short, after thoroughly analyzing the above mentioned factors, choose the typography that rightly suits your brand image.

Typography Elements

It is clear that typography improves your visitor’s experience. I’ve detailed here few elements of typography to improve your site’s organic rankings and user-experience:

Color:

Color is one of the most important elements of typography. Right color attracts visitors’ attention and at the same time, poor colors on homepage will increase the bounce rate of your site.

Many popular websites like Skype, WordPress, Twitter, LinkedIn uses blue color on their homepage. One of the main reasons behind this is blue color symbolizes trustworthiness and honesty. It is therefore vital for web designers to have a deep understanding of color psychology and its impact on ecommerce conversions. In an experiment Monetate found that blue CTAs outperform orange CTAs by 9%.

Understanding of color psychology
Source: Monetate.com

However, we have seen Amazon, the biggest eCommerce retailer in the world having orange CTAs on their product pages. So, it is advisable to not go by any generalized experiments and pick the best color that works for your brand image and converts.

Line Length and Line Spacing:

Too long or too short lines will not look aesthetically pleasing. The average line length is 45-90 characters which includes spaces.

Line spacing is the distance between two lines of text. Recommended line spacing is between 120% and 145% of the font size.

WhiteSpace:

Whitespace gives an elegant look to your website layout. A product page that is cluttered with all information about the product like product description, images, videos and CTAs will convert less compared to a product page with decluttered product information. Furthermore, it makes it easy for online shoppers to find desired information about the product easily.

Make appropriate use of whitespace to make your product pages visually stunning.

Font Size and Type:

Fonts play an important role in the readability of the content. Hard-to-read typefaces will turn of your visitors. Alternatively, right typefaces will persuade visitors to take the desired action.

Pick the one that is readable, compatible across all browsers and screen-sizes and the one that best suits your brand image. Don’t use more than 2 typefaces. Select one typeface for headings and another for product description.

Small or tiny fonts consume more time in reading and therefore may drive away website visitors immediately. So, ensure the font size is large enough for web visitors to easily read the content.

While there is no ideal font size or typeface for eCommerce designs, the rule of thumb is to select the one that makes it readable, suits your brand image and is in the accordance to the products you are selling.

For instance, from the following 3 typefaces, which do you think will give the impression of reliable and trustworthiness for an online medical store?

Reliable online medical store?

It is not difficult to guess that medical e-store web designers will opt for Arial font.

Evaluate Your Typography Performance

You have set the typeface, font size, colors of your CTAs and all other design elements of your typography. But is it working for your eCommerce website?

The best way to know if the selected typography is working for your e-store or not, is to do some A/B split testing. Great many e-store store owners claim that they do not have time to do typography testing. Isn’t it just like saying – “I don’t have time to stop for gas as I am busy driving”? (Analogy taken from Robin Sharma’s bestseller book – ‘A Monk Who Sold His Ferrari’) Eventually you will pay the price for it; and the affected metrics would be – visitor count, bounce rate and conversion rate.

On the other hand, testing will let you know whether the choice of colors, font type, font size, typefaces and whitespace is having the desired effect on your sales or not. Be experimental and see what works best for your target audience!

Wrapping It Up

Typography is a key ingredient in the eCommerce web design recipe. An eCommerce entrepreneur who has spent thousands of dollars in hiring an expensive development agency to develop a cutting edge eCommerce platform may see his eCommerce start-up fail if this basic and crucial design element is ignored.

It needs to be simple enough so that it is readable and at the same time compelling enough to persuade target audience to surf and stay longer on the website.

Solid typography will build a strong brand identity, attract new visitors and entice customers to revisit your site; thereby boosting sales and profits for your business.

Are you sending the right message to your prospective customers with typography? Which typefaces are you using for your business to have maximum conversions? Share your ideas or questions with us in the comments below.

Like it? Share it.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *