How to Choose Perfect fonts for an Ecommerce Store?

Modern consumers expect to find what they want as efficiently as possible, without being forced to dig through pages and pages of irrelevant products and information. If consumers can’t find what they want, or simply grow frustrated by the experience, they can (and will) abandon their search with a simple click.

Typography is the voice of your website. Not only does choosing the right typography help to communicate your message, but it also has the power to affect tone and even make your brand more recognizable.

With so many options, finding your own right style can be a challenge, especially if you don’t know how fonts work together.

Why does font matter for Ecommerce Store?

According to the recent study, online users read only 26% of words on a page. This percentage may vary depending on the font style you use and how engaging your content is.

When used correctly, fonts can help draw a reader in, encourage them to stay on the page longer, and, hopefully, guide the customer successfully all the way through the buying process.

When Steve Jobs was creating the first Mac, he did something that was never done before — he created 10 font designs (typography) that you can choose from.

I know this doesn’t sound like much to us right now, but it was a major breakthrough in design at the time.

It made such a big impact on the industry that they called Steve Jobs the Grandfather of Typography.

If it wasn’t for Steve Jobs, this could be what you have to stare at every time you turn on your computer:

Steve Jobs was so obsessed about crafting the perfect font design for the Mac because he knew how typography can significantly improve user experience.

Difference Between a Font and a Typeface?

A typeface is the collective name of a family of related fonts (such as Times New Roman), while fonts refer to the weights, widths and styles that constitute a typeface (such as Times New Roman Regular, Italic, Bold…). Not all typefaces consist of multiple fonts however.

Different font styles communicate different subconscious messages to people – which can help you build brand identity

Serif vs Sans Serif Fonts

The small features on the ends of strokes in some fonts are known as “Serifs”.

Some common Serif typefaces are Times New Roman, Georgia, Palatino and Garamond.

In contrast, common Sans Serif typefaces include Arial, Helvetica and Tahoma.

Serif fonts can be very classic or formal and sometimes you hear them referred to as elegant. Sans Serif fonts are often described as modern, friendly and minimal because they have a stylish simplicity about them, without the decorative strokes.

The font design you choose acts the same way as your choice of outfits — the type of font design you pick says a lot about you, your business, and what your website is all about.

When to Use Serif and Sans Serif Fonts?

Serif fonts are easily readable at small body copy sizes, and Sans Serif fonts really stand out in large titles. There are many exceptions to this, but that is the most common usage.

What is the theory behind Font pair?

A font pair is a combination of two complementary fonts that you can use to blend your branded assets. This pairing can go for the heading-copy and body-copy.

Heading copy is used when working on brochures, posters, invitations, website pages, etc. while body-copy is used to write bulk content.

Here are some basic guidelines to follow:

• Create a contrast between your fonts (bold & cursive, TALL & short)
• Combine serif and san-serif fonts (like Libre Baskerville + Signika).
• Don’t use two similar fonts (for example, two cursives) for both your headline and body text. Creating variety will draw the eye and help your customer engage with each section individually.
• Make the font match your brand. Playful handwritten letters probably aren’t the best fit for a premium jewelry brand.
• Limit yourself to 2-3 fonts to avoid making your content appear cluttered.

Fonts can influence the way people perceive information. Basically, the typeface can actually affect the credibility of your website.

Understanding Font Personality Types

Font Personality #1) Traditional, Respectable, Comfort, Reliable:

If you want your website to represent this personality, the fonts you should consider should be designs that have been around for a very long time, such as Georgia, Trajan, and Times New Romans.

These fonts have traditionally been used in prints like newspapers, magazines, and books. Since most people are very familiar with these classic font designs, they instantly give off the impressions of heritage, reliability, and trust.

Font Personality #2) Contemporary, Modern, Minimalistic, Progressive:

These are fonts with very clean designs and has less handwriting qualities.

Font Personality #3) Strong, Stable, Defined:

If you want to make a statement or want to appear robust, this is the type of font you should use.

Font Personality #4) Romance, Elegance, Beauty, Vintage:

These are handwritten-type font designs with lots of curves.

Font Personality #5) Themed Font Design

These are font designs that don’t fall into any specific category because they are so stylized.

Is your website Font versatile?

You will be using the same font(s) throughout your website, and your website could be viewed on different devices with different screen sizes.

As such, you want the font design to look good regardless of its size, weight or style.

When you are picking your font, ask yourself these questions:

Does it look good in different weight like bold, italics or normal?

Does it look good in various sizes?

Best Font Pairing for ECommerce Stores

Montserrat + Merriweather

Montserrat is based on urban typography from the first half of the 20th century, complemented by the slightly condensed letterforms of Merriweather. This pairing would be well served in a bag or sneaker store.

Overlock + Nunito

Overlock’s rounded glyph shapes make great titles and short texts in magazine-style layouts. This font looks its very best at bigger sizes, complementing Nunito’s well-balanced rounded forms. If you sell clothes, these fonts are a great choice.

Playfair Display + Source Sans Pro

The classic style of Playfair Display is even more prominent when paired with Source Sans Pro, which was created to work well in user interfaces. This timeless combo would work well with stores specializing in women’s beauty products or dress shops.

Alegreya + Lato

Alegreya’s dynamic and varied rhythm provides freshness to the page, setting off Lato’s semi-rounded details and strong structure. Take a closer look at these fonts if you sell lingerie or other elegant accessories.

Rokkitt + Lato

Rokkitt was designed for use as a display font in headings and headlines. Combine it with semi-rounded san serif Lato to create a prominent look. Pay attention to this combination if your store focuses on premium sportswear or stylish tech.

Lato Light and Lato Regular

Sometimes using different fonts in the same family can work as well, but make sure you create adequate visual contrast between the two. For a sleek look, I’ve paired Lato Light in a bigger size with Lato Regular at a smaller size. This combination works best with fashion and jewelry ecommerce sites.

Montserrat Bold and Roboto Regular

Sometimes you just need a nice clean font pairing. While two sans serifs aren’t exactly opposites of each other, I’ve used font weight to create more contrast between the two fonts. Montserrat Bold is a heavy font that works well with the lighter Roboto Regular. This pairing is best for ecommerce websites selling electronics or industrial parts.

Raleway and Roboto Slab

Raleway font can highlight unique characteristics of your brand with its minimalistic style, whereas Roboto Slab is different and has friendly curves that give a natural touch.

This pair makes an excellent choice for clean typography.

Best Google Fonts for Shopify Store

Fonts are important, so it’s time to get rid of the default. Google Fonts is one of the best resources for free website fonts.

To help make the process of using web fonts easier and cost effectively, Google offers a great free service called Google Fonts. The service was first launched in 2010 and offers a wide selection of open source fonts that can be easily utilized on websites. Since the fonts are all open source, there’s never a fee to use them — and Google also takes care of the servers needed to store the files at no cost.

Open Sans and Roboto

The header of this screenshot is Open Sans semi-bold. The paragraph below it is Roboto regular.

The reason why these fonts work so well together is because they are both crisp and extremely legible.

Merriweather and Lato

Merriweather light and Lato regular is a very clean and professional combination.

It’s a popular choice because the options are so versatile. Merriweather light is modern, tasteful, and appealing. When it’s followed up with text written in Lato, the pairing feels trustworthy.

Playfair Display and Montserrat

This font combination works best for shorter text on your website. I wouldn’t necessarily use it on a blog post or something like that.

However, this pairing is perfect for a product title and product description, especially for ecommerce shops in the fashion industry.

Fonts used by Top Ecommerce Stores

In my opinion it’s Arial, Helvetica, Verdana [Helvetica comes standard with Apple, and Arial for Microsoft] Why? Because they are free, mostly come standard, are very legible at small sizes and are visually similar in appearance, spacing etc. So, you can trust your layout will look relatively similar cross platform and browser.

Crate & Barrel:

Helvetica, Arial, Sans-serif

Williams & Sonoma:

Arial, Helvetica, Verdana, Geneva

Amazon.com:

Arial, Helvetica, Verdana, Geneva

Apple.com:

Lucida Grande ,Helvetica, Arial, Verdana

Target.com

Helvetica Neue , Helvetica, Arial

Macys.com

Verdana, Arial, Lucida, Sans-serif;

Victoriassecret.com

Arial, Verdana

 

Tips on selecting the correct font design

• The first thing you need to do is determine what type of content the font will be used for. Decide if the fonts are for your blog, homepage, landing page, product description, or navigation menu.
• You’ll also want to consider the type of business you have, as well as the audience you’re targeting. Does the font need to be professional? Or do you have some room to be a bit unique? You should focus on the font style has the characteristics you need to represent your brand voice and image. Decide your brand voice and genre. Based on the genre and subject, you can select a style. Be it romantic, elegance, beauty or vintage. The curve style can also be chosen well.
• Don’t pick a super complex font design that’s challenging to read. Never give up readability for design. If you can’t read the text with a quick glance, scrap it!
• You should also consider different devices when picking a font style. Your font style should be versatile.
• The key to pairing two fonts together is contrast. The fonts should be different enough that each is distinguishable, but not so different that the reader is distracted.
• You may want to use a few font combinations on your website, but don’t go overboard. Keep it simple. Each page should just have two fonts; three at most. If you want to use more, consider using variations of the fonts already on the page (light, italic, medium, bold, etc.) instead.
• Don’t use tacky fonts
• Don’t use messy fonts that’s hard to read. When in doubt, these are the font design you can always turn to:

• Add enough spacing between each line.
• Don’t use too many font colors

Conclusion

Selecting the right fonts for your online store might be daunting, but these examples will help you create the best font pairing for your site. Using attributes like color, size, weight and classification, you can create a duo that works well together.

I tried to provide a little bit of something for everyone. Keep in mind, not all of these fonts will work for every website. So go through these and see which fonts fit best for your business, industry, audience, and theme.