How to Choose the Right Fonts for your eCommerce Website
The image of your online store is made up of many different elements, from the colors and logo , to the language you use and the quality of your customer service. And, of course, fonts are a big component of this.
The fonts that you use for your site go a long way towards creating the impression of your brand which is professional, playful and serious for instance. They also play a really important role in providing 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 method you can?
A brief introduction to typefaces and fonts
Let's take a step back to a second. You're probably familiar with typefaces such as Times New Roman, Helvetica, and the much-maligned Comic Sans. What are they specifically?
A typeface is an electronic representation of text which includes several different styles. Like, 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 rounded letters)
A font is extremely specific, with exact weights and styles. Therefore, Helvetica Bold is a font, while Helvetica is an typeface. To make this post, we'll be using the terms "typeface" and "font" in conjunction.
There are four major styles of fonts that you could choose from as well as mix and match to create the right feel for your site.
Serif fonts include extra strokes in certain letters however, the Sans Serif fonts omit those strokes. Here is an example of letters with and without serifs here:
Serif fonts generally tend to be more classic and are an perfect for exuding confidence and knowledge. They can also be easier to read, because the serifs define every letter in a distinct way. The serif-style fonts in Sans Serif are simple and can feel more accessible than the other types. It's still easy and simple to read in large bodies of text.
Script and handwritten fontsclosely mimic handwriting, and are sometimes very ornate. They are a lot more readable than others as well as they differ in style. Here are a couple of instances:
It is evident that the first one is elegant, while the other looks a lot more friendly.
Display fontsare incredibly diverse, and include anything that could be described as decorative. 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 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
Now after we've established some of the basic, let's look at a couple of helpful tips to choose the appropriate fonts for your online store.
1. Consider legibility
The entire point of text is read -- so legibility must be the primary aspect when picking a font. After all, if visitors can't read your text, they can't learn about your offerings or get information about your business and even be able to decide to purchase!
The body text you write should nearly always use Sans serif or serif font because they make it easy for readers to comprehend large paragraphs or blocks of text. Use script and display fonts for headings and, even then, make sure they can be easily understood.
The next thing to think about is the spacing between your texts. There are three primary factors to consider when spacing:
- Kerning Amount of space between two characters. Proper kerning ensures that each word can be read independently and ensures that no word will end up looking like two.
- Leading The distance between two paragraphs of text. Proper leading makes paragraphs of text much easier to read.
- Tracking controls the spacing of letters in words as a whole instead of the individual letters. Instead of altering the space between "t" in the word "this" and "h" within the phrase "this" then you'd have to alter the spacing between all four letters in one go.
Here's an example of the three
Ideally, the spacing between letters and lines will make it easy for readers to comprehend, especially in paragraph form. But don't fret; learning more about this can be enjoyable! There are a number of excellent online games that give you hands-on practice.
2. Consider your brand's image
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 can be a key element that reveals the personality of your business to new as well as existing customers.
So what feeling do you want to invoke on your site? Awe-inspiring and funny? Professional and dependable? Sophisticated and elegant? Let's take a look at how a few websites use fonts to convey their identity.
Scratch Pet Food has a brand that's super friendly, and their fonts reflect this. They employ a aggressive sans serif to highlight headlines and a lighter sans serif body font.
FLWR is an interior design company andsince they create designs for events such as weddings, it makes sense for their fonts to be elegant and beautiful. The fonts they use combine modern serif and a thin sans serif font to create a distinctive look that matches their bouquets.
Ryanair's corporate site is well, corporate -- and their fonts reflect that. They picked variants of the same basic, professional font for both headlines as well as body text. It's professional without seeming stuffy.
Do you recognize how all three of these businesses use fonts to convey what they want customers to have when they hear their name? You can do the same thing. Be prepared to try different fonts, either, until you've found the ideal look.
3. Stick to just a couple of types of fonts
It's tempting to incorporate all the wonderful fonts available in your store but you should limit yourself to a few. In the event that you don't, your site will seem disconnected and everywhere or create a jarring experience for visitors.
In selecting your fonts, pair them in various scenarios to determine if they work well together. You may choose one font to use for headings and one for body text. There are also variations of fonts -- like the bold type or all caps- to set text apart while staying in the identical font family.
Daelmans's Stroopwafels For instance, HTML0 uses the same font for headlines and body text. They use a bold, all-caps font for headlines as well as a light version that is used for body content. To give their site more personality, they occasionally use a script font that is akin to the caramel used in their products. When used sparingly, is effective at accentuating important themes and making their site feel real and distinct.
Scrollino, a shop that sells children's products is using a very accessible and lighthearted serif font in their headers. It is combined with a simple, clean sans serif for body text for a readable and enjoyable feel.
4. Make sure you choose the appropriate font size
It is essential that the text is large enough for site visitors to read even those who have disabilities with vision. In general, 16px is the minimal size that you must use, though that can differ based upon the type of font. For example, some fonts are more difficult to read when smaller.
If possible, ask for real-life people to look over your text and see if it's easy to comprehend. Also, make sure you review the text on all types -- tablets, computers and even mobile phones. Software like Screenfly assist in the process much easier.
Heggerty, an organization that provides curriculum and other teaching resources, uses pleasantly big font sizes. Although they're not huge enough that they take over style, they're also simple and simple to read on any device.
5. Think about accessibility
Another thing you should consider is to ensure that the text is sufficiently large to read and not too complicatedas we have discussed previously. But you also want to think about contrast in colors. It is essential to ensure that the text you write on is simple to read, no matter the background you're using, regardless of whether it's a solid or solid-colored 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 proportion of contrast you're looking for with text is around 7:1 for body text and 4.5:1 in headlines. You can use the WAVE accessibility software to evaluate your website for contrast ratios in color, as well as other accessibility factors.
Track 7 Brewing performs a fantastic job of contrasting colors with dark backgrounds. On their homepage, they use either white or bright red text to ensure that it stands out from the darkened background.
6. Beware of all caps within paragraphs.
Although all caps can be great for making a statement, they can be very difficult to read in paragraphs of text. The brain has difficulty making sense of text capitalized in paragraph format, which causes reading to be harder and slower.
So, if you do want to use all caps, make sure to use it sparingly and only in headlines. That's what Veer uses -- all capital letters make great the point 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 across the web. Safe fonts for web are those that look great and load properly on every browser and all devices. Although you don't have to use the fantastic custom fonts you chose for your brand but you should incorporate web safe alternatives into your font collection -- the collection of fonts that you will use on your website.
This basically creates an alternate font for your site and grants you full control over how your text will appear if in some way the font you have created won't load for a visitor. As an example, you could tell browsers to use Playfair in the event that your font isn't in stock, Georgia if Playfair isn't an option, and a default serif font in the event that neither of those are available.
Kinsta provides excellent tips to add secure fonts for backup on your website.
What fonts can you use that you can use for your web site
What are the best ways to find top fonts to use in your online shop? The first thing to do is ensure that you've got the legal right to utilize the fonts you decide to use. Some are free for all purposes Some fonts are paid for for all purposes while others are completely free onlyfor private use. Make sure you know how the license works on your fonts.
Here are some fantastic sources for fonts used on websites:
- Google Fonts: Google Fonts has an enormous collection of fonts, which are free for personal and commercial use. It also offers software to view the fonts you want to use in your.
- Your theme: Many WordPress themes have the font libraries, which are often coming from sources such as Google fonts, that you are able to use to build your website.
- Creative Market A web-based marketplace to sell digital assets Creative Market offers some really gorgeous, original fonts available that come in many styles.
- Font Squirrel: This resource categorizes fonts according to category and allows you to view them. However, be aware that there are some fonts that are intended for personal use which is why you must are aware of the type you're downloading.
- Adobe Fonts They are premium typefaces available to businesses that are holders of Creative Cloud licenses.
How to change the font used on your website?
After you've chosen your fonts, it's time to add them to your site. There are three primary methods to accomplish this:
1. Use your theme
As mentioned earlier many themes have a library of fonts. Many themes let you apply the fonts you want to use on your website through their individual settings panel. Or, you can set up those fonts using the WordPress Customizer:
- Within your WordPress Dashboard, click Appearance > Customize.
- Click on the Fontsoption.
- Click the dropdown menu for the various types of textsuch as Headings, Base Font etc. Choose the appropriate font. Each time you switch fonts, the preview of your website will change so you can test what the site will appear like prior to using the font.
The Customizer can change the settings regarding font styles (bold, italicized, etc.) and font size.
2. Use a plugin
If the theme you're using doesn't have fonts or the fonts you want to utilize, then the easiest option is to use a plugin. There's an array of options , but should you choose to utilize the Google font, then WordPress Google Fonts is a great one. It allows access to the complete Google Fonts library, then allows you to apply individual fonts on various parts of your website, such as headings, paragraphs, as well as lists.
If you're looking to install the font you want to use from another source you can try the Custom Fonts plugin. You can create your own fonts and integrates with well-known themes and page builders to provide simple setup.
3. Use custom code
If you're familiar with the code there are two more options:
- Host fonts on your own site and use codes to add them to text areas
- Load the fonts from a third-party sources (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 simplicity is the best
Have fun with your fonts! Be creative with your branding and pick fonts that represent the feel of your business. Yet, at the keep in mind that simplicity is often the preferred method. Choose fonts that are easy to read, and don't make it overly complicated with four or five different options. Your audience should be your primary concern.