5 Things to Consider When Picking A Typeface and Font: ECommerce

The first thing to make clear in this article is the difference between a typeface and a font. Knowing the difference is essential to understanding this article, unfortunately the two terms are used interchangeably—this is incorrect!

A typeface is a collective name for a family of related fonts, while, a font refers to one form of that typeface that has a certain, weight, style and boldness. If Helvetica is the typeface you’ve chosen, then there are many different font versions to consider within it, such as Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Bold Italic and so on and so on.

Different typefaces are more flexible and have more fonts than others. Flexibility is good, the typeface you choose will be how customers will recognize your brand. Here we are discussing what to consider when choosing typefaces or fonts for your website, but in the future you might want to use that typeface on a physical advertisement such as a billboard. For that billboard, different fonts from the one you want to use on your website might suit best. The point is, it’s better to have more fonts to play with, than less.

Here are a few tips to help you choose the right font for your eCommerce website.

1.    Limit the Fonts you Implement to Two… Sometimes Three

One font can work, two is sufficient, three only if appropriate. Usually, you’ll have one font for your headings and one for your body copy. Changing or adding a font is easy to do and can feel like a small change, but it carries huge weight and can completely unbalance your website.

Too many fonts will come across as chaotic, overwhelming the user and cause them to bounce. Consistency is important and becomes harder to achieve with each new typeface you have. You want your customers to recognize your typeface and know it’s your website; if they don’t recognize your brand when they see your typeface, they are more likely to seek one of your competitors.

Using one font has its limitations. If all of your content is the same, you may fail to emphasize parts of your site. There’s no difference between your content and call-to-action button if the fonts are the same. Of course, there are design elements that can help emphasize things, but a second font can help with click-throughs.

Limiting the number of fonts you have is cost-effective. If designers only have one or two fonts to deal with, the hours they need to spend on building your site is lessened. Requesting three or four fonts increases the likelihood of your site being unbalanced and you needing to ask for more changes.

If you’re going with two or three fonts, it’s recommended you use different weights to create contrast. There are approximately nine different weights, not every typeface will support all of them. For a very simple example of contrasting weight: Look at this! Not at this. Different fonts within a typeface will usually go together.

2.    Create Contrast and Compatibility: Typefaces

Similar to using one font, using one typeface for everything limits your potential for contrast and information hierarchy. If you’re using two Helvetica fonts that are similar, the difference may not be strong enough for your customers to realise that this piece of content has a different importance and purpose.

There are plenty of sources that have identified typefaces that go together. It’s about choosing typefaces that are clearly different but still establish balance.

Some suggested typeface pairs are:

  1. Helvetica Neue and Garamond
  2. Super Grotesk and Minion Pro
  3. Montserrat and Courier New
  4. Playfair Display and Source Sans

3.    Understanding Body Copy and Headings

Body copy and headings serve different purposes and different typefaces and fonts will meet these purposes better.

Body copy is paragraph content that tends to come in bigger blocks; with more content you need to ensure your font is legible at smaller sizes. Therefore, it would be unwise to choose a stylish typeface for your body copy, as it will affect readability.  Before choosing any typeface or font you need to consider the following:

  • Will customers with impaired vision be able to read this?
  • Will customers with old monitors be able to read this?
  • Will this font become smaller if viewed on a mobile or other device, if so will it still be legible? Your web design needs to be mobile responsive!

When choosing a typeface for a heading, you’re more likely to choose a display typeface. Display typefaces are intended to be used in large sizes, in other words they’re designed for headings. Display typefaces will also be more eccentric to better grab customer attention. This is great for drawing customer attention to certain parts of a webpage, but for the same reason display typefaces need to be used sparingly.

Overuse of a display typeface leaves a customer not knowing where to look. The point of a display typeface is to grab customer attention, not to distract them from your content. If a customer never reads any of your body copy, then they probably won’t take any value from viewing your website and therefore won’t convert.

4.    Don’t Give Faux Bold or Italics a Chance

Your internet browser is responsible for making your fonts look good, and different browsers render fonts differently. Faux versions of a typeface occur when you’ve styled a font as bold or italic, yet that typeface family doesn’t actually include that bold or italic font you’ve implemented. This means that browsers cannot find data for the font you’ve chosen and compensate by creating their own variation of that font, resulting in faux bold or faux italic.

Faux fonts look terrible! What you thought was a smooth font, will look either smeared or have sharp edges. Different browsers make faux font worse, Firefox and Edge will smear your font quite a lot, Google Chrome isn’t as bad, but the quality is still nowhere near the original font. New alternative web browsers are making ‘Reader Mode’ more common, making legible font even more important.

The most obvious solution here is to not pick fonts that don’t exist within a typeface. But, you’ve probably gone for that font because it’s unique and conveys the personality of your website.

Some solutions to faux font is to write your own CSS font families to bypass built-in browser styles. Some of these solutions aren’t foolproof and in the event where your font doesn’t load, the browser will compensate by creating a font that looks worse and is neither bold or italic.

Here is the correct way to overwrite browsers and avoid faux fonts. Essentially, you use the same font-family name and define all matching fonts. Defining all matching fonts will mean that if there is some loading issue, the browser still has fallback fonts to display.

Here is the correct CSS to write, using Helvetica as an example:

[css]@font-face {

font-family: ‘Helvetica’;

src: url(‘Helvetica-R-webfont.eot’);

font-weight: normal;

font-style: normal;


@font-face {

font-family: ‘Helvetica’;

src: url(‘Helvetica-I-webfont.eot’);

font-weight: normal;

font-style: italic;


@font-face {

font-family: ‘Helvetica’;

src: url(‘Helvetica-B-webfont.eot’);

font-weight: bold;

font-style: normal;


@font-face {

font-family: ‘Helvetica’;

src: url(‘Helvetica-BI-webfont.eot’);

font-weight: bold;

font-style: italic;


.test {

font-family: Helvetica, arial, sans-serif;


Knowing the above solution is very important when using a custom font. A custom typeface is a great way to stand out amongst your competitors. Business owners will usually have an idea of the feel they want their text to convey and some fonts they like the look of, yet they can’t imagine an original typeface of their own. Along with aesthetics and persona, custom typefaces can also save businesses money in the long run, because there are less issues with licensing.

To get affordable custom typefaces or fonts, many business owners will outsource web design. Outsourcing web design is often more cost-effective than the time you’d end up investing finding web design solutions yourself—you just need to ensure you hire the right web designers. If wanting custom typography or any custom quality web design services, the team at CodeClouds has many custom web design specialists that constantly tackle design projects on an international scale.

5.    Be Careful With Color

Screens can cause your eyes to strain. The colors you choose should compliment each other rather than clash. Obviously, don’t color your font the same as your background. If your background is dark blue, then it makes more sense to make your text white. If your background is white, your body copy would be most readable displayed in black. Play it safe with color.

Finally, once you’ve found the right typefaces and fonts that suit your website, stick to them! If they comply with the rest of your web design, are readable and functional; they’ll provide a positive user experience and become central to the identity of your brand.

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter Captcha Here : *

Reload Image