How to Choose the Right Fonts for your eCommerce Website
The image of your online store is composed from a myriad of components including the color scheme and the logo, as well as the type of language you choose to use, as well as the level of your customer service. Of course the fonts you use are an important part of that.
The fonts you select for your website can contribute a lot to making the impression you want for your company's image that is more professional, fun and serious, for example. They play an crucial role in providing an excellent experience for your customers, even people with visual impairments.
How do you choose the right fonts and make use of them in the most efficient way you can?
A quick description of fonts and typefaces.
We'll take a look back for a moment. It's likely that you've heard of typefaces like Times New Roman, Helvetica, and the much-maligned Comic Sans. What exactly are they?
The term font is the electronic format for representing text, which includes several different styles. Similar to, 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 additional letters)
- Helvetica Rounded (a version with rounded letters)
The font is extremely specific that has precise types and weights. So, Helvetica Bold is a font, while Helvetica is a typeface. To make this post more readable, we'll use the words "typeface" as well as "font" together.
There are four major styles of fonts you can choose from, and you can mix and match to create the perfect look and feel for your website.
Serif fonts have extra strokes added to some letters, however the Sans Serif fonts omit these strokes. Here is an example of letters with and without serifs in this post:
Serif fonts generally tend to be more classic and can be a great choice to convey confidence and expertise. They can also be more readable, as the serifs represent each letter in a distinctive manner. The fonts that are serif-style in Sans Serif are easy to read and can feel less intimidating than other types. It's easy to read in large bodies of text.
Handwritten and script fontsclosely mimic handwriting, they can be very elaborate. They are a lot better read than other fonts in addition to being distinct in design. Below are some examples:
The initial one looks beautiful, and the other is more welcoming.
Fonts for displayare very diverse, they include everything that can be classified as decorative. They differ in appearance and feel. However, generally, they're used only to make titles. Below are three examples display fonts.
The three of them don't seem to be very alike. Doesn't they? They're nevertheless a fantastic method to make a brand's image.
What fonts do you use? How can you select and use the correct Fonts
Now after we've established some fundamentals, let's look at two helpful guidelines to select the best fonts that you can use in your online store.
1. Consider legibility
The whole point of writing is to be readtherefore, legibility should be the main consideration when selecting a font. If visitors cannot read the text you have chosen, they can't learn about the services you offer or learn more about your business and even be able to decide to purchase!
The body text you type must almost always be written in Sans serif or serif fonts since they make it easy for readers to read large paragraphs or blocks of text. Use script and display fonts for headings and, at all times, make sure the fonts are easily understood.
The second thing you should think about is the spacing between your texts. There are three main aspects to take into consideration when spacing your text:
- Kerning The amount of space between the two letters. Correct kerning will ensure that every word can be read independently and ensures that no word can end up appearing as if it were two.
- Leaping The distance between the two text paragraphs. A properly led paragraph makes text more readable.
- Tracking controls the spacing of letters in the words in a complete form instead of individual letters. Instead of changing the spacing between "t" in the word "this" as well as "h" within the sentence "this" the next step is to alter the spacing between each of four letters simultaneously.
Here's an example from the three
Ideally, the spacing between the letters and lines makes it simpler for people to understand particularly in paragraph format. But don't fret; learning more about this can be enjoyable! There are plenty of great online games that give you hands-on practice.
2. Consider your brand's image
Your brand's identity will determine what differentiates you from others. Your personality is what defines your company. And the fonts you choose are a crucial factor that shows the persona of your company to potential and existing customers.
So what feeling do you wish to convey for your visitors on your site? Inspiring, funny and inspiring? Professional and dependable? Modern and stylish? Let's look at some websites that use fonts to express their style.
Scratch Pet Food has a brand that is extremely friendly and their fonts show this. The fonts are aggressive sans serif typeface to draw attention to headlines and a lighter Sans serif typeface for body.
FLWR is an interior design business and because they create designs for events like weddings, it is logical for their fonts to be stylish and elegant. They use fonts that combine modern serif and a thin sans serif font for an elegant look that is matched with their bouquets.
Ryanair's corporate website is formal -- and the fonts they use reflect this. They picked variants that use the same, professional font for both headlines and body text. It's professional without seeming stuffy.
Are you aware of the way all three of these businesses employ fonts to communicate the message they wish customers to have when they hear their name? It's the same thing. You should be prepared to experiment with different fonts, either, until you've found the ideal appearance.
3. Stick to just a couple of font types.
It's tempting to incorporate all the wonderful fonts available on your site, but you should limit yourself to only a couple. In the event that you do not, your website appears cluttered and scattered or create a jarring impression for your visitors.
In selecting your fonts, pair them in various scenarios to find out if they perform effectively. There is the option of choosing the one you want to use as headings and one for body text. You can also choose different fonts -like bold type, or all capsto differentiate text apart while staying in the identical font family.
Daelmans's Stroopwafels As an example, HTML0 uses the same font for headlines and body text. It uses a bold all-caps font to write headlines along with a light version to write body text. In order to give their website more personality, they occasionally utilize a script font that looks like the caramel that they employ in their products. If used in moderation, it can be effective in highlighting significant themes, and makes their website feel authentic and distinct.
Scrollino, a online store selling children's items, uses a super-friendly and fun serif font on the headers. The font is paired with a simple, clean sans serif body text for a readable and enjoyable feel.
4. You must select the correct font size
It is essential that the text is large enough to allow site visitors to read even those that have visual impairments. In general, 16px is the minimal size which you should employ, however, that could vary based on the type of font. For example, some fonts are more difficult to read when they're smaller.
If possible, ask for someone who is actually living to read your text and see how easy it is to read. Also, make sure you review the text on every device -- tablets, computers and even mobile phones. Applications like Screenfly assist in making the procedure much simpler.
Heggerty the organization which offers curriculum as well as other teaching resources, uses large fonts that are pleasingly big. Though they'ren't huge enough that they dominate style, they're also simple and easy to read on any device.
5. Think about accessibility
The other thing to consider is to make sure the text size is sufficient for you to be able to read it and is not overly complex, as we've discussed before. But you also want to consider contrast between the 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 color or solid pattern, or perhaps an image.
The ratio of contrast could differ from 1:1 (white on white) to 21:1 (black on white). A good ratio of contrast you're seeking with text is around 7:1 in body text, and 4.5:1 in headlines. It is possible to use the WAVE accessibility program to check your website to determine contrast ratios for colors, and other factors that affect accessibility.
Track 7 Brewing performs a fantastic job of contrasting colors with dark backgrounds. Their homepage employ either bright or white red fonts to make sure that the text stands out against the background that is dark.
6. Take note of the caps in paragraphs.
Although all caps can be excellent for making an impact but they can also be difficult to read through in long paragraphs. The brain is unable to make sense of texts that are that is capitalized when it's in paragraph format, which causes reading to be harder and slower.
So, if you do want to use all caps, be sure to use it sparingly and only for headlines. This is the method Veer uses to use all capital letters. help in drawing attention to their website, however they avoid it when writing paragraphs.
What are the most reliable web-safe fonts?
The way fonts are rendered as well as loaded on browsers is distinct across different websites. The safest fonts for the web are those that look great and load properly on every device and browser. Although you don't have to choose the stunning customized fonts that you choose for your brand but you should incorporate web safe alternatives in your font library which is the selection of fonts you'll employ on your website.
This basically creates an alternate font that is compatible with your site. It gives you complete control over what your content will look like if in some way the font you've created will not load on a user's computer. In this case, for instance it is possible to tell web your browsers to load Playfair in the event that your font isn't in stock, Georgia if Playfair isn't an option, and a standard serif font in the case that none of these are in stock.
Kinsta gives excellent suggestions to include secure fonts for backup on your site.
What fonts do you have that you can use for your web site
What is the most effective way to locate the top fonts you can incorporate into your online store? The first thing to do is to ensure you have the right legal permission to use the fonts you decide to use. There are fonts that are available for free in all cases. Some fonts are paid for to be used for any purpose, while some are totally free and are onlyfor personal use. Be sure to know the terms of the license that apply to your fonts.
Below are some great sources for web fonts:
- Google Fonts: Google Fonts has an enormous selection of fonts that are free for personal and commercial use. The site also provides software that allows you to view the fonts you want to use in your.
- The theme you choose The majority of WordPress themes include font libraries that are typically sourced from different sources, like Google fonts, that you are able to use for building your site.
- Creative Market A web-based marketplace to sell digital items Creative Market offers some really stunning, unique fonts which are available in a range of styles.
- Font Squirrel This site categorizes fonts according to category and permits you to browse them. But, you should be aware that some fonts designed for personal use which is the reason you should be cognizant of the type of font that you download.
- Adobe Fonts These are typefaces that are of premium quality for businesses who have Creative Cloud licences.
Change the font that appears on your website?
When you've picked your fonts, you're now ready to add them to your site. There are three primary methods to accomplish this:
1. Utilize your theme
As mentioned earlier many themes come with a collection of fonts. Many themes let you apply the fonts that you would like to be able to apply on your site through their individual settings panel. You can also set up those fonts using the WordPress Customizer:
- In your WordPress Dashboard, click Appearance > Customize.
- Click on the option for Fonts.option.
- Choose the dropdown menu that lists the various types of textsuch as Headings or Base Font etc. Choose the appropriate font. When you change fonts, the look of your website will change so you can test what it will look like prior to using the font.
The Customizer lets you alter preferences for font styles (bold or italicized.) and font size.
2. Use a plugin
If your theme does not have fonts, or fonts you'd like to use, then the easiest option is to install a plugin. There are a variety of choices however, if you decide to go with Google Fonts, the Google font, then WordPress Google Fonts will be the best choice. It lets you use the complete Google Fonts library, then permits you to use individual fonts on various parts of your site like headings, paragraphsand lists and lists.
If you're looking to set up the font that you want to use from another source you can use using the Custom Fonts plugin. It allows you to create custom fonts that you own and then integrate with themes that are well-known and page builders , allowing an easy setup.
3. Utilize a custom-code
If you're already familiar with the language, there are two options available:
- Create a font hosting website, and utilize codes to incorporate them into areas of text
- Install the fonts downloaded from third-party sources (like Google Fonts) and enable them
For more details and guidelines for more information and directions, please read this post from Kinsta..
Think outside the box, but bear your eyes on the simple fact that simplicity is what you want.
Make sure you have fun using your fonts! Create your own unique branding and choose fonts that reflect the feel of your business. But, keep the idea in mind that simple is usually the best approach. Choose fonts that are easy to read, and don't make it overly complicated with more than four or five options. Your target audience is your primary concern.
This post was first seen on here