The Best fonts for your eCommerce website

Your online shop is composed from a variety of elements, from the colors and logo to the language you choose to use as well as the level of your customer service. Of course the fonts play a large component of this.

The fonts that you use on your website will go a long ways to creating the look and feel of your business -- professional, quirky, serious, fun, etc. Additionally, they play an vital role in providing the best experience to your visitors, including those with visual impairments.

However, how do you pick appropriate fonts to use them in the best manner?

An introduction to typefaces and fonts

Take a break for a moment. You're probably familiar with typefaces like Times New Roman, Helvetica as well as the much-banned Comic Sans. What are they specifically?

The definition of a font is a digital representation of text that contains various styles. Like, Helvetica has 36 different styles, such as:

• 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 with letters that are closer together)
• Helvetica Rounded (a version with the letters rounded)

The font is extremely specific, having exact weights and style. Therefore, Helvetica Bold is a font, whereas Helvetica is a typeface. For the purpose of this article, we'll be using the terms "typeface" as well as "font" to refer to them interchangeably.

There are four primary styles of fonts that you can choose from, and you can combine and mix to get an appropriate look for your website.

Serif fonts have extra strokes in certain letters in contrast, Serif fonts do not. Serif fonts do not include the strokes. Below is an illustration of letters with and without serifs here:

In general, serif fonts tend to be more classic and are an perfect for exuding expertise and confidence. They can also be simpler to read because serifs can help distinguish every letter separately. Sans serif fonts are clean and can feel more easy to read than other fonts. It's still easy and simple to read even in huge volumes of text.

Handwritten and script fontsclosely mimic handwriting, and can sometimes be extremely elaborate. They are a lot easier to read than others and also vary in their style. Here are two examples:

You can clearly see that the first one is elegant however the other appears much more welcoming.

Display fontsare incredibly diverse, they cover anything that can be described as ornamental. They differ in appearance and feel but usually, they're used only to create titles. Below are three types of fonts for display.

These three don't look very like each other are they? However, they're an excellent option to build brand swag.

What is the best way to select and use the correct fonts

So now that we've established the basics we can look over a some helpful guideline for selecting the right web-based store font.

1. Consider legibility

The whole point of text is understood, so readability must be the primary factor when selecting a font. In the end, if your people can't understand your content, they can't learn about your offerings or get information the details about your business and even be able to buy anything!

Your body text should almost always be either Sans serif or serif font as they allow visitors to read huge blocks or paragraphs of text. Keep script and display fonts for headings. And, at all times, ensure they're easy to read.

The next thing to consider is spacing between your texts. There are three major factors to consider when spacing:

1. Kerning Amount of room between two words. Correct kerning will ensure that every word is legible in its own way and doesn't look like two.
2. Leading The distance between two paragraphs of text. A properly led paragraph makes text much easier to read.
3. Tracking Controls the spacing between letters within words as a group, rather than individual characters. So, instead of just changing the spacing between "t" as well as the "h" for the expression "this" then you'd have to alter the spacing between the four letters in one go.

Here's an example of the three

Ideally, spacing between letters and lines will make it easy for people to read, particularly in paragraph format. Do not worry, studying more about this could be fun! There are great online games which give you hands-on practice.

2. Take a look at brand identity

The identity of your brand can be what makes you stand out. It's what defines the character of your business. Your font choices are one component that displays that personality to potential as well as existing customers.

So what feeling do you want to invoke for your visitors on your website? Fun and quirky? Dependable and reliable? Sophisticated and elegant? Let's look at how a few websites make use of fonts in order to express their image.

Scratch Pet Food has a branding that is super-friendly, and their fonts reflect this. They employ a strong sans serif on headlines and a lighter sans serif font for body text.

FLWR is an interior design company andsince they create designs for special events like weddings, it makes sense to have their fonts stylish and elegant. They blend a contemporary serif with a thin sans serif for a bespoke appearance that complements their bouquets.

Ryanair's corporate website is, it's true, corporate and their fonts reflect that. They chose versions of the same simple, professional font for both headlines and body text. The font is professional and doesn't seem suffocating.

Are you aware of the way these three companies use fonts to communicate the image they want their customers to have when they hear their name? It's the same thing. Don't be afraid to try different types of fonts too, until you find the perfect look.

3. Limit yourself to a few of fonts

Although it's tempting to include all of the amazing fonts that you can find in your store, you'll want to stick to just a couple. Otherwise, your store can seem disconnected and all over the place which could make it difficult to your customers.

If you are choosing fonts, try pairing them with different situations to see if they work well together. You may choose one font for headings, while one 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 differentiate text without straying from the similar font family.

Daelmans's Stroopwafels, for example, utilizes the same font for headlines and body text. They employ a bold all-caps font for headlines as well as a light version that is used for body content. To give their site an extra dimension, they sometimes utilize a script font that mimics the caramel included in their offerings. When used only sparingly, works well in accentuating important themes and making the site appear genuine and distinctive.

Scrollino is a store selling kids' products utilizes a highly easy and fun serif font in their headers. They pair that with a clean, simple sans serif for body text to create a clear and enjoyable feel.

4. Select the correct font size

It is essential that the font is big enough that visitors can read, including those with visual impairments. It is generally recommended to use 16px for the minimal size that you must use, though that can differ based depending on your font. For example, some fonts are more difficult to read when smaller.

If you are able, have real people to check the text to see whether it's simple to understand. And make sure to review your text across any kind -- including tablets, desktops as well as mobile phones. Software such as Screenfly help make the process much easier.

Heggerty, the company that offers curriculum as well as other educational resources utilizes pleasantly large font sizes. Although they're not huge enough that they completely take over design, they're simple and simple to read on all devices.

5. Take into account accessibility

Another thing you should consider is to ensure that the text is big enough to be read, and is not overly complicated, as discussed above. But you also want to take into consideration color contrast. You need to make sure that your text is clear to read on any background you're using, regardless of whether it's a solid or solid-colored pattern, or image.

The contrast ratio can range between 1:1 (white on white) up to 21:1 (black on white). The the contrast ratio you're looking for when using text is 7:1 for body text , and 4.5:1 in headlines. The WAVE accessibility software to analyze your site for contrast ratios in color, along with other factors that affect accessibility.

Track 7 Brewing performs a fantastic job of contrasting colors on dark backgrounds. On their homepage, they use either white or bright orange text so that it stands out from the darkened image behind it.

6. Beware of all caps within paragraphs.

Although all caps can be effective in making an impression but they can also be difficult to read in large text. Our brains have difficulty making sense of text capitalized when it is in paragraph form. This causes reading to be slower and more difficult.

So, if you do wish to make use of all caps, make sure to use them sparingly, and only for headlines. That's the way Veer uses -- all capital letters are very effective at making an impact and drawing attention to their site, but they avoid it in paragraphs.

What are web safe fonts?

Browsers render and load fonts differently across different web browsers. Web safe fonts are ones which look stunning and work properly on every browser and all devices. And while you don't necessarily have to use the fantastic personal fonts you select for your brand but you should add web safe options to the font library which is the selection of fonts you use on your website.

This basically creates a backup font for your store and gives you full control over how text displays if, due to some reason, your custom font won't be able to load for visitors. As an example, you could inform browsers to select Playfair when your customized font isn't accessible, Georgia if Playfair isn't an option, and a default serif type if both of these don't works.

Kinsta gives great advice for adding backup web safe fonts to your site.

What fonts can you use for your website

So how do you find the best fonts for your web store? The first thing to do is make sure that you have the legal rights to use whatever options you choose. There are fonts that are available for free to use in all circumstances Some fonts are paid for to be used for any purpose Some are completely free onlyfor private use. Make sure you know how the license works on your fonts.

Here are some fantastic websites fonts to use:

• Google Fonts: Google Fonts has an extensive collection of fonts, which are free for commercial and personal use. They also have tools to see Fonts as they work.
• The theme you choose WordPress theme: A lot of WordPress themes have the font libraries, which are often from sources like Google fonts. These fonts you are able to use to build your website.
• Creative Market: An online marketplace to sell digital assets Creative Market offers some really gorgeous, original fonts available with a range of styles.
• Font Squirrel The site sorts fonts by category and allows you to view the fonts. Be careful though -- there are some fonts that are intended meant for use by the user, so make sure you are aware of the type you're downloading.
• Adobe Fonts High-quality typefaces for businesses who have Creative Cloud licenses.

How to change the font used on your website?

After you've chosen your fonts, you're ready to add them to your website. There are three primary options to apply them:

1. Use your chosen theme

Like we said earlier, a lot of themes include a library of fonts. Some allow you to apply those fonts to your site in their own settings panel. Or, you can configure the fonts with the WordPress Customizer:

1. On your WordPress Dashboard, click the Appearance tab and then Customize.
2. Click on the Fontsoption.
3. Select the dropdowns for the various types of textsuch as Headings and Base Font etc. Select the font you want to use. Every time you change fonts, the display of your website will change to let you see how the new look will be before installing the font.

The Customizer can also adjust options for font style (bold italicized, bold, etc.) and font size.

2. Use a plugin

If the theme you're using doesn't have fonts, or does not offer the fonts that you would like to work with, the most efficient option is using an extension. There's an array of options available, but if you want to use the Google font, then WP Google Fonts is an excellent choice. It gives you access to the entire Google Fonts library, then permits you to add individual fonts to various areas on your website, including headings, paragraphs, as well as lists.

If you want to use an original font that you have found elsewhere, check out to use the custom fonts plugin. You can create your own fonts and integrates with well-known themes and page builders for an easier installation.

3. Use custom code

If you're familiar with code There are two additional options:

1. Host fonts on your own site and use codes to add them to areas of text
2. Install the fonts downloaded from a third-party sources (like Google Fonts) and enqueue them

For further details and directions For more details and directions, refer to this article from Kinsta.

Explore your creativity, but remember that the simple way is always best.

Make sure you have fun using your fonts! Make your brand unique and choose options that best convey the spirit of your business. But, at the same time, remember that simple is the most effective way to go. Pick fonts that are easy to read, and don't make it too complicated by using four or five different alternatives. Your customers should be the top priority.