How to Choose the Right fonts for your eCommerce website
Your online store is comprised from a variety of elements, from the colors and logo , to the language that you employ and the caliber of your customer service. Also that includes fonts. Fonts make up a significant part of that.
The fonts you choose to use for your site can go a long way in creating the look and feel of your brand which is professional, playful and serious for instance. They also play a really vital role in providing the best experience to your visitors, including those with visual impairments.
However, how do you pick the right fonts and use them in the best way possible?
A primer on typefaces, and fonts
Take a break for a minute. Most of you are familiar with fonts such as Times New Roman, Helvetica as well as the much-banned Comic Sans. But what are they, exactly?
The definition of a typeface is the digital representation of text which includes many different styles. As an example, Helvetica has 36 different options, including:
- 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 with letters that are closer together)
- Helvetica Rounded (a version with the letters rounded)
It is a typeface is very specific, that has exact weights and designs. Thus, Helvetica Bold is a font. Helvetica is an typeface. To make this piece, we'll be using the terms "typeface" and "font" interchangeably.
There are four major types of fonts that you may choose from and you can mix and match to create an appropriate look to your website.
Serif fonts contain extra strokes that are added to certain letters, in contrast, the Sans Serif fonts do not include those strokes. Below is an illustration of letters with and without serifs below:
In general, serif fonts tend to be more classic and are an an excellent way to exude knowledge and trustworthiness. It is also easier to read, because the serifs help define each letter individually. The serif-style fonts in Sans Serif are simple and can feel more accessible than their counterparts. It's still easy and simple to read even in huge volumes of text.
Handwritten and script fontsclosely look like handwriting they can be very elaborate. Some are much easier to read than others, and they vary widely in their style. Here are a couple of examples
As you can see, the first one is elegant, while the other looks much more welcoming.
Display fontsare incredibly diverse, and encompass anything that could be considered ornamental. They differ in appearance and feel, but usually, they're used only to create titles. Below are three examples of display fonts:
The three of them don't appear very similar Do they? However, they're an excellent way to establish brand feel.
How to choose and implement the correct fonts
Okay, so now after we've established some of the basic, let's look at a few handy tips for choosing the best typefaces for your store.
1. Consider legibility
The entire point of text is that it should be comprehended, and therefore legibility is the most important consideration when choosing a font. After all, if people can't understand your content, they can't learn about the products you offer or learn more about your business or even make a purchase!
Your body text should always use Serif, or sans serif font as they enable people to understand huge blocks or paragraphs of text. Keep script and display fonts for headings. And, in any case, ensure that they're easy to read.
The second thing you should consider is spacing between your text. There are three major space considerations to be aware of:
- Kerning Amount that space is left between two words. Correct kerning will ensure that every word is legible in its own way and that one word doesn't look like two.
- Leading: A distance that separates two paragraphs of text. A properly led paragraph makes text more readable.
- Tracking: Controls letter spacing for words as a unit and not just specific characters. Instead of changing the spacing between "t" in the word "this" and "h" in the word "this" it is better to adjust the spacing between the four letters simultaneously.
Here's an illustration of each of them:
Ideally, spacing between letters and lines will make it easy for people to read, particularly in paragraph format. Do not worry, knowing more about this will be enjoyable! There are some excellent online games which give you practical practice.
2. Consider brand identity
The brand's personality is what sets you apart. It's the personality of your company. The fonts you select represent that personality to potential customers and customers who are already there.
So what feeling are you hoping to instill for your visitors on your website? Awe-inspiring and funny? Dependable and reliable? Elegant and sophisticated? We'll look at the ways that a handful of websites use fonts to convey their image.
Scratch Pet Food has a brand that's super friendly and the fonts they use reflect that. The fonts are extra aggressive sans serif to highlight headlines and a lighter sans serif for body text.
FLWR is the name of a design studio for floral designs as well as a design studio. Since they make designs for special events like weddings It is logical for their fonts to be stylish and elegant. They blend a contemporary serif with a thin sans serif to create a unique style that is matched by their bouquets.
Ryanair's corporate website is, it's true, corporate and the fonts they use are a reflection of that. They chose variants of the same basic, professional font for both the body text and headlines. The font is professional and doesn't seem suffocating.
Do you see how all three of these businesses use fonts to convey what they want customers to have when they hear their name? It's the same similar thing. Do not be scared to play around with types of fonts too, until you find the perfect appearance.
3. Stick to just a couple of fonts
It's tempting to use all the amazing fonts that you can find into your site but you should limit yourself to a few. Otherwise, your store can appear disjointed and scattered all over the place or create a jarring experience for customers.
If you are choosing fonts, try pairing them with different situations to see how they perform. One font could be used for headings, and one to be used for body texts. 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. They employ a bold all-caps style for their headings as well as a light version that is used for body content. To give their site some personality, they often use a script font that matches the caramel that is used in their offerings. This script, when used sparingly, is effective at drawing attention to important ideas and creating the site appear authentic and unique.
Scrollino, a store selling kids' products, uses a super easy and fun serif font in their headers. They pair that with a crisp, easy sans serif body text, which gives it a lovely and fun feel.
4. Choose the right font size
It is essential that the font is big enough for site visitors to read even those who have visual impairments. In general, 16px is the size you need to use, though that can depend on the font. Some fonts, for instance, can be difficult to read smaller.
If possible, ask someone who is a real person to review the text to see if it's easy to read. Also, make sure you review your text across every kind, including tablets, desktops as well as mobile phones. Tools like Screenfly make the process much easier.
Heggerty, the company that offers curriculum as well as other educational resources, uses pleasantly big font sizes. Although they're not huge enough that they completely take over design, they're simple and simple to read on all devices.
5. Take into account accessibility
One of those things is ensuring that your text is big enough to read and not too complex, which is what we've discussed earlier. You should also think about contrast in colors. Make sure that your text is easy to read no matter what background is it on, no matter if it's a solid color pattern, or image.
Contrast ratio ranges from 1:1 (white on white) to 21:1 (black on white). A good the contrast ratio you're seeking when using text is 7:1 for body text and 4.5:1 when it comes to headlines. It is possible to use the WAVE accessibility tool to analyze your site to determine the color contrast ratios and other accessibility factors.
Track 7 Brewing performs a fantastic job of color contrast when viewed against dark backgrounds. On their homepage, they use either white or bright orange text so that it stands out from the darkened background.
6. Avoid all caps in paragraphs
While all caps can be great for making a statement but they can also be difficult to read in large text. Our brains simply have difficulties reading text that is capitalized when it is in paragraph form. This causes reading to be harder and slower.
Therefore, if you wish to make use of all caps, use it sparingly and only in headlines. This is what Veer is doing with all capital letters. can be very effective in making the point and drawing attention to their site, but they do not use them in paragraphs.
What are web safe fonts?
Fonts load and render in browsers differently across the web. Web safe fonts are ones that are beautiful and function perfectly on all browsers and on every device. Although you don't want to avoid the amazing custom fonts you chose for your brand however, it is important to add web safe options to your font collection -- the collection of fonts that you will use for your website.
Doing this essentially sets an alternate font for your online store, and allows the full power to control how your text will appear if in some way the font you have created won't be able to load for visitors. For example, you can tell browsers to use Playfair when your customized font isn't in stock, Georgia if Playfair isn't an option, and a default serif font in the event that none of them are available.
Kinsta offers some great advice on how to include the backup fonts that are safe for web use to your website.
Where to find fonts that you can use for your web site
How do you locate the best fonts for your web store? The first thing to do is ensure that you've got the legal right to make use of the options you decide to use. There are fonts that are completely free while others have premium pricing that are suitable for all uses while others are free justfor private use. Take the time to understand how the license works for your fonts.
Here are some great resources for website fonts:
- Google Fonts: Google Fonts has an extensive collection of fonts that are free for personal and commercial use. You can also use their software to view fonts in action.
- Your theme The majority of WordPress themes include libraries of fonts, sometimes from sources like Google fonts, that can be used to build your website.
- Creative Market: An online marketplace to sell digital assets Creative Market offers some really gorgeous, original fonts available that come in many styles.
- Font Squirrel The resource categorizes fonts according to category and allows you to preview them. However, be aware that some options are just meant for use by the user, so make sure you are aware of the type you're downloading.
- Adobe Fonts They are premium typefaces for businesses who are holders of Creative Cloud licenses.
Change the font on your site
Once you've selected your fonts, it's time to apply them to your site. There are three main ways to do this:
1. Use your own theme
As mentioned earlier many themes include a library of fonts. Some allow you to apply the fonts you want to use on your website through their individual settings panel. Or, you can install these fonts by using the WordPress Customizer.
- Within your WordPress Dashboard, click the Appearance tab and then Customize.
- Choose the Option for Fontsoption.
- Click the dropdown menu for each type of text -such as Headings or Base Font and so on. -- and select a font. Every time you change fonts, the preview of your site will update to let you see how it will look like before using the font.
The Customizer are able to adjust the options regarding font styles (bold, italicized, etc.) and font size.
2. Use a plugin
If your theme doesn't include fonts or the fonts you'd like to utilize, then the easiest option is to use a plugin. There's a myriad of options , but when you're looking to make use of an Google font, WordPress Google Fonts is a great one. It allows access to the entire Google Fonts library, then lets you apply specific fonts on various parts of your site, like headings, paragraphs, as well as lists.
If you're looking to install the font you want to use from another source, try to use the custom fonts plugin. You can upload your own fonts as well as integrate with other popular themes as well as page builders for an easier setup.
3. Make use of a customized code
If you're comfortable with programming There are two additional alternatives:
- Host fonts on your own website and then use the code to apply them to text areas
- Load the fonts from an outside source (like Google Fonts) and enable them
For more details and instructions For more details and directions, refer to this post from Kinsta.
Explore your creativity, but remember that simplicity is the best
Have fun with your fonts! Create your own unique branding and pick fonts that represent the feel of your organization. But, at the same time, remember that simple is often the most effective way to go. Pick fonts that are easy to read and don't get overwhelmed by using four or five different options. Your audience should be your primary concern.