How to Choose the Right fonts for your eCommerce website
Your online store is made up from a variety of parts, from your color scheme and logo to the language that you employ and the caliber of your customer care. And, of course, fonts are a big component of this.
The fonts that you use on your site can go a long way in establishing the feel of your company's image that is professional, fun and serious and so on. They play an important role in providing an excellent experience for your users, especially those with disabilities in their vision.
But how do you choose the right fonts and utilize them in the most effective method you can?
A primer on typefaces, and fonts
Let's take a step back to a second. Most of you are familiar with fonts like Times New Roman, Helvetica as well as the much-banned Comic Sans. But what are they, specifically?
A typeface is a digital representation of text, which has many different styles. For 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 more bold version)
- Helvetica Condensed (a version of the alphabet with the letters closer)
- Helvetica Rounded (a version with the letters rounded)
The typeface is very specific, that has exact weights and designs. So, Helvetica Bold is a font. Helvetica is the name of a typeface. To make this piece we'll be using words "typeface" and "font" in conjunction.
There are four main kinds of fonts you can choose from, as well as combine and mix to get the right feel for your website.
Serif fonts have extra strokes in certain letters while Sans Serif fonts do not include these strokes. Here is an example of the letters without and with serifs in the following:
In general, serif fonts are more traditional and are perfect for exuding expertise and confidence. Also, they are easier to read, because serifs can help distinguish each letter individually. The serif-style fonts in Sans Serif are simple and can feel more accessible than their counterparts. They're also simple and easy to read in large bodies of text.
Script and handwritten fontsclosely resemble handwriting, and are sometimes very ornate. Some are much simpler to read than other, and they vary widely in style. Here are two instances:
You can clearly see that the one looks very classy and the other a lot more friendly.
Display fontsare incredibly diverse, and encompass anything that could be described as decorative. They vary widely in look and feel but generally, they are used to create titles. Three examples of display fonts:
They don't all look like each other, do they? But they're a great option to build brand swag.
What is the best way to select and use the right fonts
Now having established the fundamentals, let's look at a few handy tips for choosing the right typefaces for your store.
1. Consider legibility
The entire point of text is that it should be read -- so legibility is the most important aspect when picking the right font. In the end, if your people can't understand your content, they can't learn about your products or find out about your business, much less decide to purchase!
Your body text should always have a serif or sans serif font because they allow people to understand long paragraphs or blocks of text. Save display and script fonts for headings, and at all times, ensure they can be easily understood.
The second thing you should be thinking about is spacing between your text. There are three major space considerations to be aware of:
- Kerning Amount that space is left between two characters. A proper kerning process ensures that every word is individually legible and doesn't appear to be two words.
- 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" as well as the "h" within the word "this", you'd adjust the spacing between the four letters at once.
Here's an example of the three
Ideally, the spacing between lines and letters will make it easy for people to read, especially in paragraph form. Do not worry, learning more about this can be enjoyable! There are great online games which give you the opportunity to practice in a hands-on manner.
2. Think about brand identity
The identity of your brand is what sets you apart. It's your personality that defines your company. Your font choices are one component that displays that personality to potential as well as existing customers.
So what feeling do you want to invoke through your website? Awe-inspiring and funny? Professional and dependable? Sophisticated and elegant? Let's 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 show the same. The fonts are extra aggressive sans serif to highlight 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 events such as weddings, it makes sense to have their fonts stylish and elegant. The fonts they use combine modern serif and a thin sans serif font to create a distinctive style that is matched by their floral arrangements.
Ryanair's corporate site is very corporate, and the fonts they use reflect that. They've chosen versions of the same simple professional font to use for headlines and body text. The font is professional and doesn't seem suffocating.
Are you aware of how all three of these businesses use fonts to convey what they want customers to feel when they see their logo? You can do the same similar thing. Be prepared to play around with types of fonts too, until you've come up with the ideal look.
3. Stick to just a couple of types of fonts
It's tempting to incorporate all the amazing fonts that you can find into your site however, it is best to limit your choices to a few. Otherwise, your store can appear disjointed and scattered everywhere, and you may make it difficult for visitors.
If you are choosing fonts, pair them in different situations to see whether they are compatible. It is possible to choose one type of font for headings, and one as body text. It is also possible to use different versions of a font -- like the bold type or all caps- to set text apart while staying in the same font family.
Daelmans Stroopwafels For instance, HTML0 utilizes the same font for headlines and body text. They employ a bold all-caps version for headings, as well as a light version for body text. However, in order to give the site more personality, they occasionally utilize a script font that matches the caramel that is used in their products. The script, when utilized in a limited amount, can be effective in accentuating important themes and making the site appear authentic and unique.
Scrollino is a store selling kids' products utilizes a highly accessible and lighthearted serif font for their headings. It is combined with a simple, clean sans serif body text to create a clear and fun feel.
4. Make sure you choose the appropriate font size
It is essential that the text is sufficiently large that site users can read it even those who have visual impairments. It is generally recommended to use 16px for the minimal size you should use, though that can differ based upon the type of font. Some fonts, for instance, are harder to read when smaller.
If you can, get for real-life people to look over the text to see whether it's simple to read. Make sure to read the text on every kind, including tablets, computers, and mobile phones. Tools such as Screenfly assist in this process a lot simpler.
Heggerty, the company that offers curriculum as well as other educational resources utilizes pleasantly large size fonts. Though they'ren't so large that they completely take over appearance of the site, they're easy and simple to read on all devices.
5. Take into account accessibility
One of those things is making sure that your text is sufficiently large for readers and not complicatedas we have discussed previously. You should also think about contrast in colors. It is essential to ensure that your text is clear to read on any background is it on, no matter if that's a solid color, design, or even an image.
The contrast ratio can range between 1:1 (white on white) to 21:1 (black on white). It is recommended that the contrast ratio you're seeking in text should be around 7:1 for body text , and 4.5:1 in headlines. You can use the WAVE accessibility tool to analyze your site for contrast ratios in color, as well as other accessibility factors.
Track 7 Brewing is a master of color contrast on dark backgrounds. On their homepage, they make use of either white or red text to ensure that it is distinct from the darker image behind it.
6. Beware of all caps within paragraphs.
Although all caps can be great for making a statement, they can be very difficult to read when they are in the form of paragraphs of text. Our brains simply have difficulties making sense of text capitalized in paragraph format, which makes reading it slower and more difficult.
Therefore, if you need to use all caps, use it sparingly and only in headlines. This is what Veer uses with all capital letters. can be very effective in making points and grabbing attention on the site, but avoid it in paragraphs.
What is the best web safe fonts?
The way fonts are rendered and loaded by browsers is differently across different web browsers. Safe fonts for web are those which look stunning and work perfectly on all browsers and all devices. And while you don't necessarily need to skip the great customized fonts that you choose to represent your company, you do want to include web safe fonts to the font library -- the assortment of fonts used on your website.
It basically sets up a backup font for your store and gives the full power to control how your text will appear if due to some reason your font isn't able to load for a visitor. As an example, you could tell browsers to use Playfair when your customized font isn't accessible, Georgia if Playfair isn't an option, or a default serif font in the event that neither of those work.
Kinsta offers some great advice on how to include backup web safe fonts to your site.
Where to find fonts for your website
So how do you find great fonts for your online shop? Your first step is to make sure that you have the legal rights to make use of the options you choose. Certain fonts are available for free to use in all circumstances while others have premium pricing for all purposes Some are free onlyfor personal usage. Take the time to understand how the license works for your fonts.
Here are some fantastic resources for website fonts:
- Google Fonts: Google Fonts has a huge library of fonts that are free for personal and commercial use. They also have tools to see Fonts as they work.
- Your website's theme The majority of WordPress themes have collections of fonts, often taken from other sources, such as Google fonts that you can use on your website.
- Creative Market A web-based marketplace to sell digital assets Creative Market offers some really beautiful, unique fonts with a range of styles.
- Font Squirrel The site sorts fonts by category and allows you to preview the fonts. However, be aware that there are some fonts that are intended meant for use by the user and you should know what type you're downloading.
- Adobe Fonts They are premium typefaces for businesses who possess Creative Cloud licenses.
Change the font used on your website?
Once you've selected your fonts, you're ready to incorporate them into your website. There are three primary options to apply them:
1. Utilize your own theme
As we mentioned, a lot of themes include a library of fonts. Some allow you to apply those fonts to your site in their own settings panel. You can also configure the fonts with the WordPress Customizer:
- In the dashboard of your WordPress Dashboard, click Appearance - Customize.
- Choose the option for Fonts.option.
- Open the dropdown for the various types of textsuch as Headings, Base Font etc. Choose the appropriate font. Each time you switch fonts, the view of your site will update and you will be able to see what it will look like before applying it.
Within the Customizer, you can change the settings for font style (bold, italicized, etc.) as well as the size.
2. Use a plugin
If your theme does not include fonts, or doesn't offer the fonts you'd like to utilize, then the best option is to install a plugin. There's an array of choices, however when you're looking to make use of an Google font, WordPress Google Fonts is an excellent choice. It allows access to the complete Google Fonts library, then lets you apply specific fonts on various parts of your website, such as headings, paragraphs, as well as lists.
If you want to use a custom font from elsewhere you can try the custom fonts plugin. It allows you to upload your own fonts as well as integrate with other popular themes and page builders for an easier setup.
3. Utilize a custom-code
If you're comfortable with programming There are two additional options:
- Host fonts on your own website and then use the codes to add them to text areas
- Load the fonts from an external sources (like Google Fonts) and add them to the queue.
For further details and directions, check out this article from Kinsta.
Be creative but keep in mind that simple is best
Have fun with your fonts! Create your own unique branding and choose options that best reflect the personality of your business. But, at the same keep in mind that simplicity is usually the best most effective way to go. Select fonts that are simple to read. Don't become too complicated by using several options. The people you are targeting should be your primary concern.