How to Choose the Right fonts for your eCommerce website

The online store you run is made up of many components, from your colors and your logo, to your choice of language to employ as well as the level of customer service. Also, obviously, your fonts are a major role in that.

The fonts you employ for your website will go a long ways to establishing the feel of your company's image -- professional, quirky, serious, fun, etc. They also play a really vital role in giving an excellent experience for the customers you serve, even the ones with vision issues.

How do you pick the correct fonts and apply the best way possible?

A brief introduction to typefaces and fonts

Take a break to pause for a second. Most of you are acquainted with fonts like Times New Roman, Helvetica as well as the much-banned Comic Sans. But what do they mean, specifically?

The definition of a font is the computer-generated representation of text, with a range of different styles. As an example, Helvetica has 36 different styles, and includes:

• Helvetica Light (the thin version)
• Helvetica Oblique (the italicized version)
• Helvetica Bold (the bold version)
• Helvetica Black (an even thicker plus bolder version)
• Helvetica Condensed (a version with letters that are closer together)
• Helvetica Rounded (a version with the letters being rounded)

It's one of the typeface that that is very specific with exact weights and styles. Thus, Helvetica Bold is a font. Helvetica is the name given to a typeface. To make this post it easier to understand, we'll employ the terms "typeface" and "font" in conjunction.

There are four main kinds of fonts to pick from. You can combine and mix to get the perfect look and feel for your website.

Serif fonts come with extra strokes added to certain letters. Serif fonts do not. Serif fonts don't have the strokes. Below is an illustration of the letters with and without serifs below:

Serif fonts generally have a more classical look and are great for displaying knowledge and trustworthiness. Additionally, they're more readable, as serifs can help distinguish the letters individually. Sans serif fonts look clean and feel more accessible than their counterparts. They're still simple and easy to read through large chunks of text.

The handwritten font and the script fontclosely mimic handwriting, but can also be quite intricate. They are a lot easier to read than the other types and can vary in their style. Here are two examples:

There is no doubt that the first one is classy and the second much more welcoming.

Display fontsare extremely diverse they include everything that can be described as decorative. They may differ in design and feel but are typically used just to create titles. Below are three examples of display fonts.

They don't seem like they do are they? They're nevertheless a good way to design brand swag.

What's the best method to pick and select the appropriate fonts

Now that we've established the basics and the basics of fonts, we can look over some helpful guideline for selecting the right fonts for your online store.

1. Consider legibility

Text's primary function is to be comprehended, and therefore legibility should be your number one consideration when choosing the font. In the end, if the visitors aren't able to read your text, they can't learn about your products or get information about your company and even make a decision to purchase!

The text that you compose for your body should almost always be written in Sans serif and serif font , as they help readers to read huge blocks or paragraphs of text. Use script and display fonts for headings. Always make sure they are easy to comprehend.

Another thing to think about is spacing between your texts. Three main factors to consider when spacing:

1. Kerning Amount of room between two words. A proper kerning process makes sure that each word is legible in its own way and doesn't end up looking as if two words.
2. Leading refers to The distance that separates two paragraphs of text. Proper leading makes paragraphs of text much easier to comprehend.
3. Tracking determines the spacing of the letters of the word as a whole not the individual letters. Instead of altering the spacing between "t" in the word "this" and "h" in"this, "this" it's best to alter the spacing between each of the letters simultaneously.

Here's an example of the three

The ideal spacing between letters and lines makes it easier for people to read, particularly when they are in paragraphs. Do not worry, learning more about this will make you smile! There are some amazing online games that offer players the chance to learn using your hands.

2. Think about the brand's identity

The brand's image can be the thing that makes your company stand out. Your persona is the one that is what defines your business. The fonts you select convey your character to potential customers as well as those who are already in your business.

What sort of feelings do you hope to create to your visitors on your site? Do you want to be funny and enjoyable? Professional and trustworthy? Sophisticated and elegant? Let's look at methods that some websites employ fonts in order to express their identity.

Scratch Pet Food has a company that is extremely welcoming and their fonts show the same. The fonts they use are bold sans serif for headlines, and a light non-serif font for body text.

FLWR is a floral design studio as an art studio. As they create arrangements for events such as weddings, it makes sense to have their fonts attractive and classy. They combine a modern serif with a thin sans serif, creating a unique style that is complimented by their wedding bouquets.

Ryanair's corporate website is, it's true, corporate and the fonts they use reflect this. The fonts they've selected are variations of the same professional font that they use for headlines as well as body text. It's modern and not snazzy.

Do you realize that all three of these organizations employ fonts to communicate the emotion they want people to feel upon seeing their logos? Do the exact same thing. Be sure to test other fonts until you find the perfect design.

3. You can only use a few fonts

Although it's tempting to incorporate all the wonderful fonts available on your site, you should limit yourself to only a couple. If you do not, your site may appear disorganized and all over the place, and you may create an unsettling experience for your visitors.

In selecting your fonts, you should pair them with different scenarios to see whether they are compatible. You may choose one font to use for headings and another as body text. There are many different versions of the font, such as Bold and All Caps to create a unique font, but still within the same font family.

Daelmans ' Stroopwafels is an illustration. It utilizes the same font to write headlines as well in body content. The font is bold and an all-caps font for headlines and a lighter version to write body texts. However, in order to give the site more personality, they occasionally use a script font that corresponds to the caramel used in their offerings. The script, when utilized in a limited amount, could be effective in emphasising the most important aspects and making the site appear authentic and distinct.

Scrollino can be described as the name of a store which sells children's products, uses a super easy and fun serif font for their headers. They pair that with a minimalist, clean sans serif body text, that gives it a beautiful and enjoyable look.

4. Select the correct size font

It is crucial that the text is large enough for site visitors to read, including people with visual impairments. It is recommended that you use 16px for the minimum font size that you should use However, that could differ in accordance with the font you use. Certain fonts are harder to read if they're smaller.

If you are able, have real persons read the text and determine whether it's simple to understand. Make sure to review your writing on any device of kind -- including tablets, desktops, and mobile phones. Applications such as Screenfly help make this task a lot easier.

Heggerty The company offers curriculum as well as other educational materials that use large size fonts. Although they're not huge enough that they take over the appearance of the site They're simple and easy to read on all devices.

5. Consider accessibility

The other aspect to think about is to be sure your text is large enough to be read, and not too complicated, as discussed above. You should also consider color contrast. It is essential to ensure that your content is clear to read no matter the background it's placed on regardless of whether you're using a solid color layout, or even an image.

The proportion of contrast could vary from 1:1 (white on white) to 21:1 (black on white). The ideal contrast ratio that you want to achieve in text should be between 7 and 1 in body text as well as 4.5:1 for headlines. There is a way to utilize WAVE's WAVE accessibility software to look over your site to find the contrast ratios and other accessibility elements.

Track 7 Brewing is a masterful blend of using contrasting colors in darker backgrounds. Their website design, for instance, employ either bright or white red text that makes a statement in contrast to the dark backgrounds behind it.

6. Make sure to avoid all caps within paragraphs.

All caps are great to make a powerful impression however, they are not easy to read in large texts. The brain has trouble reading texts that are capitalized, especially even when it's written in paragraph format. This causes reading to be more difficult and slow.

So, if you're planning to make use of the entire alphabet, do them sparingly, and only for headlines. That's what Veer is doing and all capital letters have a huge impression and attract the attention of their site, however they avoid it when they write paragraphs.

What is the best web safe font?

The way fonts are rendered in browsers and loaded is distinct on various websites. Safe fonts for web are those which look stunning and work correctly on all browsers as well as all gadgets. Although you don't necessarily require the amazing custom fonts you chose to represent your company, you do want to incorporate web safe alternatives into your font collection and the choice of fonts you use on your website.

This basically sets up the default font of your shop and allows you complete control over the way your text is displayed if due to some reason your font doesn't show to the user. For example, you can instruct browsers to choose Playfair when your own font isn't available, Georgia when Playfair isn't an option or a standard serif font when both of the fonts aren't available.

Kinsta provides helpful suggestions to add the security-grade fonts for web use to your website.

What fonts are you able to use for your website

What are the best methods to locate the top fonts you can make use of in your online shop? Make sure you have the legal rights to use whatever options you select. Some are free for all purposes while others have premium pricing that are suitable for all uses, and still others are available for free just for personal use.for private use. Take the time to understand what the terms of license mean on your fonts.

Here are some great sources for fonts that are used in websites:

• Google Fonts: Google Fonts has an extensive collection of fonts. They are all available for personal and commercial use. Additionally, you can use their software to view Fonts as they work.
• Your theme pick WordPress theme There are a lot of WordPress themes include collection of fonts, typically taken from sources such as Google fonts. These fonts can be used to build your website.
• Creative Market An online marketplace to sell digital content, Creative Market offers some really stunning, distinctive fonts that come in a different styles.
• Font Squirrel The site sorts fonts by category and allows you to view the styles of each. Be careful, however -- there are fonts that are intended for personal use and that's the reason you need to be aware of the type you're downloading.
• Adobe Fonts Typefaces of high-quality are available to businesses that have Creative Cloud licences.

Make changes to the font that you have on your website?

Once you've selected your fonts, it's time to add them to your site. Three options are available to apply the fonts:

1. Use your theme

Like we said, many themes have a library of fonts. Certain themes allow you to add those fonts to your website through their settings panel. Additionally, you can add these fonts using The WordPress Customizer.

1. In the dashboard of your WordPress dashboard, navigate to Settings > Appearance.
2. Click the option to open the Fonts.option.
3. Choose the dropdowns that are available for each type of text- headings and Base Fonts etc. Select a font. When you change fonts, your site's appearance will change so you can test what your new design will look like before using the font.

The Customizer are able to make adjustments to the choices to alter the font style (bold or italicized.) as well as font size.

2. Use a plugin

If your theme doesn't include fonts, or does provide the fonts that you're looking for it is best to add an extension. There's an array of choices  and if you opt to use a Google font, the WP Google Fonts is a great option. It allows access to the full Google Fonts library, then permits you to add individual fonts to various areas of your website, like headers, paragraphs, and lists.

If you'd like to utilize the font you want to apply from a different source, think about using the custom fonts plugin. This plugin lets you create your own fonts and integrates with well-known themes as well as web builders to make installation simple.

3. Use custom code

If you're familiar in programming, you have two additional choices:

1. It is possible to host fonts on your personal site using code that makes the fonts apply to specific the text
2. Install the fonts downloaded from an outside source (like Google Fonts) and enable them

To learn more about the information and to get more details and instructions, read this blog post by Kinsta..

Think outside the box, but bear in mind that the easiest method is the best.

Enjoy your fonts! Create your own unique branding and choose options that best represent the feel of your business. Yet, keep in mind that simplicity is the most efficient and efficient way to do it. Choose fonts that are easy to comprehend, and do not overload the reader with many options. Your audience should be your primary concern.

This post was first seen on here