How to Choose the Right fonts for your eCommerce website
Your online store is made up of many different components, from your colors and your logo to the languages that you employ and the caliber of your customer service. 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 creating the impression of your business -- professional, quirky, serious, fun, etc. Additionally, they play an vital role in providing visitors with a pleasant experience. users, especially those with vision impairments.
However, how do you pick the right fonts and use them in the best way possible?
A brief introduction to typefaces and fonts
Take a break to a second. It's likely that you've heard of typefaces like Times New Roman, Helvetica as well as the widely-discredited Comic Sans. What are they specifically?
The definition of a typeface is the digital representation of text, which has 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 and bolder variant)
- Helvetica Condensed (a version of the alphabet with letters that are closer together)
- Helvetica Rounded (a version with round letters)
The typeface is very specific, that has exact weights and designs. So, Helvetica Bold is a font, while Helvetica is the name of a typeface. In this piece, we'll be using the terms "typeface" and "font" to refer to them interchangeably.
There are four main styles of fonts that you could choose from as well as mix and match them to make the right feel for your website.
Serif fonts contain extra strokes that are that are added to specific letters, while the Sans Serif fonts omit these strokes. Here is an example of the letters without and with serifs below:
In general, serif fonts have a more classical look and are an perfect for exuding confidence and knowledge. They can also be more readable, as serifs can help distinguish every letter separately. Sans serif fonts look clean and appear more accessible than the other types. It's still easy and simple to read even in huge volumes of text.
Script and handwritten fontsclosely mimic handwriting, they can be very elaborate. Some are much easier to read than others, and they vary widely in style. Here are a couple of instances:
It is evident that the first one is elegant however the other appears much more welcoming.
Fonts for displayare extremely diverse and include anything that could be termed ornamental. They can vary in style and feel but generally, they are used for titles. Three examples of display fonts:
These three don't look very like each other Do they? But they're a great method to create a brand's feel.
How to choose and implement the right fonts
So now having established the fundamentals we can look over a some helpful guideline for selecting the best web-based store font.
1. Consider legibility
The whole point of text is understood, so readability should be your number one factor when selecting your font. In the end, if your people can't understand your content it's impossible for them to learn about your offerings or get information the details about your business, much less buy anything!
Your body text should always be either a serif or sans serif font since they make it easy for visitors to read large paragraphs or blocks of text. Save display and script fonts for headings, and even then, make sure they're easy to read.
Another thing to think about is spacing between your text. There are three main factors to consider when spacing:
- Kerning: The amount that space is left between two characters. A proper kerning process ensures that every word can be read independently and that one word doesn't look like two.
- Leading: The distance between two paragraphs of text. Proper leading makes paragraphs of text more readable.
- Tracking controls the spacing of letters for words as a unit instead of the individual letters. Instead of adjusting the space between the "t" in the word "this" and "h" in the word "this" it is better to adjust the spacing between all four letters at once.
Here's an illustration of the three
Ideally, spacing between the letters and lines will make it easy for people to read, particularly when in paragraphs. But don't fret; studying more about this could be fun! There are some excellent online games that give you practical practice.
2. Take a look at brand identity
Your brand's identity will determine what differentiates you from the rest. It's the personality of your company. And the fonts you choose are one component that displays your personality to prospective as well as existing customers.
What kind of feeling are you hoping to instill 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 image.
Scratch Pet Food has a branding that is super-friendly and the fonts they use reflect that. They employ a bold sans serif for headlines and a more light sans serif font 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 to have their fonts gorgeous and stylish. They blend a contemporary serif with a thinner sans serif for a bespoke look that matches their floral arrangements.
Ryanair's corporate site is very corporate, and the fonts they use are a reflection of this. They picked variants of the same basic, professional font for both headlines as well as body text. It's elegant and professional, without appearing clunky.
Are you aware of how all three of these organizations use fonts in order to convey the image they want their customers to feel when they see their logo? It's the same thing. Be prepared to play around with fonts, either, until you've found the ideal appearance.
3. Use a limited number of fonts
It's tempting to use all the great fonts you find in your store however, it is best to limit your choices to only a handful of. If not, your website could seem disconnected and everywhere which could cause a confusing experience for visitors.
In selecting your fonts, pair them in different scenarios to see how they perform. It is possible to choose one type of font for headings, and an alternative to be used for body texts. It is also possible to use different versions of a font -- such as Bold or All Capsfor a distinct font without straying from the identical font family.
Daelmans ' Stroopwafels is an example. It employs the same fonts for headlines as well as body text. They employ a bold all-caps font for headlines and a lighter version for body text. However, in order to give the site an extra dimension, they sometimes employ a script font which is akin to the caramel used in their offerings. The script, when utilized in a limited amount, can be effective in accentuating important themes and making the site appear genuine and distinctive.
Scrollino is a online store that sells kids' items utilizes a highly friendly and casual serif font in their headers. They pair that with a simple, clean sans serif body text for a readable and fun feel.
4. Make sure you choose the appropriate font size
It's important that your text is sufficiently large that site users can read it, including those with visually impaired eyes. It is generally recommended to use 16px for the minimum size you need to utilize, but that may depend depending on your font. Some fonts, for instance, are harder to read when smaller.
If possible, ask for real-life people to look over your writing and determine if it's easy to understand. Also, make sure you review your text across every kind, including tablets, computers, and mobile phones. Tools like Screenfly assist in the process much easier.
Heggerty, an organization that provides curriculum and other teaching resources that uses large font sizes. Although they're not huge enough that they take over the appearance of the site, they're easy and easy to read on all devices.
5. Consider accessibility
One of those things is ensuring that your text is large enough to read and not too complicated, as discussed above. You should also think about contrast in colors. It is essential to ensure that your text is easy to read no matter what background it's on, whether that's a solid color, pattern, or image.
The contrast ratio can range from 1:1 (white on white) up to 21:1 (black on white). The proportion of contrast that you want to achieve when using text is 7:1 for body text , and 4.5:1 for headlines. It is possible to use the tools for accessibility called WAVE to evaluate your website for color contrast ratios, as well as other accessibility factors.
Track 7 Brewing does a great job of color contrast on dark backgrounds. Their homepage make use of either white or red text to ensure that it makes a statement against the dark image behind it.
6. Do not use caps when writing 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 bodies of text. The brain has difficulties reading text that is capitalized when it is in paragraph form. This makes reading it slow and difficult.
Therefore, if you wish to make use of all caps, make sure to use the letters sparingly and in only headlines. It's exactly what Veer is doing and all capital letters are very effective at making the point and drawing attention to their site, but they should be avoided when writing paragraphs.
What about web safe fonts?
Browsers render and load fonts differently on different websites. Web safe fonts are ones which look stunning and work perfectly on all browsers and on every device. Although you don't have to use the fantastic custom fonts you chose for your brand however, it is important to include web safe fonts to your font collection -- the assortment of fonts that you will use on your site.
Doing this essentially sets a backup font for your store and gives you complete control over the way text displays if, for some reason, your custom font won't load for a visitor. For example, you can instruct browsers to choose Playfair in the event that your font isn't accessible, Georgia if Playfair isn't an option, and a default serif font if both of these don't works.
Kinsta offers some excellent tips for adding backup web safe fonts to your site.
How do you find the right fonts that you can use for your web site
So how do you find great fonts for your online shop? Your first step is to ensure that you've got the legal right to use whatever options you choose. There are fonts that are completely free, others are premium for all purposes, and still others are free onlyfor private usage. Make sure you know the licensing process for your fonts.
Here are some fantastic resources for website fonts:
- Google Fonts: Google Fonts has an enormous collection of fonts available that are free for personal and commercial use. They also have tools to see the fonts you want to use in your.
- The theme you choose The majority of WordPress themes have libraries of fonts, sometimes from sources like Google fonts. These fonts you are able to use for your site.
- Creative Market A web-based marketplace for 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 the fonts. However, be aware that some options are just to be used for personal purposes which is why you must know what type you're downloading.
- Adobe Fonts They are premium typefaces for businesses who are holders of 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 incorporate them into your site. There are three main options to apply them:
1. Utilize your own theme
Like we said earlier many themes come with a collection of fonts. Some allow you to apply the fonts you want to use on your website in their own settings panel. Also, you could configure the fonts with the WordPress Customizer.
- Within your WordPress Dashboard, click the Appearance tab and then Customize.
- Choose the Fontsoption.
- Click the dropdown menu for every type of textsuch as Headings or Base Font, etc. -- and select the appropriate font. Each time you switch fonts, the display of your website will change to let you see how the site will appear like prior to installing the font.
Within the Customizer, you can also adjust options to alter font styles (bold or italicized.) and size.
2. Use a plugin
If your theme does not include fonts, or does not offer the fonts that you would like to utilize, then the most efficient option is using the plugin. There are a variety of options available, but if you want to use an Google font, then the WP Google Fonts is an excellent choice. It provides access to the entire Google Fonts library, then allows you to apply individual fonts to different areas of your site, like headings, paragraphs, as well as lists.
If you want to use an original font that you have found elsewhere, consider using to use the custom fonts plugin. You can create your own fonts and even integrates with popular themes and page builders to provide simple setup.
3. Make use of a customized code
If you're familiar with code there are two more options:
- You can host fonts on your personal website, and utilize code to apply them to areas of text
- Download the fonts using a third-party sources (like Google Fonts) and add them to the queue.
To find out more information and guidelines For more details and directions, refer to this article by Kinsta.
Get creative, but remember that the simple way is always best.
Have fun with your fonts! Be creative with your branding and select fonts that convey the spirit of your company. But, at the same keep in mind that simplicity is often the preferred method. Select fonts that are simple to read and don't get too complicated by using several alternatives. Your audience should be your top priority.