How to Choose the Right Fonts for Your eCommerce Website
Your online store is comprised of many different components, from your colors and logo to the language you choose to use as well as the level of your customer service. And, of course the fonts play a large part of that.
The fonts that you use on your website go a long way towards establishing the feel of your brand -- professional, quirky, serious, fun, etc. They also play a really crucial role in ensuring the best experience to your customers, even those who have vision impairments.
However, how do you pick the correct fonts, and then make use of them in the most efficient way possible?
An introduction to typefaces and fonts
Take a break for a moment. Most of you are familiar with fonts such as Times New Roman, Helvetica as well as the much-banned Comic Sans. But what do they mean, specifically?
The definition of a typeface is a digital representation of text, which has 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 more bold version)
- Helvetica Condensed (a version that has letters that are closer together)
- Helvetica Rounded (a version with the letters rounded)
It is a font is extremely specific, with exact weights and styles. Therefore, Helvetica Bold is a font. Helvetica is the name of a typeface. To make this post, we'll be using the terms "typeface" as well as "font" in conjunction.
There are four main kinds of fonts you can choose from, and you may combine and mix to get the right feel to your website.
Serif fonts have extra strokes added to certain letters, while Serif fonts do not. Serif fonts don't have the strokes. Below is an illustration of letters with and without serifs below:
The majority of serif fonts have a more classical look and are an great for displaying knowledge and trustworthiness. Also, they are more readable, as serifs can help distinguish each letter individually. Sans serif fonts look clean and feel more accessible than their counterparts. It's still easy and simple to read in large bodies of text.
Script and handwritten fontsclosely mimic handwriting, and can sometimes be extremely elaborate. They are a lot easier to read than others, and they vary widely in their style. Here are a couple of examples:
You can clearly see that the first one is elegant and the other much more welcoming.
Display fontsare very diverse, and include anything that could be termed decorative. They can vary in style and feel but are typically used just to create titles. Below are three examples of display fonts.
These three don't look very similar, do they? However, they're an excellent option to build brand swag.
What is the best way to select and use the appropriate fonts
So now that we've established the basics and the basics of fonts, let's take a look at some helpful guideline for selecting the appropriate fonts for your online store.
1. Consider legibility
The purpose of text is that it should be read -- so legibility should be your number one consideration when choosing a font. In the end, if your visitors can't read your text, they can't learn about your products or find out about your company, much less decide to purchase!
The body text you write should nearly always have Sans serif or serif font as they make it easy for readers to comprehend huge blocks or paragraphs of text. Use script and display fonts for headings. And, at all times, ensure they can be easily understood.
The next thing to consider is spacing between your texts. There are three primary factors to consider when spacing:
- Kerning Amount of room between two words. A proper kerning process ensures that every word is legible in its own way and doesn't end up looking like two.
- Leading: the distance between two lines of text. Correct leading can make paragraphs of text easier to read.
- Tracking controls the spacing of letters in words as a whole, rather than the individual letters. Instead of changing the spacing between "t" in the word "this" and "h" for the word "this" it is better to adjust the spacing between all four letters simultaneously.
Here's an example of the three
The ideal spacing between lines and letters makes it easier for people to read, particularly when in paragraphs. Don't worry; knowing more about this will be fun! There are some excellent online games that give you the opportunity to practice in a hands-on manner.
2. Think about the brand's identity
Your brand's identity can be what makes you stand out. It's your personality that defines your company. And the fonts you choose represent your personality to prospective customers and customers who are already there.
What kind of feeling are you hoping to instill on your site? Funny and fun? Reliable and professional? Sophisticated and elegant? We'll look at the ways that a handful of websites make use of fonts in order to express their identity.
Scratch Pet Food has a brand that's extremely friendly and their fonts show this. They employ a bold sans serif for headlines, and a light sans serif body font.
FLWR is a floral design studio as well as a design studio. Since they make designs for special events like weddings, it makes sense that their fonts be stylish and elegant. They combine a modern serif with a thin sans serif to create a unique style that is matched by their bouquets.
Ryanair's corporate website is, well, corporate -- and the fonts they use are a reflection of this. They've chosen variants of the same basic, professional font for both headlines as well as body text. It's professional without seeming stuffy.
Are you aware of how all three of these organizations use fonts in order to convey the feeling they want people to feel when they see their logo? You can do the same similar thing. Don't be afraid to try different fonts, either, until you've found the ideal style.
3. Use a limited number of fonts
Although it's tempting to incorporate all the wonderful fonts available on your website but you should limit yourself to a few. In the event that you don't, your site will look disjointed and everywhere, and you may create a jarring experience for customers.
When choosing your fonts, pair them in different scenarios to see whether they are compatible. You may choose one font to use for headings and another as body text. There are also variations of a font for example, Bold or All Caps -for a distinct font while staying in the same font family.
Daelmans ' Stroopwafels is an example. It utilizes the same font to write headlines as well as body text. The font is bold and all-caps version for headings, and a lighter one for body text. But, to add even more personality, they occasionally employ a script font which matches the caramel that is used in their offerings. This script, when used in a limited amount, can be effective in accentuating important themes and making their site feel real and distinct.
Scrollino is a shop that sells children's products, uses a super easy and fun serif font in their headers. They pair that with a clean, simple sans serif body text, which gives it a lovely and enjoyable feel.
4. Select the correct font size
It is essential that the text is large enough for site visitors to read, including those with disabilities with vision. It is generally recommended to use 16px for the minimum size you need to utilize, but that may vary based depending on your font. Certain fonts are harder to read when smaller.
If you are able, have real people to check your text and see whether it's simple to understand. Make sure to read your text across any kind -- including tablets, desktops, and mobile phones. Applications like Screenfly make this process a lot simpler.
Heggerty, the company that offers curriculum as well as other educational resources that uses large size fonts. While they're not so big that they take over the appearance of the site, they're easy and simple to read across all devices.
5. Consider 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 consider color contrast. It is essential to ensure that your text is easy to read, no matter the background is it on, no matter if it's a solid color design, or even an image.
The ratio of contrast can vary from 1:1 (white on white) to 21:1 (black on white). A good contrast ratio that you want to achieve in text should be around 7:1 when it comes to body text, and 4.5:1 in headlines. It is possible to use the WAVE accessibility software to examine your site to determine the color contrast ratios as well as other accessibility factors.
Track 7 Brewing performs a fantastic job of contrasting colors when viewed against dark backgrounds. For their website, they employ either bright or white orange text so that it makes a statement against the dark images behind it.
6. Beware of all caps within paragraphs.
Although all caps are excellent for creating a strong impression however, they are difficult to read in large text. Our brains have difficulties reading text that is capitalized when it is in paragraph form. This causes reading to be harder and slower.
Therefore, if you want to use the entire alphabet, do them sparingly, and only for headlines. This is the way Veer is doing and all capital letters make great an impact and drawing attention to their website, however they avoid it when writing paragraphs.
What is the best web safe fonts?
The way fonts are rendered and loaded by browsers is differently on different websites. Web safe fonts are ones which look stunning and work correctly on all browsers and all devices. While you do not necessarily have to use the fantastic custom fonts you chose for your brand, you do want to incorporate web safe alternatives into your font collection which is the selection of fonts used on your website.
Doing this essentially sets an alternate font for your store and gives you complete control over the way the text appears if, due to some reason your font isn't able to display for the user. For example, you can tell browsers to use Playfair if your custom font isn't accessible, Georgia if Playfair isn't an option, and a default serif font if both of these don't are available.
Kinsta gives helpful tips to add the backup fonts that are safe for web use to your site.
What fonts can you use for your website
What are the best ways to find top fonts to use in your online store? First, make sure that 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 free for personal use only.for private use. Take the time to understand what the terms of the license mean on your fonts.
Below are some excellent sources for fonts used on websites:
- Google Fonts: Google Fonts has an extensive collection of fonts, which are free for commercial and personal use. You can also use their tools to preview fonts in action.
- The theme you choose WordPress theme: A lot of WordPress themes include collections of fonts, often from sources like Google fonts, that you are able to use for your site.
- Creative Market A marketplace online for digital assets, Creative Market offers some really beautiful, unique fonts with a range of styles.
- Font Squirrel The site categorizes fonts according to category and allows you to view their styles. But be careful -- there are some fonts that are intended for personal use which is why you must know what type you're downloading.
- Adobe Fonts High-quality typefaces available to businesses that have Creative Cloud licenses.
Change the font used on your website?
Now that you've picked your fonts, it's time to add them to your website. There are three options to apply them:
1. Use your theme
As mentioned earlier many themes have a library of fonts. Certain themes allow you to add those fonts to your site within their settings panel. Also, you could install these fonts by using the WordPress Customizer.
- In the dashboard of your WordPress dashboard, navigate to Appearance > Customize.
- Click on the option for Fonts.option.
- Select the dropdowns for every type of text- Headings and Base Font etc. Select a font. When you change fonts, the display of your site will be updated so you can test what the new look will be before using the font.
The Customizer are able to adjust the options to alter font styles (bold or italicized.) and font size.
2. Use a plugin
If your theme does not include fonts, or does not offer the fonts you want to work with, the easiest option is to use an extension. There's a myriad of options , but should you choose to utilize a Google font, then WP Google Fonts is an excellent choice. It provides access to the complete Google Fonts library, then permits you to add individual fonts to different areas on your website, including headers, paragraphs, and lists.
If you'd like to utilize the font you want to use from another source, consider using the Custom Fonts plugin. It allows you to upload your own fonts and integrates with well-known themes as well as page builders for simple installation.
3. Use custom code
If you're comfortable with programming There are two additional choices:
- You can host fonts on your personal site and use code to make them apply to areas of text
- Install the fonts downloaded from an external provider (like Google Fonts) and enqueue 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 the simple way is always best.
Enjoy your fonts! Be creative with your branding and choose options that best represent the feel of your business. However, at the same keep in mind that simplicity is the most effective most effective way to go. Select fonts that are simple to read, and don't make it overwhelmed by using several choices. Your audience should be your primary concern.