The Best fonts for your eCommerce website
The image of your online store is made up of a lot of different parts, from your color scheme and logo to the language you choose to use as well as the level of your customer care. Also the fonts play a large component of this.
The fonts you employ for your site will go a long ways to establishing the feel of your business -- professional, quirky or serious, charming, etc. They also play a really vital role in providing an excellent experience for your visitors, including those with visual impairments.
But how do you choose the correct fonts, and then use them in the best manner?
A primer on typefaces, and fonts
Let's take a step back for a moment. Most of you are familiar with fonts such as Times New Roman, Helvetica as well as the much-banned Comic Sans. But what are they, specifically?
The definition of a typeface is a digital representation of text which includes many different styles. Like, 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 more bold version)
- Helvetica Condensed (a version that has letters that are closer together)
- Helvetica Rounded (a version with the letters rounded)
A font is extremely specific, with exact weights and styles. Thus, Helvetica Bold is a font, while Helvetica is the name of a typeface. For the purpose of this article, we'll be using the phrases "typeface" and "font" in conjunction.
There are four primary styles of fonts that you can choose from, and you may combine and mix to get the right feel for your site.
Serif fonts contain extra strokes that are that are added to specific letters, however, the Sans Serif fonts do not include those strokes. You can see an example of letters that have and do not have serifs below:
The majority of serif fonts are more traditional and are great for displaying confidence and knowledge. Also, they are simpler to read because the serifs help define every letter in a distinct way. Sans serif fonts are clean and can feel more easy to read than other fonts. They're also simple and easy to comprehend in big bodies of text.
Script and handwritten fontsclosely resemble handwriting, they can be very elaborate. They are a lot easier to read than others as well as they differ in their style. Here are some examples:
It is evident that the one looks very classy and the other a lot more friendly.
Fonts for displayare incredibly diverse, and include anything that could be termed decorative. They can vary in style and feel, however they usually, they're used only to create titles. Three types of fonts for display:
These three don't look very alike Do they? However, they're an excellent method to create a brand's feel.
How to choose and implement the right fonts
Now after we've established some of the basic we can look over a couple of helpful tips to choose the right web-based store font.
1. Consider legibility
The whole point of text is that it should be understood, so readability is the most important aspect when picking a font. If readers aren't able to read your message, they can't learn about your products or find out about your business and even be able to buy anything!
The body text you write should nearly always use Serif, or sans serif font since they make it easy for visitors to read long paragraphs or blocks of text. Save display and script fonts for headings. And, at all times, ensure they are easily read.
The next thing to think about is spacing between your text. There are three major spacing considerations:
- Kerning is the amount of space between two characters. A proper kerning process ensures that every word can be read independently and that one word doesn't appear to be two words.
- Leading The distance between two lines of text. Correct leading can make paragraphs of text easier to read.
- Tracking Controls the spacing between letters in words as a whole instead of the individual letters. Therefore, instead of altering the space between "t" in the word "this" and "h" for the word "this" then you'd have to alter the spacing between all four letters in one go.
This is a visual representation of the three
Ideally, the spacing between the letters and lines makes it easier for readers to comprehend, especially in paragraph form. Do not worry, knowing more about this will be fun! There are a number of great online games which give you the opportunity to practice in a hands-on manner.
2. Think about brand identity
Your brand's identity is what sets you apart. It's what defines the character of your company. And the fonts you choose represent your personality to prospective customers and customers who are already there.
What emotion do you want to invoke through your website? Fun and quirky? Reliable and professional? Sophisticated and elegant? Let's glance at how some websites make use of fonts in order to express their identity.
Scratch Pet Food has a brand that's super friendly and their fonts show that. They use an extra strong sans serif on headlines and a lighter sans serif body font.
FLWR is an interior design company as well as a design studio. Since they make designs for weddings and other special occasions and other special occasions, it is natural to have their fonts stylish and elegant. The fonts they use combine modern serif with a thin sans serif font to create a distinctive style that is matched by the bouquets they design.
Ryanair's corporate site is well, corporate -- and the fonts that they choose show that. They picked versions of the same simple professional font to use for headlines and body text. The font is professional and doesn't seem suffocating.
Are you aware of the way these three businesses use fonts to convey the image they want their customers to have when they hear their name? You can do the same thing. Don't be afraid to try different types of fonts too, until you've come up with the ideal style.
3. Stick to just a couple of the fonts
It's tempting to include all of the great fonts you find on your website however, it is best to limit your choices to only a handful of. In the event that you don't, your site will appear disjointed and scattered all over the place which could create a jarring experience for customers.
If you are choosing fonts, try pairing them with different scenarios to see whether they are compatible. One font could be used for headings, and another to be used for body texts. There are also variations of fonts -- for example, the bold type or all caps -to differentiate text without straying from the similar font family.
Daelmans's Stroopwafels For instance, HTML0 uses the same fonts for headlines as well as body text. The font is bold and all-caps style for their headings and a lighter one to use for body texts. However, in order to give the site some personality, they often use a script font that matches the caramel that is used in their products. The script, when utilized sparingly, is effective at accentuating important themes and making their site feel authentic and unique.
Scrollino is a store selling kids' products utilizes a highly friendly and casual serif font for their headings. They pair that with a clean, simple sans serif for body text to create a clear and fun feel.
4. Make sure you choose the appropriate font size
It's crucial that your font is big enough for site visitors to read even those who have visual impairments. It is generally recommended to use 16px for the minimum size you should utilize, but that may depend on the font. For example, some fonts 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. Make sure to read your text across every kind, including desktops, tablets and even mobile phones. Tools such as Screenfly assist in this task a lot easier.
Heggerty, the company that offers curriculum as well as other educational resources utilizes pleasantly large font sizes. Though they'ren't so large that they take over style, they're also simple and simple to read on any device.
5. Take into account accessibility
One of those things is ensuring that your text is sufficiently large to read and not too complex, which is what we've discussed earlier. You should also think about contrast in colors. You need to make sure that the text you write on is simple to read no matter what background it's on, whether that's a solid color, design, or even an image.
The contrast ratio can range from 1:1 (white on white) up to 21:1 (black on white). It is recommended that the contrast ratio you're seeking 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 analyze your site for contrast ratios in color, and other factors that affect accessibility.
Track 7 Brewing performs a fantastic job of contrast in color when viewed against dark backgrounds. Their homepage use either white or bright red text to ensure that it stands out from the darkened image behind it.
6. Do not use caps when writing paragraphs.
Although all caps can be effective in making an impression however, they are difficult to read when they are in the form of large text. Our brains have difficulty processing capitalized text in paragraph format, which can make reading slower and more difficult.
So, if you do need to use all caps, make sure to use them sparingly, and only for headlines. It's exactly what Veer is doing and all capital letters make great the point and drawing attention to their site, but they do not use them in paragraphs.
What is the best web safe fonts?
The way fonts are rendered and loaded by browsers is differently on different websites. Safe fonts for web are those that are beautiful and function perfectly on all browsers and all devices. And while you don't necessarily want to avoid the amazing customized fonts that you choose to represent your company, you do want to add web safe options to your font stack which is the selection of fonts that you will use on your website.
It basically sets up a backup font for your site and grants you complete control over the way text displays if, due to some reason your font isn't able to load for a visitor. You can, for instance, instruct browsers to choose Playfair if your custom font isn't available, Georgia if Playfair isn't an option, or a default serif font if both of these don't work.
Kinsta provides great advice to add secure fonts for backup on your website.
Where to find fonts to use on your site
How do you locate top fonts to use in your online store? First, ensure that you've got the legal right to use whatever options you decide to use. Some are available for free to use in all circumstances, others are premium for all purposes while others are available for free for personal use only.for personal usage. Make sure you know the licensing process on your fonts.
Below are some excellent resources for website fonts:
- Google Fonts: Google Fonts has an extensive collection of fonts that are available for free both for commercial and personal use. They also have software to view Fonts as they work.
- Your website's theme WordPress theme: A lot of WordPress themes have collections of fonts, often from sources like Google fonts that you can use to build your website.
- Creative Market A marketplace online for digital assets Creative Market offers some really stunning, distinctive fonts that come in many styles.
- Font Squirrel The resource categorizes fonts according to category and allows you to preview their styles. Be careful though -- there are some fonts that are intended to be used for personal purposes which is why you must understand the font you're downloading.
- Adobe Fonts High-quality typefaces available to businesses that possess Creative Cloud licenses.
What can you do to alter the font on your site
After you've chosen your fonts, it's time to apply them to your site. There are three primary options to apply them:
1. Use your theme
As we mentioned, a lot of themes come with a collection of fonts. Many themes let you apply the fonts you want to use on your website within their settings panel. You can also set up those fonts using the WordPress Customizer:
- Within your WordPress dashboard, navigate to Appearance > Customize.
- Select the option for Fonts.option.
- Open the dropdown for each type of text -- Headings, Base Font and so on. -- and select the font you want to use. Every time you change fonts, the view of your site will update to let you see how it will look like before applying the font.
The Customizer can also adjust options for font style (bold italicized, bold, etc.) and font size.
2. Use a plugin
If your theme does not include fonts, or doesn't offer the fonts you want to work with, the most efficient option is using a plugin. There's a myriad of options , but when you're looking to make use of a Google font, WP Google Fonts is the best choice. It provides access to all of the Google Fonts library, then permits you to add individual fonts to different areas on your website, including headers, paragraphs, and lists.
If you want to use a custom font from elsewhere, check out this custom fonts plugin. It lets you upload your own fonts and integrates with well-known themes and page builders for simple installation.
3. Utilize a custom-code
If you're comfortable with programming There are two additional options:
- You can host fonts on your personal website, and utilize code to make them apply to specific areas of text
- Download the fonts using an external provider (like Google Fonts) and enqueue them
For further details and directions For more details and directions, refer to this post from Kinsta.
Be creative but keep in mind that the simple way is always best.
Have fun with your fonts! Make your brand unique and select fonts that convey the spirit of your company. But, at the same at the same time, keep in mind that simple is often the most effective way to go. Pick fonts that are easy to read and don't get too complicated by using several alternatives. Your customers should be the primary concern.