The best fonts for your eCommerce Website
Your online store is comprised of many different parts, from your color scheme and your brand logo, through the languages you use and the quality of customer support. That includes, of course, your fonts. Fonts comprise a large portion of this.
The fonts you employ on your website can contribute to establishing the feel of your company that is professional, playful, serious, fun, for instance. They also play a really vital role in delivering an excellent experience for the visitors to your site, even those with vision impairments.
However, how do you choose the best fonts to use effectively?
An introduction to typefaces , and fonts
Pause to pause for a second. You are probably acquainted with fonts like Times New Roman, Helvetica as well as the widely-discredited Comic Sans. What are they specifically?
The definition of a font is the digital representation of text which includes various styles. In this case, 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 contains more letters)
- Helvetica Rounded (a version with round letters)
The font is very specific and has precise weights and designs. Therefore, Helvetica Bold is a font. Helvetica is an typeface. In this blog we'll refer to the words "typeface" as well as "font" in conjunction.
There are four main styles of fonts that you may choose from and you may combine and mix them to give a professional appearance for your website.
Serif fonts include additional strokes on certain letters while Serif fonts do not. Serif fonts don't have these strokes. Here's an example letters with and without serifs here:
The majority of serif fonts have a more classical look and offer a fantastic approach to show knowledge and trustworthiness. They can also be simpler to read because the serifs help define every letter in a distinct way. Sans serif fonts appear clean and feel easier to read than fonts with other styles. It's still easy and simple to read, even when you're reading huge volumes of text.
Handwritten and script fontsclosely look like handwriting and are often extremely intricate. They're easier to read than other fonts, and they vary widely in their style. Here are some examples
You can clearly see that one is very elegant but the other one appears to be a lot more friendly.
Fonts for displayare extremely diverse and include everything that is as decorative. They can vary in style and feel, but most commonly, they're employed to design titles. Here are three different displays fonts.
They don't appear very like each other Do they? It's still a wonderful way to make a brand's image.
How do you choose and use the correct Fonts
Now that having established the fundamentals and basic of fonts, let's take a look at some helpful tips for selecting the right fonts for your online store.
1. Consider legibility
The entire purpose behind the text is to be understood so reading ability is the main element when selecting the appropriate font. It is not a good sign if the readers are unable to read your content and grasp your products or services, they won't learn more about your company or even make a purchase decision!
Your body text should always have an Serif, and also sans serif font because they make it easy for people to understand large blocks or paragraphs of text. Make sure to use display and script fonts only for headings. And at all times, make sure they're simple to comprehend.
The other thing you must be thinking about is spacing between your text. There are three major factors to think of:
- Kerning is the amount in space that separates two letters. Correct kerning will ensure that every word is individually legible and doesn't end up looking like two.
- leading: The distance that separates two text paragraphs. Proper leading makes texts more easily read.
- Tracking Controls the spacing between letters within words in general and not only specific characters. So, instead of just changing the spacing between "t" in the phrase "this" as well as "h" in the expression "this" it is better to change the spacing between the four letters simultaneously.
Here's an illustration of each of these:
The ideal spacing between letters and lines can make it simpler for readers to comprehend, particularly in the format of paragraphs. However, knowing the basics about it will be fun! There are fantastic games online which allow hands-on training.
2. Consider your brand's image
The identity of your brand will define how you stand out from other companies. It's what defines the identity of your company. Your fonts can be a key element that reveals the image of your company for customers both new and old.
What sort of emotion do you hope to create the visitors to your site? Do you want to make your website fun and funny? Professional and trustworthy? Modern and elegant? This article will look at ways websites use fonts to convey their personality.
Scratch Pet Food has a branding that is super-friendly and their fonts display the same. They use an extra robust sans serif for headlines and use a lighter sans serif font on body text.
FLWR FLWR HTML0 is the name of a design studio for floral arrangements and since they create designs weddings, as well as other celebrations and events, it is appropriate for their fonts be elegant and beautiful. They use fonts that incorporate modern serifs and slim sans serif to create unique designs that match the bouquets they design.
Ryanair's corporate site is well, corporate -- and their fonts are a reflection of this. They chose different variations of the simple professional font to use for the headlines and body text. The font is professional and doesn't seem suffocating.
Do you see how these firms use fonts in order to express what image they would like the customers to think of as their brand? It's the same thing. Don't be afraid to try various fonts until you discover that perfect look.
3. You can only use a small amount of fonts
It's tempting to use every font you can think of for your site, however it's best to restrict your options to a select few. In the event that you don't, your site appears disjointed and scattered across the web, and could create a jarring experience to your visitors.
If you are choosing fonts, try pairing them with various scenarios to see whether they are compatible. One type of font might be suitable for headings, and another for body text. It is also possible to use different versions of a font -- for example, bold or all caps- to set text apart but still staying within the identical font family.
Daelmans's Stroopwafels is an illustration. The same font is used to write headlines as well in body content. They use a bold, all-caps font to write headlines, and a lighter version that is utilized for body material. In order to provide the website with an additional depth, they often employ a script font which has a similar look to caramel that they use in their offerings. The script, when utilized in a limited amount, can be effective in making important subjects stand out and making the site feel authentic and distinct.
Scrollino The shop that sells kids' items, has a lovely informal serif typeface for the headers. The font is paired with a clean, simple sans serif body text. It creates a beautiful and cheerful vibe.
4. Choose the right size of font.
It is vital that the font size is large enough that site users can see it clearly, especially people with disabilities in their vision. It is recommended that you employ 16px for the minimal size you need to employ, however, that could vary based on the font. Certain fonts can be difficult to read when they are smaller.
If possible, have someone who is a real person to read the text and see the ease with which they comprehend. It is important to be able to read your text across every kind, including computer tablets, laptops and even mobile phones. Tools like Screenfly can make this job a lot simpler.
Heggerty, the company that provides courses as well as various teaching resources, uses pleasantly huge sizes of fonts. Although they're not huge enough that they take over the design of the site, they are simple and straightforward to read across all devices.
5. Be aware of accessibility
One of the first things to think about is to ensure that your text is sufficiently large for readers and not complex, which is what we've discussed earlier. However, you should also think about contrast in color. It is essential to ensure that the content you type on is easy to read no matter what background you choose, regardless of whether that's an image, solid color, or image.
The proportion of contrast could differ from 1:1 (white on white) all the way to 21:1 (black on white). The the contrast ratio you're seeking in text is 7:1 when it comes to body text, and 4.5:1 for 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 backgrounds that are dark. Their homepage employ either bright or white red text that stands out from the darkened background.
6. Use caps only when writing paragraphs.
All caps are great for making a statement however, they may be difficult to comprehend when they're in the form of huge text. Our brains have trouble reading text that is capitalized in the form of paragraphs, which can cause reading to be slower and more difficult.
Therefore, if you wish to make use of the entire alphabet, be sure that you use them sparingly and just in headlines. This is how Veer is doing -- any capital letter can be extremely effective at highlighting points in attracting attention to their website, however they don't make use of the letters in paragraphs.
What are the web-safe fonts?
The way fonts are rendered as well as loaded into browsers is differently across different browsers. Web safe fonts are fonts which are stunning and work flawlessly across any browser or device. Although you don't necessarily wish to stay away from the stunning personal fonts you select to portray your brand, you must add secure web options to your font collection -- the collection of fonts used on your site.
This basically creates an alternative font on your website, and provides total control of what text is displayed when, for any reason, your font isn't able to display for the user. As an example it is possible to tell web that browsers to display Playfair for your font if your own isn't available, Georgia if Playfair isn't an option. You can also choose an alternative serif font when both of these don't are accessible.
Kinsta gives helpful tips to add secure fonts to backup your site.
What fonts can you use for your website
What is the most effective way to discover great fonts to use in your online shop? The first step is ensure that you're in possession of the legal rights to make use of the choices you make. Some fonts are gratis, while some are premium that can be used for all uses while others are free solely for personal use.for private use. Be sure to know what licenses are available for your chosen fonts.
Below are some excellent websites for fonts:
- Google Fonts: Google Fonts has a huge library of fonts available for free to use for commercial and personal purposes. They also provide tools that allow you that allow you to observe how fonts perform.
- Theme A lot of WordPress themes are equipped with font libraries. These usually come from sources such as Google fonts. They can be utilized on your website.
- Creative Market A marketplace online for digital assets Creative Market offers some really amazing, distinct fonts that come in many styles.
- Font Squirrel The resource categorizes fonts according to category and lets you see their designs. But, you should be aware that some fonts are intended for the user, so make sure you are aware of the font you're downloading.
- Adobe Fonts They are premium fonts that are available to companies who possess Creative Cloud licensing.
Change the font on your site
When you've picked your fonts, it's time to upload them onto your site. There are three ways to accomplish this:
1. Use your personal theme
As we mentioned earlier, many themes have a library of fonts. Some allow you to apply the fonts you want to use on your website within the settings panel. Or, you can set up those fonts using the WordPress Customizer.
- Within your WordPress Dashboard Click the Appearance tab and then Customize.
- Choose the option for Fontsoption.
- Click the dropdown menu for the different kinds of texts- Headings or Base Font and others. Choose a font. Each time you switch fonts, the appearance of your site will get updated and you will be able to see what it's going to look like prior to applying it.
Within the Customizer, you are able to change the settings in order to change font styles (bold or italicized.) and size.
2. Use a plugin
If your theme doesn't have fonts in it or include the fonts you'd like to utilize, the optimal option is using the plugin. There's an array of options to choose from, however, should you choose to utilize an Google Font, WordPress Google Fonts is the most appropriate choice. It lets you use all of the Google Fonts library, then it allows you to add specific fonts to different areas of your website, including headings, paragraphs, and lists.
If you're looking to make a custom font from elsewhere it is possible to try the custom fonts plugin. It allows you to create custom fonts, and integrates with popular themes and page builders for an simpler installation.
3. Utilize a custom-code
If you're confident with programming there are two options:
- Create fonts for your own website and then use the appropriate codes to attach them to particular parts of the text
- Install the fonts downloaded from third-party sources (like Google Fonts) and enqueue them
For further details and directions, read this article from Kinsta..
Be creative but keep in mind that simplicity is always the most effective
Make sure you have the time of your life with your fonts! Create your own unique branding and choose options that best represent the values of your company. However, at the same keep in mind that simplicity is often the most effective way to go. Choose fonts that are easy to read and don't get overwhelmed by using several alternatives. The people you are targeting must be the primary focus.
Article was posted on here