The cornerstone to a successful Web-design is Typography.

Like it or not but 95% of all information on the Web is transmitted in a written language.

You may equip your online store with great design elements, mind-blowing imagery, but they will only give the visual instantiation of your brand and the merchandise you sell.

Good typography, in turn, enhances website readability, generates its visual hierarchy, influences the way customers process information and even emotionally engages them with your E-store. That’s why when it comes to creating killer product pages, the right usage of typefaces is just as important as making cool graphics or images

Becoming a true typography wizard can take years of hard practice – but for all you newbies out there – here is a cheat sheet of some of the most common typography mistakes. Avoiding them will help you make a user-friendly online store and boost the conversion rates of your product pages.


Typography Sin 1: Using Too Many Fonts on One Page

One of the biggest mistakes you can make when designing a product pages is using an excessive amount of fonts. By layering a page with dozens of varied typefaces you confuse your store visitors and make them jump off your site.

Generally, there’s no reason to use more than 1-2 fonts in any piece of Web design. Product pages are not an exception.

The same rule applies to font weights. Using a huge number of them on a product page bewilders customers and scatters the focus of their attention. Remember that the main goal of the bold text is to show which parts of the product page are more informative and valuable. So use weights in a smart way and only when it’s needed.

Below is the example of using too many different types and type weights. Looks embarrassingly confusing, doesn’t it?

Too many fonts

Typography Sin 2: Too Much Emphasis on Insignificant Product Page Elements    

When describing things they sell, E-store owners want to put maximum emphasis on every single product quality. On product pages that is usually achieved via excessive usage of italics, CAPITALS, underlined phrases, highlighted text or text in different colors.

Although these tweaks may help in drawing extra attention, they can also take away from the flow of your design. What is more, customers often associate all caps, exclamation marks, texts in bright colors with shouting, aggression or intrusive spam.

Due to this, it’s important to think about how and when you’re going to use the above mentioned options. Please make sure that you use them in moderation and only for the appropriate product page elements.

This page is a “brilliant” example of what you SHOULDN’T do on your website:

Oh, and does it make your eyes bleed?

 

Sin 2

Typography Sin 3: Wrong Color Match

To bring certain product qualities into a special focus, you may want to use different font colors for such elements as  product page titles, subtitles or just important phrases in the text.

But note that if the selected colors  are too similar to the background, it will make your text unreadable. Make sure that if the background of your product page is light, your text is dark or vice versa.

Also, certain colors may vibrate with one another causing customers’ eyes to hurt. For instance, red text on a green background, blue on red, etc. Just have a look:

Sin 3a

Sin 3

So, whenever you highlight important textual elements of your product page, make sure it’s ok for your eyes to look at them for a long time.

Typography Sin 4: Inadequate Contrast

Contrast is another important typography aspect that can affect readability of your product pages.

If your page doesn’t have proper contrast, that creates a random, scattered look to your designs. To improve it, you need to set up an ideal contrast ratio both between your fontsamong text blocks and the surrounding empty space.

This is how poorly set contrast may look like:

Sin 4

Typography Sin 5: The Absence of Typography Hierarchy

Typography hierarchy lets you properly arrange product page elements and highlight those that should stand out as the most prominent.  That can be made through assigning different font sizes, types or colors to the most significant page elements (titles, subtitles, links, etc.).

By using a hierarchy of typography, you make it easier for your readers to find exactly what they are looking for.  And if you ignore this aspect, your product page may look like a huge mess of unreadable text (see the example below):


Sin 5


Typography Sin 6: Poor Text Arrangement

Depending on how you arrange texts on your product pages, it can either helps deliver your marketing message or completely ruins the communication with your would-be customers.

These are some typical text arrangement errors that can spoil the impression of your product page:

1) Too long lines: the longer your lines are, the more unreadable the text is.
2) Too centered text: the edges of a centered message are uneven, which makes it more difficult to scan since each line has a different starting point.
3) Too long paragraphs: when describing your product in detail, avoid long paragraphs.  Try to split all info into logical chunks – that will make the process of perceiving and digesting information a lot easier.
4) Too squished text: even if you don’t have enough space for some of your text, resist the urge to squish it together. You can also solve it by selecting a condensed font, or just shrinking everything down – that will let your text “breathe”.

Typography Sin 7: Conflict of Mood between Typeface and Your Marketing Message

And the last (but not least) thing to remember is that the typography of your product page shouldn’t make a dissonance with the product itself.

Say, if you sell luxury wrist-watches, you shouldn’t use Comic Sants or Janda Silly Monkey fonts. And vice versa, if you sell toys for little kids, your product pages shouldn’t have official strict business style.

 

* * * * *

Whatever the layout of your product pages may be, you should avoid all things described above.

To inspire you, here are some examples of great product page typography:

Oak Street Bootmakers typeface is the combination of Hoefler Text and Franklin Gothic, both of which are classic typefaces. The background colors perfectly blend up with the typeface and create a brand image that is steeped in tradition. All that evokes trust to the online store.

Sin 8

 Fitbit has a really appealing typography design and unique layout of their product descriptions. Pure visual pleasure.

Sin10

 Net-a-Porter’s minimalistic black-and-white design and elegant typeface fit perfectly with the brand.  It’s a great example of rational space usage and perfectly compatible fonts.

Bottom-Line:

Quite often store owners either totally ignore typography or treat it as a separate entity (rather than an integral part of their store design).

Meanwhile typography is one of the most effective tools for creating a killer website look-and-feel, and it also plays a crucially important role in customer engagement.

P.S. Do you know any other typography sins? Please share your opinion in the comments below.