What is the best way to choose the right Fonts for Your eCommerce Website
Your online store is comprised of a lot of different components, from your colors and logo , to the language that you employ and the caliber of your customer service. Also, fonts are a big part of that.
The fonts that you use on your site will go a long ways to establishing the feel of your business -- professional, quirky and serious and so on. They play an important role in providing visitors with a pleasant experience. customers, even those who have vision impairments.
How do you select the right fonts and make use of them in the most efficient way possible?
A primer on typefaces, and fonts
Take a break for a minute. Most of you are familiar with fonts such as Times New Roman, Helvetica as well as the widely-discredited Comic Sans. But what do they mean, precisely?
The definition of a font is an electronic representation of text, which has various styles. For example, 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 that has the letters closer)
- Helvetica Rounded (a version with round letters)
It is a typeface is very specific, having exact weights and style. So, Helvetica Bold is a font, while Helvetica is a typeface. To make this piece we'll be using words "typeface" as well as "font" to refer to them interchangeably.
There are four primary kinds of fonts you may choose from and you may mix and match to create the right feel for your site.
Serif fonts have extra strokes added to certain letters, however, Serif fonts do not. Serif fonts don't have these strokes. Here is an example of letters that have and do not have serifs here:
The majority of serif fonts tend to be more classic and are an an excellent way to exude confidence and knowledge. It is also simpler to read because the serifs define every letter separately. Sans serif fonts are clean and appear more accessible than the other types. They're also simple and easy to read in large bodies 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 some examples
It is evident that the one looks very classy and the other a lot more friendly.
Fonts for displayare very diverse, and include anything that could be considered decorative. They can vary in style and feel, but generally, they are used for titles. Here are three different displays font examples.
The three of them don't appear very like each other are they? However, they're an excellent method to create a brand's feel.
How to choose and implement the appropriate fonts
Now after we've established some of the basic we can look over a couple of helpful tips to choose the appropriate web-based store font.
1. Consider legibility
The entire point of text is comprehended, and therefore legibility should be your number one factor when selecting the right font. In the end, if your visitors can't read your text it's impossible for them to learn about the products you offer or learn more the details about your business, much less decide to purchase!
Your body text should always be either Serif, or sans serif font as they make it easy for readers to comprehend large paragraphs or blocks of text. Use script and display fonts for headings and, at all times, ensure they are easily read.
The second thing you should consider is spacing between your text. There are three main spacing considerations:
- Kerning Amount of room between two words. A proper kerning process ensures that every word is legible in its own way and that one word doesn't end up looking like two.
- Leading The distance between two paragraphs of text. Correct leading can make paragraphs of text more readable.
- Tracking Controls the spacing between letters in words as a whole and not just individual characters. Instead of changing the spacing between "t" as well as the "h" for the word "this" it is better to adjust the spacing between the four letters at once.
This is a visual representation of the three
The ideal spacing between lines and letters makes it easier for readers to comprehend, particularly when in paragraphs. But don't fret; learning more about this can be fun! There are some excellent online games that provide the opportunity to practice in a hands-on manner.
2. Take a look at 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 represent the personality of your business to new as well as existing customers.
What kind of feeling are you hoping to instill through your website? Awe-inspiring and funny? Professional and dependable? Elegant and sophisticated? Let's take a look at the ways that a handful of sites use fonts to represent their image.
Scratch Pet Food has a branding that is super-friendly and their fonts show that. They use an extra aggressive sans serif to highlight headlines, and a light sans serif for body text.
FLWR is an interior design company and, since they design for events such as weddings It is logical to have their fonts gorgeous and stylish. The fonts they use combine modern serif with a thin sans serif for a bespoke appearance that complements the bouquets they design.
Ryanair's corporate website is, it's true, corporate and the fonts they use are a reflection of that. They've chosen versions of the same simple professional fonts for headlines as well as body text. It's professional without seeming stuffy.
Do you see the way these three companies use fonts to communicate the image they want their customers to feel when they see their logo? The same can be done for you. similar thing. Do not be scared to try different types of fonts too, until you find the perfect look.
3. Use a limited number of fonts
While it may be tempting to incorporate all the great fonts you find in your store, you'll want to stick to only a handful of. If not, your website could look disjointed and all over the place or make it difficult for visitors.
When choosing your fonts, try pairing them with different scenarios to see whether they are compatible. One font could be used for headings, and an alternative as body text. You can also use variations of a font such as bold or all capsto differentiate text without straying from the identical font family.
Daelmans ' Stroopwafels For instance, HTML0 utilizes the same font for headlines as well as body text. The font is bold and all-caps font for headlines and a lighter version that is used for body content. But, to add even more personality, they occasionally use a script font that is akin to the caramel used in their offerings. When used sparingly, is effective at highlighting important concepts and making their website feel genuine and distinctive.
Scrollino is a store selling kids' products is using a very easy and fun serif font to make their headlines. They pair that with a simple, clean sans serif body text for a readable and fun vibe.
4. Make sure you choose the appropriate font size
It's crucial that your font is big enough that visitors can read even those who have visually impaired eyes. In general, 16px is the size you need to use, though that can differ based depending on your font. For example, some fonts can be difficult to read smaller.
If you can, get someone who is a real person to review your writing and determine if it's easy to read. Also, make sure you review it on devices of every kind, including tablets, desktops and even mobile phones. Tools such as Screenfly make this process a lot simpler.
Heggerty, a company offering curriculum and other educational resources utilizes pleasantly large font sizes. While they're not so big that they completely take over style, they're also simple and easy to read on any device.
5. Take into account accessibility
Another thing you should consider is to ensure that the text is sufficiently large for readers and not complicatedas we have discussed previously. You should also think about contrast in colors. You need to make sure that your text is clear to read, no matter the background it's on, whether it's a solid or solid-colored patterns, or images.
The ratio of contrast can vary between 1:1 (white on white) up to 21:1 (black on white). The contrast ratio you're seeking when using text is 7:1 when it comes to body text, and 4.5:1 for headlines. It is possible to use the WAVE accessibility tool to analyze your site for contrast ratios in color, and other accessibility factors.
Track 7 Brewing is a master of contrast in color on dark backgrounds. Their homepage make use of either white or orange text so that it stands out from the darkened image behind it.
6. Do not use caps when writing paragraphs.
Although all caps can be excellent for creating a strong impression however, they are difficult to read within paragraphs of text. Our brains have difficulty making sense of text capitalized when it is in paragraph form. This can make reading slower and more difficult.
So, if you do want to use the entire alphabet, do the letters sparingly and in only headlines. It's exactly how Veer uses with all capital letters. can be very effective in making points and grabbing attention on their site, but they should be avoided when writing paragraphs.
What about web safe fonts?
The way fonts are rendered and loaded by browsers is differently on different websites. Safe fonts for web are those which look stunning and work properly on every browser and all devices. Although you don't want to avoid the amazing personal fonts you select for your brand however, it is important to incorporate web safe alternatives into the font library -- the assortment of fonts used on your site.
This basically creates a backup font for your site and grants you complete control over the way your text will appear if in some way, your custom font won't display for the user. You can, for instance, inform browsers to select Playfair in the event that your font isn't accessible, Georgia if Playfair isn't an option, and then a default serif font in the event that both of these don't are available.
Kinsta gives helpful tips on how to include backup web safe fonts to your website.
What fonts can you use for your website
What are the best ways to find great fonts for your online shop? The first thing to do is be sure you're in possession of the legal rights to make use of the options you decide to use. There are fonts that are completely free Some fonts are paid for that are suitable for all uses Some are available for free for personal use only.for personal usage. It is important to know what the terms of the license mean 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 tools to see Fonts as they work.
- Your website's theme: Many WordPress themes have collections of fonts, often coming from sources such as Google fonts. These fonts you can use for your site.
- Creative Market: An online marketplace to sell digital assets Creative Market offers some really beautiful, unique fonts in a variety of styles.
- Font Squirrel The resource sort fonts into categories and allows you to view the fonts. But be careful -- certain fonts are only for personal use and you should know what type you're downloading.
- Adobe Fonts: These are high-quality fonts that are available to companies who possess Creative Cloud licenses.
Change the font on your site
Once you've selected your fonts, it's time to incorporate them into your website. There are three main ways to do this:
1. Utilize your theme
As mentioned earlier many themes have a library of fonts. Some allow you to apply those fonts to your site through their individual settings panel. You can also set up those fonts using the WordPress Customizer:
- In your WordPress dashboard, go to Appearance > Customize.
- Select the Option for Fontsoption.
- Open the dropdown for each type of text -such as Headings, Base Font, etc. -- and select the appropriate font. Each time you switch fonts, the display of your site will update to let you see how the site will appear like prior to installing the font.
Within the Customizer, you can change the settings to alter font styles (bold italicized, bold, etc.) and size.
2. Use a plugin
If your theme does not include fonts or the fonts you'd like to work with, the easiest option is to use a plugin. There are a variety of choices, however when you're looking to make use of an Google font, the WP Google Fonts is a great one. It gives you access to the complete Google Fonts library, then lets you apply specific fonts on various parts of your site, like headings, paragraphs and lists.
If you're looking to install an original font that you have found elsewhere, check out to use the Custom Fonts plugin. It allows you to create your own fonts and integrates with well-known themes and page builders for an easier installation.
3. Utilize a custom-code
If you're familiar with code There are two additional alternatives:
- Host fonts on your own site and use codes to add them to specific areas of text
- Install the fonts downloaded from an outside provider (like Google Fonts) and add them to the queue.
For further details and directions for more information and instructions, read this article by Kinsta.
Get creative, but remember that the simple way is always best.
Enjoy your fonts! Create your own unique branding and choose options that best reflect the personality of your business. Yet, at the at the same time, keep in mind that simple is usually the best way to go. Select fonts that are simple to read, and don't make it overly complicated with four or five different alternatives. Your audience should be your primary concern.