The most appropriate fonts to use on your eCommerce site

The branding of your online store is made up of many different parts, from the colors and logo , to the language you choose to use along with the degree of customer service. Of course that includes the use of fonts. Fonts make up a significant part of it.

The fonts that you use on your website will go a long ways to establishing the feel of your business that is professional, fun and professional, etc. They play a crucial role in providing a great experience for your users, especially for those with visually impaired.

But, how do you select the appropriate fonts and utilize them in the most efficient way possible?

An introduction to typefaces and fonts

We'll take a step back for a moment. You've probably heard of typefaces such as Times New Roman, Helvetica and, of course, the much-banned Comic Sans. What are they specifically?

The answer is that a font is an electronic representation of text that comes in a variety of styles. In this case, 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 and bolder variant)
• Helvetica Condensed (a version of the alphabet that has more letters)
• Helvetica Rounded (a version with round letters)

It is a typeface is extremely specific, with exact weights and designs. So, Helvetica Bold is a font, and Helvetica is a typeface. In this post, we'll be using the terms "typeface" and "font" to mean both.

There are four major types of fonts that you can pick from and blend and combine to achieve an appropriate appearance for your site.

Serif fonts include some strokes added to certain letters while Serif fonts do not. Serif fonts do not include the strokes. Here's an example of serifs and letters without as follows:

The general rule is that serif fonts tend to be classic and are an perfect way to show trustworthiness and expertise. They are also more readable, as the serifs define every letter in a distinct way. Sans serif fonts appear sleek and are more comfortable than their counterparts. They're still simple and easy to read in large bodies of text.

Script and handwritten fontsclosely mimic handwriting, they can be very elaborate. They're much easier to read than others, and they vary widely in terms of style. Here are a couple of examples:

It is evident that one is very elegant The other is quite more casual.

Fonts for displayare incredibly diverse, they encompass anything that could be considered decorative. They vary widely in look and feel but usually, they are used to make titles. There are three types of fonts that can be used for display:

They don't seem to be very alike, are they? However, they're a great way to create a brand's feel.

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

After we've understood the basic principles, let's look over a couple of helpful tips to choose the best web-based store fonts.

1. Consider legibility

The primary purpose behind text is to be read -- so legibility should be your number one factor when selecting the correct font. If readers are unable to understand your text, it's not possible for them to learn about the products you offer or learn more about your company and even to decide to buy!

The text in your body must almost always be written in the serif or sans serif font as they allow visitors to read large paragraphs or blocks of text. Use display and script fonts in headings. At all times make sure that they can be understood.

The next thing to be aware of is the space between your articles. There are three primary factors to think about when spacing your text: of:

1. Kerning: The amount that space is left between the words. A correct kerning process will guarantee that each word is read independently and ensures that none of the words will appear similar to two.
2. Leading: The distance which separates two paragraphs of text. Proper leading makes paragraphs of text easier to read.
3. Tracking controls the spacing of the letters of words as a whole and not only the individual letters. Therefore, instead of changing the spacing between "t" in the word "this" and "h" in the word "this" it is necessary alter the spacing between four letters at the same time.

Here's an example of each of these:

A proper spacing between the letters and lines makes it easier to read particularly when in paragraph format. However, if you're interested in learning more about this can be enjoyable! There are some excellent online games giving you the opportunity to practice in a hands-on manner.

2. Think about the image of your company

Your branding identity could be the thing that makes your business stand out. Your brand's personality is the essence of your company. The fonts you choose represent this personality to future and existing clients.

What kind of feeling are you hoping to instill through your website? Funny and fun? Professional and trustworthy? Beautiful and refined? We'll look at the ways some websites utilize fonts to communicate their brand.

Scratch Pet Food has a company that's very friendly and their fonts show that. The fonts are strong sans serif on headlines, and a light Sans Serif Body Font.

FLWR is an interior design business as well as a designer for events such as weddings, and other occasions It is only natural for them to use fonts that are elegant and beautiful. They use fonts that blend modern serifs with slim sans serif for distinctive designs that complement the bouquets they design.

Ryanair's Corporate website authentic, professional and their fonts reflect this. The fonts they chose are variations of the same basic professional fonts to use for headlines and body text. It's elegant and professional, yet doesn't appear clunky.

Do you recognize how all three of these companies use fonts to communicate the feeling they want people to feel when they hear their name? It's the same process. Try diverse font styles, to created the ideal look.

3. Use a limited amount of fonts

It's tempting to include the entire range of fonts that are available into your site but you must limit yourself to a few. In the event that you do not, your website appears cluttered and scattered or cause a lot of difficulty to navigate for users.

When you select the right fonts, make sure you mix them in different situations to see whether they are compatible. One type of font might be suitable as a heading, while another is an alternative to be used for body texts. You can also make use of different versions of a font -- for example, bold type or all caps -- to set text apart without straying from the similar font family.

Daelmans' Stroopwafels In particular, HTML0 utilizes the same font used for headlines as well as body text. It is bold and the style is all caps for their headlines and a lighter version to apply to body text. To add more character to the website it is sometimes used a script font that is similar to the caramel font used for their site's offerings. In a smaller amount, can be effective in highlighting important concepts and making their site feel distinct and original.

Scrollino Scrollino, an online shop that offers children's products, uses a super easy and fun serif font to create headlines. This font comes with a simple, crisp sans serif fonts used for body text. This gives the site clear and enjoyable look.

4. Make sure you choose the appropriate font size.

It is essential that the text is large enough so that visitors are able to read to all visitors, including those with visual impairments. The rule of thumb is 16px is the minimal size that you can use, however, that may depend upon the type of font. For instance, some fonts may be hard to read in smaller sizes.

If you are able, have an actual person to review the content to determine if it's simple to comprehend. Be sure to review it on all kinds of devices -- including tablets, computers as well as mobile phones. Apps like Screenfly can make the process much simpler.

Heggerty the business that provides curriculum and other educational materials, employs pleasantly big size fonts. Though they'ren't so large that they completely take over look and feel of the website, they're easy and easy to read across all devices.

5. Consider accessibility

The first step is to be sure the text size is sufficient for the readers, and not overly complicated, as we've discussed before. Also, you should think about contrast in colors. It is essential to ensure that the text you write on is easy to be read, regardless of the background you're using regardless of whether it's a solid color patterns, or images.

The contrast ratio can range between 1:1 (white on white) up to 21:1 (black on white). It's suggested to ensure that the ratio of contrast you're seeking with text is around 7:1 for body text and 4.5:1 for headlines. headlines. The WAVE accessibility software to evaluate your website for color contrast ratios , along with other aspects that impact accessibility.

Track 7 Brewing is a master of the contrast of colors when it is viewed in background that is dark. Their homepage make use of either white or yellow text that makes a statement against the black background.

6. Make sure to avoid all caps within paragraphs.

While all caps are effective in creating an impressive impression but they can also make it difficult to read bodies of text. The brain has trouble reading text that is capitalized in paragraph format that makes reading harder and slower.

If you have to utilize the whole alphabet, be careful and only in headlines. This is the method Veer uses with all capital letters. This is extremely effective in highlighting the message and drawing your attention to the website However, it is best to avoid this in paragraphs.

What about web safe fonts?

Fonts are loaded and rendered by browsers differently across different web browsers. Safe fonts for web are those which look stunning and work perfectly on all browsers and on every device. And while you don't necessarily want to avoid the fantastic personal fonts that you choose to advertise your business, nevertheless it's important to include web safe alternatives in the font librarywhich is the font library employed for the website.

It creates an alternate font for your site and grants you complete control over the way your text is displayed if, for any way, your font doesn't load for visitors. For instance, you can, instruct browsers to choose Playfair in the event that your font isn't available, Georgia if Playfair isn't an option. You can also choose an alternative serif font when neither of those are available.

Kinsta provides great guidance for adding backup fonts that are safe to use on the internet, to your site.

How can you choose the correct fonts for your website?

How do you choose the most appropriate fonts to use for your online shop? The first step is ensure that you've got the legal rights to utilize the fonts you select. Some fonts can be used for free and without charge. Certain fonts require a fee that are suitable to be used for any purpose, while some are completely free just for personal use.for private usage. Make sure you know how the license works on your fonts.

These are great resources for fonts used on websites:

• Google Fonts: Google Fonts has an extensive collection of fonts available to download for no cost to both personal and commercial usage. They also provide software that allows you to look at Fonts in their working order.
• Your WordPress theme: Many WordPress themes include font libraries. These are often from sources like Google fonts. These fonts you are able to use for your site.
• Creative Market A marketplace on the web that sells digital files Creative Market offers some really gorgeous, original fonts available with a range of styles.
• Font Squirrel The resource sort fonts into categories and lets you view them. However, be aware that certain fonts are only meant for the use of users and it is important to know the type of font you're downloading.
• Adobe Fonts They are premium fonts for businesses with Creative Cloud licensing.

Change the font of your website

When you've decided on the fonts you'd like to apply, you're now ready to add them to your website. Three options are available to use them:

1. Utilize your preferred theme

As mentioned earlier Many themes include a library of fonts. Certain themes let you apply the fonts you want to use on your website through their individual settings panels. You can also configure the fonts with the WordPress Customizer.

1. On the dashboard of the dashboard of your WordPress Dashboard, click the Appearance tab. Then, click Customize.
2. Select the option for Fonts.option.
3. Click the dropdown menu for different types of text for instance, headings or Base Fonts. Choose a font. Every time you change fonts, the display of your site will update so you can check out how the new look will be prior to using it.

Within the Customizer, you can alter the font style options (bold and italicized.) and the font size.

2. Use a plugin

If the theme you're using isn't compatible with fonts or fonts you'd like to use, the next easiest option is to install an extension. There's a myriad of choices but if you're looking to utilize a Google font, then the WP Google Fonts is the ideal option. It allows access to the complete Google Fonts library, then lets you apply specific fonts across different areas of your site like paragraphs, headings as well as lists.

If you're planning to add an original font which has been found on the internet, then consider using to use it with the custom fonts plugin. It lets you create your own fonts in addition to integrating with themes that are popular along with page builders for an easier setting up.

3. Make use of a customized code

If you're familiar with code, you have two options:

1. You can host fonts on your own website, and use the codes to apply them to text areas
2. Load the fonts from an external sources (like Google Fonts) and add them to the queue.

For further details, and how-tos to get more details and directions take a look at this article written by Kinsta.

Keep your eyes on the basics. best

Have fun with your fonts! Create your own unique branding and choose fonts that reflect the personality of your business. But at also, keep in mind that simplicity is the most efficient, most feasible way to get started. Pick fonts that are easy to read, and don't make it overwhelmed by using more than five options. Your audience should be your first priority.

This post was first seen on here