The Best fonts for your eCommerce website
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 support. Also that includes fonts. Fonts make up a significant part of that.
The fonts that you use for your site go a long way towards establishing the feel of your business -- professional, quirky, serious, fun, for instance. They also play a really vital role in providing visitors with a pleasant experience. customers, even those who have disabilities in their vision.
But how do you choose the correct fonts, and then make use of them in the most efficient way possible?
An introduction to typefaces and fonts
We'll take a step back to a second. You're probably familiar with typefaces like Times New Roman, Helvetica, and the much-maligned Comic Sans. What are they precisely?
Well, a typeface is a digital representation of text, which has various styles. Like, 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 that has more letters)
- Helvetica Rounded (a version with rounded letters)
A typeface is highly specific with exact weights and styles. So, Helvetica Bold is a font, whereas Helvetica is a typeface. In this article we'll be using phrases "typeface" and "font" in conjunction.
There are four primary kinds of fonts you could choose from as well as mix and match them to make the right feel for your site.
Serif fonts have extra strokes added to certain letters, however, Sans Serif fonts do not include these strokes. Here is an example of letters that have and do not have serifs below:
In general, serif fonts have a more classical look and are an an excellent way to exude expertise and confidence. It is also easier to read, because serifs can help distinguish every letter separately. Sans serif fonts are clean and can feel more accessible than their counterparts. They're still simple and easy to comprehend in big bodies of text.
Script and handwritten fontsclosely mimic handwriting, and can sometimes be extremely elaborate. Certain fonts are easier to read than others, and they vary widely in style. Here are some instances:
It is evident that one is very elegant, while the other looks quite more casual.
Fonts for displayare very diverse, they cover anything that can be described as ornamental. They vary widely in look and feel, but usually, they're used only to create titles. Below are three displays font examples:
These three don't look very like each other, do they? However, they're an excellent option to build brand swag.
What is the best way to select and use the correct fonts
So now after we've established some of the basic, let's look at a some helpful guideline for selecting the best fonts for your online store.
1. Consider legibility
The entire point of text is to be comprehended, and therefore legibility must be the primary consideration when choosing the right font. After all, if readers aren't able to read your message, they can't learn about your offerings or get information the details about your business or even decide to purchase!
Your body text should always use a 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, in any case, ensure that they're easy to read.
The next thing to think about is the spacing between your text. There are three primary factors to consider when spacing:
- Kerning is the amount of space between two words. Correct kerning will ensure that every word is individually legible and ensures that no word will end up looking like two.
- Leading A distance that separates two paragraphs of text. A properly led paragraph makes text easier to read.
- Tracking: Controls letter spacing in words as a whole and not just the individual letters. Instead of adjusting the space between the "t" as well as the "h" in the word "this" it is better to adjust the spacing between all four letters simultaneously.
Here's an example of each of them:
The ideal spacing between the letters and lines can make it simpler to read especially in paragraph form. But don't fret; learning more about this can be fun! There are some amazing online games that give you the opportunity to practice in a hands-on manner.
2. Think about your brand's image
Your brand's identity is what sets you apart. It's what defines the character of your company. Your font choices are one component that displays that personality to potential and existing customers.
What emotion would you like to create for your visitors on your website? Awe-inspiring and funny? Dependable and reliable? Modern and stylish? Let's take a look at how a few websites use fonts to convey their brand.
Scratch Pet Food has a brand that's super friendly and the fonts they use reflect that. The fonts are extra bold sans serif for headlines, and a light sans serif for body text.
FLWR is a floral design studio andsince they create designs for weddings and other special occasions and other special occasions, it is natural to have their fonts stylish and elegant. They combine a modern serif with a thinner sans serif to create a unique appearance that complements the bouquets they design.
Ryanair's corporate site is very corporate, and the fonts they use reflect the same. They picked different versions of the simple professional fonts for the body text and headlines. It's elegant and professional, without appearing clunky.
Do you recognize how these organizations use fonts in order to convey the image they want their customers to associate with their brand? It's the same process. Don't be afraid to play around with the fonts until you've found the ideal style.
3. Stick to just a couple of fonts
While it may be tempting to incorporate all the wonderful fonts available on your website but you should limit yourself to just a couple. If not, your website could seem disconnected and everywhere or cause a confusing experience for customers.
If you are choosing fonts, pair them in different situations to see how they perform. You may choose one font for headings, and another as body text. There are also variations of fonts -- like the bold type or all caps -to differentiate text while staying in the same font family.
Daelmans ' Stroopwafels For instance, HTML0 employs the same fonts for headlines as well as body text. The font is bold and all-caps style for their headings as well as a light version for body text. But, to add even an extra dimension, they sometimes use a script font that matches the caramel that is used in their merchandise. The script, when utilized sparingly, is effective at accentuating important themes and making their site feel authentic and unique.
Scrollino is a online store that sells kids' items utilizes a highly easy and fun serif font for their headings. The font is paired with a clean, simple sans serif for body text for a readable and enjoyable feel.
4. Make sure you choose the appropriate font size
It's crucial that your text is large enough that visitors can read, including those with disabilities with vision. The rule of thumb is 16px as the size that you must utilize, but that may vary based depending on your font. Some fonts, for instance, are harder to read when smaller.
If you are able, have someone who is a real person to review the text to see whether it's simple to read. Also, make sure you review the text on all types -- tablets, desktops as well as mobile phones. Tools like Screenfly assist in this task a lot easier.
Heggerty, an organization that provides curriculum and other educational resources that uses large size fonts. Although they're not huge enough that they take over the style, they're also simple and easy to read across all devices.
5. Think about accessibility
One of those things is ensuring that your text is big enough for readers and not complicatedas we have discussed previously. However, you should also consider color contrast. You need to make sure that the text you write on is simple to read no matter what background is it on, no matter if that's a solid color, pattern, or image.
The ratio of contrast can vary between 1:1 (white on white) up to 21:1 (black on white). A good contrast ratio you're looking for with text is around 7:1 for body text and 4.5:1 for headlines. It is possible to use the WAVE accessibility software to examine your site to determine the color contrast ratios and other accessibility-related factors.
Track 7 Brewing does a great job of contrast in color with dark backgrounds. For their website, they use either white or bright orange text so that it makes a statement against the dark images behind it.
6. Avoid all caps in paragraphs
While all caps can be effective in making an impression but they can also be difficult to read when they are in the form of paragraphs of text. Our brains simply have difficulties processing capitalized text when it is in paragraph form. This can make reading slower and more difficult.
So, if you do need to use all caps, make sure to use it sparingly and only in headlines. This is how Veer does with all capital letters. are very effective at making the point and drawing attention to their site, but they do not use them when writing paragraphs.
What about web safe fonts?
The way fonts are rendered and loaded by browsers is differently across different web browsers. Web safe fonts are ones that look great and load properly on every browser and every device. While you do not necessarily need to skip the great personal fonts you select to represent your company however, it is important to include web safe fonts to your font stack -- the collection of fonts you use for your website.
Doing this essentially sets the default font of your online store, and allows you complete control over the way text displays if, for some reason the font you have created won't be able to load for visitors. You can, for instance, tell browsers to use Playfair when your customized font isn't accessible, Georgia if Playfair isn't an option, or a default serif type if neither of those are available.
Kinsta offers some great advice for adding secure fonts for backup on your website.
Where to find fonts for your website
What are the best ways to find top fonts to use in your online shop? Your first step is to be sure you're in possession of the legal right to use whatever options you decide to use. There are fonts that are completely free Some fonts are paid for to be used for any purpose Some are available for free justfor private usage. Take the time to understand how the license works for your fonts.
Below are some excellent sources for fonts used on websites:
- Google Fonts: Google Fonts has an extensive collection of fonts available that are available for free both for private and commercial usage. They also have software to view the fonts you want to use in your.
- Your website's theme: Many WordPress themes come with collections of fonts, often from sources like Google fonts. These fonts can be used for your site.
- Creative Market: An online marketplace to sell digital assets Creative Market offers some really stunning, distinctive fonts that come in many styles.
- Font Squirrel The site categorizes fonts according to category and allows you to preview their styles. However, be aware that some options are just for personal use, 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 have Creative Cloud licenses.
What can you do to alter the font of your site
Now that you've picked your fonts, you're ready to apply them to your site. There are three methods to accomplish this:
1. Use your theme
As we mentioned, a lot of themes come with a collection of fonts. Some allow you to 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.
- In the dashboard of your WordPress dashboard, navigate to Appearance > Customize.
- Click on the Fontsoption.
- Select the dropdowns for each type of text -such as Headings and Base Font, etc. Choose the font you want to use. Each time you switch fonts, the preview of your site will be updated so you can test what the new look will be before using it.
The Customizer are able to adjust the options regarding font styles (bold, italicized, etc.) and size.
2. Use a plugin
If your theme does not include fonts or the fonts you'd like to utilize, then the best option is to install an extension. There's an array of options , but should you choose to utilize a Google font, then WP Google Fonts is an excellent choice. It gives you access to the entire Google Fonts library, then permits you to add individual fonts to different areas of your site, like headings, paragraphs and lists.
If you're looking to install the font you want to use from another source then consider using this custom fonts plugin. It allows you to upload your own fonts as well as integrate with other popular themes as well as page builders for a simpler configuration.
3. Make use of a customized code
If you're familiar with code, you have two other choices:
- Create fonts for your own site and use codes to add them to text areas
- Download the fonts using an external sources (like Google Fonts) and enqueue them
To find out more information and guidelines For more details and directions, refer to this article from Kinsta.
Get creative, but remember that the simple way is always best.
Enjoy your fonts! Be creative with your branding and choose options that best reflect the personality of your company. However, at the same at the same time, keep in mind that simple is usually the best way to go. Select fonts that are simple to read. Don't become overly complicated with several alternatives. Your audience should be your first priority.