• Get started
  • Newsletter
  • Categories
    • Online shop & ecommerce
    • Shop Design
    • Marketing
    • Search engines (SEO)
    • Products
    • Payment & Delivery
    • Legal issues
    • Merchant stories
  • Search
  • Menu Menu
Typography for your online shop
Kerstin Deharde

The right typography for your online shop

25. February 2016/0 Comments/in Shop Design /by Kerstin Deharde

Designers often say that the text makes up 90% of a website’s design. Whether or not that’s true, textual aspects certainly contribute to the user experience. In this article by our Product Manager User Experience Lukas Rathmann, you can read about the things to watch for with regard to text and learn how effective typography can improve your shop’s conversion rate.

Appealing design, good-quality product images and user-friendly navigation: all these and many other factors can affect a user’s experience of an online shop. When optimising their shops, however, many merchants tend to forget the major role played by text in the site design. Apart from enhancing the actual content of the copy, it’s also very important that we consider the visual impression made by the text.

There are two main objectives to bear in mind concerning text design: firstly, it should contribute to the shop’s overall visual style and, secondly, it should provide visitors with a straightforward, pleasant reading experience. This second aspect – readability – should always be prioritised.

Selection of fonts

When choosing fonts, there are several factors to consider.

Content

Not every typeface is suitable for every type of content. Certain fonts, for instance, have been explicitly developed for use in headings and can therefore only be used in limited ways for other types of content such as body copy or button labels.

Typography for online shops

Helvetica (left) and Open Sans (right) – At smaller font sizes, Open Sans has a higher readability

Style

Some typefaces are very generic and neutral, whereas others project a distinctive, individual style. Important issues here are the target audience and the branding. For example, you wouldn’t expect to see a clumsy, old-fashioned typewriter-style font used for an elegant bridal wear shop.

Typography for online shops

Source Code Pro and Snell Roundhand

Font combinations

Typically, if two fonts are to be used, we distinguish between one typeface for headings and another for the body copy.

We’d recommend that you avoid using more than two different typefaces on your website. There’s a simple reason for this: the more fonts you use, the harder it will be to combine the fonts effectively.

In any event, when selecting your typefaces you should aim to achieve a good level of contrast between the two styles, which should therefore not be too similar. Very often, a distinctive typeface, such as a serif font, works well in combination with a more neutral, generic font.

Typography for online shops

Open Sans (headline) and Georgia

Of course there’s no rule that says you have to mix two different typefaces. It can often be effective simply to use different styles of the same font – such as “Normal” and “Bold”.

Typography for online shops

Open Sans bold (headline) and normal

Other factors to consider

When designing text, you should follow certain basic rules:

  • The text should be correctly formatted from a semantic point of view. In the ePages WYSIWYG editor, you can choose between different formatting options. For the body copy, you should always select the “Normal” font style. Top-level headings should be formatted as “Heading 1”, the second-level headings one level down as “Heading 2”, and so forth.
  • If key words are emphasised (by being shown in bold, for example), they will not only stand out more for the reader, but search engines will also be able to capture the website content more easily and classify it correctly.
  • The contrast between the type and the background should always be sufficiently clear. On a white background, for instance, light-grey text can be difficult to read.

Things to avoid

Even if modern tools offer us all kinds of options for manipulating text online, they should be used with caution. When aiming for legibility, the well-known rule applies: less is more. Below we’ve compiled a list of various options you should probably avoid:

  • Changing the pre-set text colour and background colour for your shop theme
  • Justifying or centering your body copy
  • Modifying the predefined line spacing for your shop theme
  • Mixing different font sizes within the body copy
  • Using more than one alignment option
  • Using too many format styles together (such as bold and italic)
  • Strikethrough text (except to show where a higher price is no longer valid)
  • Underlining text (apart from in links)
  • Using upper and lower-case formatting in an unusual way

    Typography for online shops

    Centered, low contrast, a lot of bold and italic text – the readability of this text is low

Kerstin Deharde
+ postsBio

ist Product Owner bei ePages.

  • Kerstin Deharde
    https://blog.epages.com/en/author/kdeharde/
    New features for your ePages Now shop
  • Kerstin Deharde
    https://blog.epages.com/en/author/kdeharde/
    New features of ePages Now: Customer groups, Facebook Pixel and more
  • Kerstin Deharde
    https://blog.epages.com/en/author/kdeharde/
    Buttons, background colours and more: These are the new features in the editor of ePages Now
  • Kerstin Deharde
    https://blog.epages.com/en/author/kdeharde/
    Wish list, minimum order value & more: the latest features for ePages Now
Tags: advice, copy, design, font, fonts, headlines, typography
Share this entry
  • Share on Facebook
  • Share on WhatsApp
  • Share on LinkedIn
  • Share by Mail
https://blog.epages.com/wp-content/uploads/2021/07/typography-for-your-online-shop.jpg 314 848 Kerstin Deharde https://blog.epages.com/wp-content/uploads/2021/11/logo-epages-blog.svg Kerstin Deharde2016-02-25 12:55:582016-02-25 12:55:58The right typography for your online shop
You might also like
Menus et méga menus : optimisez votre arboresence
Upcoming features of ePages Now
What’s your Black Friday strategy? Sources of analysis & inspiration
New features and apps for ePages Now: Payments with Mollie and more
9 résolutions pour aborder la rentrée de votre boutique en ligne avec sérénité
What should I do in post-production for high quality product images?
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply Cancel reply

You must be logged in to post a comment.

Search posts

Recent posts

  • Accessibility of online shops (Guest article by IT-Recht Kanzlei)
  • How to collect more reviews for your online shop
  • Winter Release 2025: New Features for Better Internationalisation and Product Safety
  • Boost conversions and trust with RateCompass: a comprehensive review solution for ecommerce merchants
  • Autumn release video: the latest features for ePages Now

Categories

  • ePages Direct
  • Legal issues
  • Marketing
  • Merchant stories
  • Online shop & ecommerce
  • Payment & Delivery
  • Products
  • Search engines (SEO)
  • Shop Design
  • Success stories
  • Uncategorized

Tips for a successful start in e-commerce

Checklist: how to start your online shop
Sources for product ideas the ultimate list
Product photos avoiding common mistakes
The best category structure for your shop
Content marketing strategies for your online shop
The 6 key elements of a good seo strategy

ePages blog newsletter

ePages blog newsletter

© 2025 ePages · Pilatuspool 2 · 20355 Hamburg · Deutschland

Contact ·  Terms & Conditions  · Legal Notice · Data Privacy Protection

  • English
    • Français (French)
    • Deutsch (German)
    • Español (Spanish)
Scroll to top