The Best Fonts for your eCommerce Website
Your online store is comprised of a lot of different parts, from your color scheme and your logo to the languages that you employ and the caliber of your customer support. Of course that includes fonts. Fonts make up a significant part of that.
The fonts you employ on your website will go a long ways to establishing the feel of your business which is professional, playful, serious, fun, for instance. They also play a really important role in providing the best experience to your visitors, including those with vision impairments.
However, how do you pick the right fonts and use them in the best manner?
An introduction to typefaces and fonts
Take a break for a moment. Most of you are familiar with fonts like Times New Roman, Helvetica, and the much-maligned Comic Sans. What are they specifically?
Well, a typeface is the digital representation of text which includes various styles. As an example, Helvetica has 36 different styles, such as:
- 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 that has more letters)
- Helvetica Rounded (a version with round letters)
A font is highly specific with exact weights and styles. Thus, Helvetica Bold is a font, while Helvetica is a typeface. In this post, we'll be using the terms "typeface" as well as "font" interchangeably.
There are four primary types of fonts that you may choose from and you may mix and match them to make an appropriate look for your website.
Serif fonts have extra strokes in certain letters while Serif fonts do not. Serif fonts omit those strokes. Here is an example of letters with and without serifs here:
In general, serif fonts have a more classical look and are an an excellent way to exude knowledge and trustworthiness. They can also be easier to read, because the serifs help define each letter individually. Sans serif fonts look clean and can feel more easy to read than other fonts. It's still easy and simple 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 more readable than others, and they vary widely in style. Here are some examples
You can clearly see that one is very elegant however the other appears a lot more friendly.
Fonts for displayare extremely diverse and include anything that could be considered decorative. They can vary in style and feel, but generally, they are used to create titles. Here are three different examples of display fonts.
The three of them don't appear very like each other, do they? They're nevertheless a fantastic method to create a brand's feel.
How do you choose and apply the right fonts
So now after we've established some of the basic and the basics of fonts, let's take a look at some helpful guideline for selecting the best fonts for your online store.
1. Consider legibility
The whole point of text is to be comprehended, and therefore legibility is the most important aspect when picking the right font. In the end, if your visitors can't read your text and understand the products you offer or learn more about your company and even be able to decide to purchase!
Your body text should almost always have a Serif, or sans serif font since they make it easy for visitors to read huge blocks or paragraphs of text. Keep script and display fonts for headings, and even then, make sure they're easy to read.
The second thing you should be thinking about is the spacing between your text. There are three primary space considerations to be aware of:
- Kerning: The amount of space between two characters. Correct kerning will ensure that every word is individually legible and doesn't end up looking like two.
- Leading: the distance between two paragraphs of text. Correct leading can make paragraphs of text more readable.
- Tracking Controls the spacing between letters in words as a whole and not just specific characters. So, instead of just altering the space between "t" in the word "this" and "h" within the expression "this" it is better to adjust the spacing between all four letters simultaneously.
Here's an illustration of each of them:
The ideal spacing between letters and lines can make it simpler for readers to comprehend, particularly in paragraph format. But don't fret; knowing more about this will be fun! There are great online games that provide hands-on practice.
2. Think about brand identity
Your brand's identity will determine what differentiates you from the rest. It's what defines the character of your company. And the fonts you choose are one component that displays the personality of your business to new and existing customers.
What kind of feeling are you hoping to instill for your visitors on your website? Funny and fun? Reliable and professional? Elegant and sophisticated? We'll glance at how some websites make use of fonts in order to express their image.
Scratch Pet Food has a branding that is super-friendly and their fonts show the same. They use an extra strong sans serif on headlines, and a light sans serif font for body text.
FLWR is a floral design studio and, since they design for weddings and other special occasions and other special occasions, it is natural for their fonts to be elegant and beautiful. The fonts they use combine modern serif and a thin sans serif for a bespoke look that matches their bouquets.
Ryanair's corporate website is, well, corporate -- and their fonts are a reflection of this. They picked different versions of the simple, professional font for both headlines and body text. The font is professional and doesn't seem suffocating.
Do you see how these companies use fonts to communicate the image they want their customers to associate with their brand? It's the same thing. Don't be afraid to try different types of fonts too, until you find the perfect appearance.
3. Use a limited number of the fonts
It's tempting to use all the wonderful fonts available on your website however, it is best to limit your choices to a few. In the event that you don't, your site will appear disjointed and scattered everywhere, and you may create a jarring experience for customers.
If you are choosing fonts, try pairing them with different scenarios to see whether they are compatible. One font could be used for headings, and another for body text. You can also use variations of a font -- such as bold or all caps -- to set text apart but still staying within the same font family.
Daelmans's Stroopwafels is an example. It utilizes the same font to write headlines as well as body text. They use a bold, all-caps font for headlines and a lighter version that is used for body content. However, in order to give the site an extra dimension, they sometimes use a script font that is akin to the caramel used in their offerings. The script, when utilized sparingly, is effective at accentuating important themes and making their website feel real and distinct.
Scrollino, a store selling kids' products is using a very friendly and casual serif font in their headers. The font is paired with a simple, clean sans serif for body text, which gives it a lovely and fun vibe.
4. Select the correct font size
It is essential that the font is big enough that site users can read it, including those with visual impairments. It is generally recommended to use 16px for the minimal size you need to employ, however, that could differ based on the font. Certain fonts are harder to read when smaller.
If possible, ask real people to check the text to see how easy it is to understand. Make sure to read your text across every kind, including tablets, computers, and mobile phones. Tools like Screenfly help make this task a lot easier.
Heggerty, the company that offers curriculum as well as other teaching resources, uses pleasantly big font sizes. While they're not so big that they completely take over design, they're simple and easy to read on all devices.
5. Think about accessibility
The first thing to consider is ensuring that your text is sufficiently large for readers and not complex, which is what we've discussed earlier. However, you should also consider color contrast. You need to make sure that the text you write on is simple to read, no matter the background you're using, regardless of whether that's a solid color, pattern, or image.
The ratio of contrast can vary from 1:1 (white on white) up to 21:1 (black on white). The contrast ratio you're looking for when using text is 7:1 when it comes to body text, and 4.5:1 in headlines. The WAVE accessibility software to evaluate your website for color contrast ratios, and other accessibility-related factors.
Track 7 Brewing does a great job of contrast in color on dark backgrounds. Their homepage employ either bright or white red text to ensure that it stands out from the darkened background.
6. Do not use caps when writing paragraphs.
While all caps can be great for making a statement but they can also be difficult to read when they are in the form of large text. Our brains have trouble reading text that is capitalized in paragraph form, which causes reading to be slower and more difficult.
So, if you do wish to make use of all caps, make sure to use it sparingly and only in headlines. This is how Veer is doing -- all capital letters can be very effective in making points and grabbing attention on their website, however they do not use them in paragraphs.
What are web safe fonts?
The way fonts are rendered and loaded by browsers is differently across different web browsers. Web safe fonts are ones that are beautiful and function perfectly on all browsers and all devices. While you do not necessarily want to avoid the amazing custom fonts you chose to represent your company but you should add web safe options to your font collection -- the collection of fonts you use for your website.
It basically sets up an alternate font for your site and grants the full power to control how the text appears if, for some reason your font isn't able to display for the user. As an example, you could tell browsers to use Playfair when your customized font isn't available, Georgia if Playfair isn't an option, and then a default serif font if both of these don't are available.
Kinsta gives helpful tips for adding secure fonts for backup on your website.
What fonts can you use for your website
What are the best ways to find great fonts for your online shop? The first thing to do is be sure you're in possession of the legal right to make use of the options you choose. Certain fonts are completely free, others are premium that are suitable for all uses while others are available for free for personal use only.for private use. Make sure you know how the license works for your fonts.
Below are some excellent websites fonts to use:
- Google Fonts: Google Fonts has a huge library of fonts that are free for personal and commercial use. It also offers tools to see Fonts as they work.
- Your theme: Many WordPress themes come with the font libraries, which are often coming from sources such as Google fonts. These fonts can be used for your site.
- Creative Market A marketplace online for digital assets Creative Market offers some really stunning, distinctive fonts that come in many styles.
- Font Squirrel: This resource categorizes fonts according to category and lets you preview their styles. 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: These are high-quality fonts that are available to companies who possess Creative Cloud licenses.
Change the font on your site
Once you've selected your fonts, it's time to add them to your site. There are three methods to accomplish this:
1. Use your own theme
Like we said earlier many themes have a library of fonts. Some allow you to apply those fonts to your site within their settings panel. Or, you can set up those fonts using the WordPress Customizer.
- Within your WordPress Dashboard, click Appearance > Customize.
- Select the Option for Fontsoption.
- Click the dropdown menu for the various types of text- Headings, Base Font and so on. Select a font. Every time you change fonts, the display of your site will be updated and you will be able to see what it will look like before applying it.
In the Customizer, you can change the settings to alter font styles (bold, italicized, etc.) and size.
2. Use a plugin
If your theme does not include fonts or the fonts that you would like to use, the next most efficient option is using the plugin. There's a myriad of options available, but should you choose to utilize an Google font, WP Google Fonts is the best choice. It gives you access to all of the Google Fonts library, then lets you apply specific fonts to various areas on your website, including headings, paragraphs, as well as lists.
If you want to use a custom font from elsewhere you can try to use the Custom Fonts plugin. It allows you to create your own fonts and even integrates with popular themes and page builders to provide an easier setup.
3. Utilize a custom-code
If you're comfortable with programming there are two more options:
- Create fonts for your own website and then use the codes to add them to specific areas of text
- Load the fonts from a third-party sources (like Google Fonts) and enqueue them
For further details and directions, check out this post from Kinsta.
Get creative, but remember that simplicity is the best
Make sure you have fun using your fonts! Be creative with your branding and choose options that best convey the spirit of your organization. However, at the same time, remember that simple is often the way to go. Choose fonts that are easy to read and don't get overwhelmed by using several alternatives. The people you are targeting should be your primary concern.