The Best fonts for your eCommerce website

The brand of your online store is comprised of many different components, from your colors and logo , to the language you choose to use as well as the level of your customer care. Of course that includes fonts. Fonts make up a significant element of it.

The fonts that you use for your site will go a long ways to establishing the feel of your business -- professional, quirky and serious etc. They play an vital role in providing an excellent experience for your users, especially those with visual impairments.

However, how do you pick the right fonts and utilize them in the most effective way possible?

A primer on typefaces, and fonts

We'll take a step back for a moment. It's likely that you've heard of typefaces such as Times New Roman, Helvetica, and the much-maligned Comic Sans. But what are they, specifically?

Well, a font is an electronic representation of text, which has various styles. As an example, Helvetica has 36 different choices, which include:

• Helvetica Light (the thin version)
• Helvetica Oblique (the italicized version)
• Helvetica Bold (the bold version)
• Helvetica Black (an even thicker, bolder version)
• Helvetica Condensed (a version of the alphabet with more letters)
• Helvetica Rounded (a version with round letters)

A font is extremely specific, with exact weights and styles. So, Helvetica Bold is a font, whereas Helvetica is a typeface. In this article, we'll be using the terms "typeface" and "font" to refer to them interchangeably.

There are four major types of fonts that you could choose from as well as combine and mix to get an appropriate look for your website.

Serif fonts include extra strokes in certain letters while Serif fonts do not. Serif fonts do not include the strokes. Here is an example of letters with and without serifs in the following:

In general, serif fonts tend to be more classic and are an perfect for exuding knowledge and trustworthiness. Also, they are more readable, as the serifs define each letter individually. Sans serif fonts look clean and feel more accessible than their counterparts. They're still simple and easy to read in large bodies of text.

Script and handwritten fontsclosely mimic handwriting, and are sometimes very ornate. They are a lot easier to read than others, and they vary widely in style. Here are a couple of examples:

You can clearly see that one is very elegant, while the other looks quite more casual.

Fonts for displayare incredibly diverse, they cover anything that can be considered decorative. They vary widely in look and feel but usually, they're used only to create titles. Three types of fonts for display:

The three of them don't appear very alike, do they? They're nevertheless a fantastic method to create a brand's feel.

How to choose and implement the right fonts

So now that we've established the basics we can look over a couple of helpful tips to choose the best fonts for your online store.

1. Consider legibility

The purpose of text is that it should be read -- so legibility should be your number one factor when selecting the right font. If people can't understand your content it's impossible for them to learn about the products you offer or learn more about your business, much less decide to purchase!

The body text you write should nearly always have a Sans serif or serif font as they allow visitors to read large paragraphs or blocks of text. Keep script and display fonts for headings. And, at all times, ensure they are easily read.

The next thing to be thinking about is spacing between your texts. There are three primary space considerations to be aware of:

1. Kerning: The amount that space is left between two words. Correct kerning will ensure that every word can be read independently and ensures that no word will look like two.
2. Leading: A distance that separates two lines of text. Correct leading can make paragraphs of text more readable.
3. Tracking controls the spacing of letters in words as a whole and not just the individual letters. So, instead of just altering the space between "t" in the word "this" and "h" in the word "this" then you'd have to alter the spacing between the four letters simultaneously.

Here's an example of each of them:

The ideal spacing between lines and letters makes it easier to read particularly in paragraph format. But don't fret; learning more about this can be enjoyable! There are some great online games which give you the opportunity to practice in a hands-on manner.

2. Consider your brand's image

The identity of your brand can be what makes you stand out. It's the personality of your business. The fonts you select represent that personality to potential as well as existing customers.

What kind of feeling are you hoping to instill on your site? Funny and fun? Reliable and professional? Elegant and sophisticated? Let's look at how a few websites make use of fonts in order to express their brand.

Scratch Pet Food has a brand that's extremely friendly, and their fonts reflect that. They employ a strong sans serif on headlines, and a light sans serif body font.

FLWR is an interior design company and, since they design for events such as weddings and other special occasions, it is natural to have their fonts elegant and beautiful. The fonts they use combine modern serif with a thin sans serif to create a unique look that matches the bouquets they design.

Ryanair's Corporate website is it's true, corporate and their fonts are a reflection of that. They chose variants of the same basic professional fonts for headlines and body text. It's elegant and professional, without appearing clunky.

Do you recognize how all three of these companies use fonts to communicate the feeling they want people to have when they hear their name? It's the same process. Be prepared to try different types of fonts too, until you've come up with the ideal style.

3. Use a limited number of the fonts

It's tempting to incorporate all the wonderful fonts available into your site but you should limit yourself to a few. In the event that you don't, your site will seem disconnected and everywhere or make it difficult for visitors.

If you are choosing fonts, you should pair them up in different situations to see if they work well together. One font could be used for headings, while an alternative to be used for body texts. It is also possible to use different versions of a font -- like the bold type or all caps -- to set text apart without straying from the similar font family.

Daelmans's Stroopwafels For instance, HTML0 utilizes the same font for headlines and body text. The font is bold and all-caps style for their headings and a lighter version to use for body texts. However, in order to give the site more personality, they occasionally use a script font that is akin to the caramel used in their offerings. When used in a limited amount, can be effective in highlighting important concepts and making their site feel authentic and unique.

Scrollino is a store selling kids' products, uses a super easy and fun serif font to make their headlines. The font is paired with a crisp, easy sans serif font for body text to create a clear and fun feel.

4. Make sure you choose the appropriate font size

It's crucial that your text is large enough for site visitors to read for all users, even those with visual impairments. The rule of thumb is 16px as the minimal size you should employ, however, that could depend on the font. Some fonts, for instance, can be difficult to read smaller.

If you can, get someone who is a real person to review the text to see whether it's simple to comprehend. Also, make sure you review it on devices of any kind -- including tablets, computers and even mobile phones. Applications like Screenfly help make this task a lot easier.

Heggerty, the company that offers curriculum as well as other educational resources, uses pleasantly big size fonts. Though they'ren't so large that they completely take over appearance of the site, they're easy and easy to read on all devices.

5. Consider accessibility

One of those things is to ensure that the text is sufficiently large for readers and not complicatedas we have discussed previously. You should also consider color contrast. It is essential to ensure that your text is clear to read no matter what background you're using, regardless of whether it's a solid color patterns, or images.

Contrast ratio ranges from 1:1 (white on white) up to 21:1 (black on white). It is recommended that the proportion of contrast you're looking for with text is around 7:1 for body text , and 4.5:1 when it comes to headlines. You can use the WAVE accessibility software to evaluate your website to determine the color contrast ratios along with other factors that affect accessibility.

Track 7 Brewing is a master of color contrast when viewed against dark backgrounds. Their homepage make use of either white or yellow text that makes a statement against the dark image behind it.

6. Beware of all caps within paragraphs.

Although all caps can be excellent for creating a strong impression but they can also be difficult to read in bodies of text. The brain has trouble reading text that is capitalized in paragraph format, which makes reading it slower and more difficult.

So, if you do need to use the entire alphabet, do it sparingly and only in headlines. This is how Veer uses with all capital letters. can be very effective in making the point and drawing attention to the site, but avoid it in paragraphs.

What about web safe fonts?

Browsers render and load fonts differently across the web. Web safe fonts are ones which look stunning and work properly on every browser and every device. And while you don't necessarily need to skip the great personal fonts you select to promote your business however, it is important to add web safe options to the font library -- the collection of fonts used for your website.

Doing this essentially sets a backup font for your site and grants you full control over how text displays if, in some way your font isn't able to load for a visitor. You can, for instance, instruct browsers to choose Playfair in the event that your font isn't available, Georgia if Playfair isn't an option, and then a default serif font if neither of those are available.

Kinsta gives great advice to add the backup fonts that are safe for web use to your website.

How do you find the right fonts for your website

So how do you find the best fonts for your web store? The first thing to do is ensure that you've got the legal rights to utilize the fonts you choose. There are fonts that are free for all purposes Some fonts are paid for that are suitable for all uses while others are free for personal use only.for private usage. Make sure you know how the license works on your fonts.

Here are some fantastic sources for fonts used on websites:

• Google Fonts: Google Fonts has an extensive collection of fonts that are available for free both for commercial and personal use. It also offers software to view Fonts as they work.
• Your theme: Many WordPress themes have the font libraries, which are often from sources like Google fonts, that you can use on your website.
• Creative Market A web-based marketplace for digital assets Creative Market offers some really gorgeous, original fonts available in a variety of styles.
• Font Squirrel: This resource sorts fonts by category and lets you preview them. But be careful -- certain fonts are only meant for use by the user and you should understand the font you're downloading.
• Adobe Fonts They are premium typefaces available to businesses that have Creative Cloud licenses.

Change the font of your site

After you've chosen the fonts you want to use, it's time to add them to your website. There are three options to apply them:

1. Make use of your chosen theme

As mentioned earlier Many themes include a library of fonts. Some allow you to apply those fonts to your site in their own settings panel. You can also configure the fonts with the WordPress Customizer.

1. On the dashboard of your WordPress Dashboard, click the Appearance tab and then Customize.
2. Click on the option for Fonts.option.
3. Click the dropdown menu for the various types of textfor example, Headings, Base Font, etc. Select a font. Each time you switch fonts, the display of your site will update to let you see how the new look will be before using it.

In the Customizer, you are able to adjust the options regarding font styles (bold or italicized.) and size.

2. Use a plugin

If the theme you're using doesn't have fonts or the fonts you'd like to use, the next easiest option is to use a plugin. There's a myriad of choices, however if you want to use an Google font, then WP Google Fonts is the best choice. It allows access to the entire Google Fonts library, then lets you apply specific fonts on various parts of your website, such as headings, paragraphs, as well as lists.

If you're looking to install an original font that you have found elsewhere then consider using to use the custom fonts plugin. It allows you to add your own fonts, as well as integrate with other popular themes as well as page builders for an easier setup.

3. Make use of a customized code

If you're familiar with code, you have two other choices:

1. You can host fonts on your personal website and then use the code to apply them to text areas
2. Load the fonts from an external sources (like Google Fonts) and enqueue them

For more details and instructions for more information and instructions, read this article by Kinsta.

Be creative but keep in mind that simple is best

Have fun with your fonts! Create your own unique branding and pick fonts that convey the spirit of your business. However, at the same time, remember that simple is the most effective most effective way to go. Choose fonts that are easy to read, and don't make it overwhelmed by using four or five different choices. Your audience should be your first priority.