How do you know how to pick the appropriate fonts to use on your eCommerce site?

Apr 7, 2022

The look and feel of your online store is made up of many elements, from the colors and your logo to the language you decide to utilize as well as the level of your customer support. And, of course Fonts play a major element of this.

The fonts that you use on your site can contribute to making the appearance and experience of your company, which can be formal, fun and serious, etc. They play an important role in creating a positive experience for your customers, even those who have vision disabilities.

But how do you choose appropriate fonts, and then use their features in the most efficient way possible?

An description of fonts and typefaces.

We'll take a step back for a second. You're likely to have seen typefaces such as Times New Roman, Helvetica and the widely-banned Comic Sans. But what do they mean specifically?

The definition of a font is the representation in digital form of text that contains various types. For instance, 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 variant of the alphabet with additional letters)
  • Helvetica Rounded (a version with round letters)

A typeface is extremely precise with exact dimensions and weights. Therefore, Helvetica Bold is a font, while Helvetica is a typeface. In this article we'll be using phrases "typeface" in addition to "font" in conjunction.

There are four main kinds of fonts you could choose from and you can combine them and mix them to create the right look for your website.

Serif fonts include extra strokes in certain letters. in contrast, Sans Serif fonts don't. Sans Serif fonts don't have these strokes. Here's an example of letters that have and do not include serifs:

serif and sans serif fonts compared

Most serif fonts are more traditional and are great for displaying expertise and confidence. They are also easier to comprehend because serifs distinguish each letter individually. Serif-style fonts like Sans Serif are easy to read and are more accessible than their counterparts. It's also simple to read , even in large amounts of text.

Handwritten and script fontsclosely look like handwriting and are often extremely complex. They're a lot easier to read than others styles, as well as they differ in terms of style. Here are two examples:

script font vs. handwritten font

It's evident that the model is elegant The other appears rather casual.

Display fontsare very diverse and cover anything that can be termed decorative. They can vary in style and look, however, generally, they're employed to design titles. Below are three displays font examples.

examples of several display fonts

The three of them don't appear very similar, do they? It's a good way to build a brand's image.

How do you choose and apply the right fonts

So now after we've established some basic information, we'll look at some helpful tips to selecting the right online store font.

1. Consider legibility

The entire point of writing text is that it should be understood by the reader, which is why legibility should be your number factor when choosing a font. If people can't understand your text, they will not discover your services or get information on your business, and may not even have the ability to make purchases!

The body text you type must almost always use a sans serif or serif font as they allow users to read massive blocks or paragraphs of text. Use script and display fonts for headings and at all times, make sure that the fonts are easy to comprehend.

A second thing to consider is the spacing between your paragraphs. There are three main spacing considerations you should be aware of:

  1. Kerning is the amount of space between the two letters. Correct kerning will ensure that every word can be read independently and ensures that the word doesn't appear to be two words.
  2. leading: The distance between two paragraphs of text. A properly led paragraph can make the text paragraphs more accessible.
  3. Tracking determines the spacing of the letters of words, as a whole rather than particular characters. So, rather than altering the space between "t" and "h" to make the phrase "this" then you'd change the spacing between the four letters simultaneously.

Here's an example from the three

illustration of tracking, kerning, and leading

The proper spacing between lines and the letters helps readers to comprehend, particularly when it comes to paragraphs. Don't worry; knowing the details about this is fun! There are great online games which allow hands-on training.

2. Think about brand name

The identity of your brand is what will distinguish you from the rest. Your personality is what is what defines your business. Your fonts convey that image to potential and existing customers.

What kind of emotion do you wish to inspire your customers to your website? Inspiring, funny and captivating? Trustworthy and reliable? Elegant and contemporary? We'll look at how some sites make use of fonts in order to express their style.

Scratch Pet Foods font usage

Scratch Pet Food has a brand that's extremely friendly and their fonts show the same. The fonts are strong sans serif font to highlight headlines, as well as the light serif type for body text.

flor fonts on their homepage

Flwr is a floral design studio. They create designs for weddings and other special occasions and other special occasions, it is appropriate to keep their fonts stylish and elegant. Their fonts incorporate modern serifs and a thin sans serif font to create an unique look and style that is perfect for their bouquets.

Ryanair professional fonts

Ryanair's Corporate site is professional and the fonts they pick reflect of that. They picked different versions of the professional, simple font to use for headlines and body text. The font is professional and isn't a bit stifling.

Do you recognize the way these three organizations make use of fonts to communicate the image they wish their clients to see when they hear their name? This is the same. Be prepared to try different kinds of fonts too, until you've come up with the ideal style.

3. You can only use a small quantity of fonts

It's tempting to incorporate any of the fantastic fonts that you can find on your website, but it's best to limit yourself to a few. In the event that you don't, your site appears disorganized and all over the place, and you may create an unsettling experience for visitors.

When you're choosing fonts, make sure you pair them in different situations to see how they perform. It is possible to choose the same font type for headings, while an alternative for body text. There are also variations of a font such as the bold type or all caps to create a distinct font that isn't straying away from the regular font family.

Stroopwaffels website with custom fonts

Daelmans Stroopwafels As an example, HTML0 uses the same fonts used for headlines as well as body text. The fonts are bold and all-caps style of their headlines and a lighter style for body text. For their site to have an extra dimension and a unique look, they often use a script font which is similar to the caramel fonts used in their items. When used only sparingly, can be effective in bringing attention to key ideas and creating the site appear real and distinct.

Scrollino website with unique fonts

Scrollino the online store that offers items for children utilizes a simple and enjoyable serif font to create their headlines. This is coupled with a clean, simple sans serif body text, that gives it a beautiful and enjoyable feel.

4. Be sure to select the correct font size.

It is essential that the text is large enough for site viewers to comprehend even people with visual impairments. It's generally advised to choose 16px for the font size you should utilize, but that may differ depending on the font. For instance, some fonts, can be difficult to read smaller.

If you can, get someone who is a real person to review the content to determine if it's clear and easy to follow. Make sure you read the text on all devices -- including computer tablets and mobile phones. Apps like Screenfly assist in the process a great deal.

Heggerty uses friendly fonts on their site

Heggerty an organisation that offers curriculums and other education-related resources, utilizes very large fonts. Though they'ren't huge enough to completely take over design, they're simple and easy to use on any device.

5. Take into account accessibility

One of the first things to think about is to ensure that your text is large enough to be read, and that it isn't too complex in the manner discussed previously. But, it is also important to be aware of the color contrast. It is essential to ensure that the text you write on is simple to read no matter what background is it on, regardless of whether it's a solid color or solid design, or even an image.

Contrast ratios range from 1:1 (white on white) and up the range of 21:1 (black on white). It is suggested that the proportion of contrast you'd like to attain when you use text should be 7:1 in text in the body and 4.5:1 in headlines. Use the WAVE accessibility program to analyze your site for color contrast ratio as well as other accessibility factors.

good font color contrast

Track 7 Brewing is a masterful job at contrasting colors with dark backgrounds. Their website employ either bright or white yellow text that stands out from the darkened image behind it.

6. Take note of the caps in paragraphs.

While all caps can be effective in creating an impressive impression, they also can make it difficult to read large text. Our brains simply have difficulties in processing text that is capitalized when in paragraph form. This can make reading the text hard and slow.

Veer website using all caps in headlines

Therefore, if you wish to utilize all caps, make sure that you only use them sparingly and only for headlines. This is the way Veer employs and how all capital letters can be very successful in conveying the message and draw the attention of their site, but it is best to avoid them in paragraphs.

What are the most reliable internet safe fonts?

Fonts render and load in different ways across various web browsers. The safest fonts for the web are the ones that look stunning and are compatible with every browser and on every device. While you do not necessarily require the amazing personalized fonts that you pick to represent your company but you should add web safe options to your font stack -- the assortment of fonts that you will use for your website.

It basically sets up the default font for your store and gives full control over appearance of your content in the event that for some reason your font isn't able to be displayed for users. For instance you can instruct your browsers to pick Playfair in the event that your custom font doesn't exist, Georgia if Playfair isn't an option, or use a default serif type if neither of them work.

Kinsta offers helpful advice to add secure fonts that can be used for backup on your site.

What fonts can you use for your website

How can you find great fonts for your online shop? First, make sure you have permission to use whatever options you select. Certain fonts are completely free to use for any purpose. Some fonts are paid for that can be used for any purpose while others are totally free and are onlyfor exclusive use. Make sure you know what the terms of the license mean on your fonts.

Below are some fantastic websites fonts resources:

  • Google Fonts: Google Fonts has an enormous collection of fonts available that can be downloaded for both commercial and personal use. There is also software that allows you for viewing the fonts that you want to use in your.
  • Your WordPress theme The majority of WordPress themes come with collection of fonts that are often drawn from different sources like Google fonts, that can be used to build your site.
  • Creative Market A marketplace on the internet for digital assets Creative Market offers some really stunning, distinctive fonts in various styles.
  • Font Squirrel This site sort fonts into categories and lets you view the fonts. Be careful -- certain fonts are only for personal use and you should be aware of the type you're downloading.
  • Adobe Fonts High-quality typefaces available to companies that have Creative Cloud licences.

Make changes to the fonts on your site

Once you've selected the fonts you want to use, now is the time to incorporate them into your website. There are three ways for this:

1. Utilize your theme

We mentioned that in the past, many themes have a library of fonts. Certain themes permit you to incorporate these fonts into your site within their settings panel. Also, you could configure the fonts with WordPress Customizer. WordPress Customizer.

  1. Within the dashboard of Your WordPress dashboard, click Settings > Appearance.
  2. Select the Option for Fontsoption.
  3. Pick the dropdowns to select each type of textfor example, headings, and Base Fonts, etc. Choose the font you want to use. After you have changed fonts the appearance of your website will change to allow you to see how the new look is before implementing the font.

Within the Customizer, you are able to alter the settings for the font style (bold italicized etc.).) and font size.

2. Use a plugin

If your theme does not include fonts, or does not have the fonts you'd like to use The best option is to install an extension. There's a myriad of options to choose from, but if you're seeking to take advantage of the Google font, WP Google Fonts is an excellent choice. It allows access to the whole Google Fonts library, then it allows you to add specific fonts to different areas of your website, such as headings, paragraphs, as well as lists.

If you'd prefer to make use of the font that you would like to use from another source, you should consider using the customizable fonts plugin. This plugin lets you create custom fonts, as well as integrate with other popular themes and page builders for simple configuration.

3. Utilize a personalized code

If you're already familiar with the rules of code You have two additional choices:

  1. Make fonts for your personal website , and then apply the program to add these to specific text
  2. Install the fonts using an external source (like Google Fonts) and activate them

For additional information as well as guidelines and directions, please read this post from Kinsta..

Think outside the box, but bear your eyes on the basics. best

Make sure you have fun using your fonts! Make your brand unique and pick fonts that convey the spirit of your organization. Yet, at the keep of mind that simple is usually the best preferred method. Pick fonts that are easy to read. Do not get too complicated by having more than five options. Your audience should be your primary concern.

Article was posted on here