What is the best way to choose the right Fonts for Your eCommerce Website
The brand of your online shop is composed of many different components, from your colors and your logo to the languages you choose to use as well as the level of your customer support. And, of course, fonts are a big component of this.
The fonts that you use on your site can go a long way in creating the look and feel of your business which is professional, playful and serious etc. They play an important role in providing an excellent experience for your customers, even those who have vision impairments.
But how do you choose the correct fonts, and then make use of them in the most efficient way possible?
A brief introduction to typefaces and fonts
We'll take a step back for a moment. It's likely that you've heard of typefaces like Times New Roman, Helvetica as well as the much-banned Comic Sans. But what do they mean, specifically?
Well, a font is the digital representation of text that contains 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, that has exact weights and designs. Therefore, Helvetica Bold is a font, while Helvetica is an typeface. In this article we'll be using phrases "typeface" as well as "font" in conjunction.
There are four major types of fonts that you can choose from, and you may combine and mix to get an appropriate look for your website.
Serif fonts include extra strokes added to certain letters, in contrast, the Sans Serif fonts don't have these strokes. Here is an example of letters that have and do not have serifs here:
The majority of serif fonts are more traditional and are great for displaying expertise and confidence. It is also simpler to read because the serifs define every letter separately. The serif-style fonts in Sans Serif are simple and feel more accessible than their counterparts. They're also simple and easy to read even in huge volumes of text.
Script and handwritten fontsclosely look like handwriting and can sometimes be extremely elaborate. They are a lot simpler to read than other, and they vary widely in style. Here are two examples:
It is evident that the one looks very classy, while the other looks quite more casual.
Display fontsare extremely diverse they cover anything that can be termed decorative. They can vary in style and feel but usually, they're used only to create titles. Below are three displays font examples.
The three of them don't appear very similar, do they? They're nevertheless a fantastic method to create a brand's feel.
How to choose and implement the appropriate fonts
Okay, so now that we've established the basics we can look over a few handy tips for choosing the appropriate web-based store font.
1. Consider legibility
The entire point of text is that it should be read -- so legibility should be your number one aspect when picking a font. If people can't understand your content, they can't learn about your offerings or get information about your business and even be able to make a purchase!
The body text you write should nearly always be either a serif or sans serif font as they allow visitors to read huge blocks or paragraphs of text. Save display and script fonts for headings, and in any case, ensure that they're easy to read.
Another thing to think about is the spacing between your text. There are three main space considerations to be aware of:
- Kerning is the amount of room between two characters. Correct kerning will ensure that every word can be read independently and ensures that no word will appear to be two words.
- Leading: The distance between two paragraphs of text. Correct leading can make paragraphs of text more readable.
- Tracking controls the spacing of letters for words as a unit instead of specific characters. Therefore, instead of altering the space between "t" and the "h" for the expression "this", you'd adjust the spacing between all four letters at once.
Here's an example of the three
The ideal spacing between the letters and lines makes it easier for readers to comprehend, particularly in paragraph format. Don't worry; knowing more about this will be enjoyable! There are great online games that provide hands-on practice.
2. Consider brand identity
The identity of your brand will determine what differentiates you from the rest. It's your personality that defines your company. And the fonts you choose represent that personality to potential and existing customers.
What emotion do you want to invoke for your visitors on your website? Awe-inspiring and funny? Dependable and reliable? Modern and stylish? We'll look at how a few websites make use of fonts in order to express their identity.
Scratch Pet Food has a brand that's super friendly, and their fonts reflect the same. They employ a bold sans serif for headlines, and a light sans serif for body text.
Flwr is a floral design studio andsince they create designs for weddings and other special occasions and other special occasions, it is natural to have their fonts stylish and elegant. The fonts they use combine modern serif with a thin sans serif font to create a distinctive look that matches their bouquets.
Ryanair's Corporate website is very corporate, and the fonts that they choose are a reflection of that. They picked different versions of the simple, professional font for both headlines as well as body text. The font is professional and doesn't seem suffocating.
Do you recognize the way these three organizations use fonts in order to convey the image they want their customers to have when they hear their name? It's the same thing. Do not be scared to play around with types of fonts too, until you've come up with the ideal style.
3. Use a limited number of the fonts
Although it's tempting to use all the great fonts you find into your site but you should limit yourself to only a handful of. In the event that you don't, your site will look disjointed and all over the place, and you may create a jarring experience for customers.
If you are choosing fonts, try pairing them with different scenarios to see how they perform. It is possible to choose one type of font for headings, and another for body text. You can also use variations of a font such as the bold type or all caps -for a distinct font without straying from the similar font family.
Daelmans Stroopwafels For instance, HTML0 uses the same fonts for headlines and body text. They use a bold, all-caps style for their headings as well as a light version to use for body texts. To give their site an extra dimension, they sometimes employ a script font which is akin to the caramel used in their products. When used only sparingly, works well in drawing attention to important ideas and creating the site appear real and distinct.
Scrollino the online store that sells kids' items is using a very easy and fun serif font to make their headlines. It is combined with a clean, simple sans serif body text, which gives it a lovely and enjoyable feel.
4. Make sure you choose the appropriate font size
It's crucial that your text is large enough for site visitors to read even those who have visual impairments. It is generally recommended to use 16px for the size you should utilize, but that may differ based on the font. Some fonts, for instance, can be difficult to read smaller.
If possible, ask 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, computers and even mobile phones. Applications like Screenfly assist in this task a lot easier.
Heggerty, an organization that provides curriculum and other educational resources, uses pleasantly big size fonts. Although they're not huge enough that they completely take over design, they're simple and easy to read on any device.
5. Consider accessibility
The first thing to consider is to ensure that the text is big enough to be read, and is not overly complicated, as discussed above. However, you should also take into consideration color contrast. You need to make sure that the text you write on is simple to read no matter what background is it on, no matter if it's a solid or solid-colored design, or even an image.
Contrast ratio ranges between 1:1 (white on white) up to 21:1 (black on white). It is recommended that the proportion of contrast that you want to achieve when using text is 7:1 for body text and 4.5:1 in headlines. The WAVE accessibility software to analyze your site to determine the color contrast ratios and other accessibility factors.
Track 7 Brewing does a great job of color contrast with dark backgrounds. For their website, 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.
While all caps can be excellent for creating a strong impression but they can also be difficult to read in large text. Our brains simply have difficulties processing capitalized text when it is in paragraph form. This makes reading it slow and difficult.
So, if you do want to use all caps, make sure to use them sparingly, and only for headlines. That's how Veer uses and all capital letters can be very effective in making the point and drawing attention to their website, however they should be avoided when writing paragraphs.
What is the best web safe fonts?
Fonts load and render in browsers differently across different web browsers. Safe fonts for web are those that are beautiful and function correctly on all browsers and all devices. While you do not necessarily have to use the fantastic customized fonts that you choose 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 of your store and gives you complete control over the way your text will appear if due to some reason your font isn't able to display for the user. As an example, you could instruct browsers to choose Playfair when your customized font isn't available, Georgia if Playfair isn't an option, or a default serif font if both of these don't work.
Kinsta gives helpful tips to add secure fonts for backup on your website.
What fonts can you use for your website
How do you locate great fonts for your online store? Your first step is to ensure that you've got the legal rights to use whatever options you select. Certain fonts are free for all purposes Some fonts are paid for that are suitable for all uses, and still others are completely free onlyfor private use. Take the time to understand what the terms of the license mean on your fonts.
Below are some excellent resources for website fonts:
- Google Fonts: Google Fonts has an enormous collection of fonts available that can be downloaded for both personal and commercial use. They also have software to view the fonts you want to use in your.
- Your theme WordPress theme: A lot of WordPress themes include collections of fonts, often taken from other sources, such as Google fonts, that can be used to build your website.
- Creative Market A web-based marketplace for digital assets Creative Market offers some really beautiful, unique fonts that come in many styles.
- Font Squirrel: This resource sort fonts into categories and lets you preview the fonts. But be careful -- certain fonts are only for personal use and you should know what type you're downloading.
- Adobe Fonts High-quality typefaces available to businesses that possess Creative Cloud licenses.
Change the font of your site
After you've chosen your fonts, it's time to incorporate them into your website. There are three primary methods to accomplish this:
1. Make use of your theme
Like we said earlier, a lot of themes include a library of fonts. Certain themes allow you to add these fonts on your site within their settings panel. Also, you could configure the fonts with the WordPress Customizer.
- Within the dashboard of your WordPress dashboard, go to Appearance > Customize.
- Select the Option for Fontsoption.
- Select the dropdowns for every type of textfor example, Headings and Base Font, etc. Choose the font you want to use. When you change fonts, the display of your site will update to let you see how the new look will be before applying the font.
Within the Customizer, you can change the settings regarding font styles (bold italicized, bold, etc.) and size.
2. Use a plugin
If your theme doesn't include fonts, or does not offer the fonts that you would like to utilize, then the easiest option is to use an extension. There's a myriad of options available, but when you're looking to make use of a Google font, then WP Google Fonts is a great one. It allows access to the entire Google Fonts library, then lets you apply specific fonts to various areas of your site, like headers, paragraphs, and lists.
If you want to use the font you want to use from another source then try the custom fonts plugin. It allows you to create your own fonts as well as integrate with other popular themes and page builders for a simpler setup.
3. Make use of a customized code
If you're familiar with the code, you have two other choices:
- Create fonts for your own website and then use the code to apply them to areas of text
- Load the fonts from a third-party source (like Google Fonts) and enable them
To find out more information and guidelines for more information and instructions, read this post from Kinsta.
Be creative but keep in mind that simple is best
Have fun with your fonts! Be creative with your branding and choose options that best represent the feel of your organization. Yet, at the keep in mind that simplicity is usually the best preferred method. Select fonts that are simple to read. Don't become overly complicated with four or five different choices. Your audience should be your first priority.