8 wirksame Typografie-Tipps für besseres E-Commerce Design

1. Lesbarkeit

Der erste Schritt zu einem verständlichen User Interface, ist die Wahl einer bildschirmtauglichen Textschrift. Folgende Kriterien helfen bei der Auswahl:

Offene Formen: sind die Buchstaben offen konstruiert, lassen sich Texte auch in kleineren Schriftgrößen besser lesen:

Gute Unterscheidbarkeit von l, I, 1: durch eine eindeutige Differenzierbarkeit der Buchstaben, ist ein User Interface schneller erfassbar.

Gleichmäßige Strichstärken: wenig Strichstärkenkontrast innerhalb einzelner Buchstaben, sorgen für ein ruhiges Schriftbild.

Freiere Schriftwahl bei Überschriften: Da Headline-Schriften in größeren Schriftgraden eingesetzt werden, stellen sie weniger strenge Anforderungen an die Lesbarkeit. Passend zur Marke, können hier auffälligere Schriften verwendet werden. So läßt sich die Aufmerksamkeit der User gewinnen und dem User Interface einen emotionalen Mehrwert verleihen.

2. Visuelle Hierachie

Um Zeit zu gewinnen werden einzelne Seiten eines Onlineshops von den Nutzern überflogen, statt linear von oben nach unten gelesen. Beim schnellen Erfassen hilft eine typografische Struktur, die die Inhalte aus Nutzersicht richtig gewichtet. Typografische Elemente wie Überschriften, Zwischenüberschriften, Absätze, Listen und Textauszeichnungen sind dabei wichtige Orientierungspunkte für das Auge.
Beim Einsatz von Überschriften gilt: je größer die Schrift, um so bedeutender wird der Inhalt wahrgenommen. Durch den gezielten Einsatz von verschiedenen Schriftgrößen, lassen sich so die Inhalte einer Seite nach Relevanz für den User gewichten.
Drei bis vier unterschiedliche Headline-Ordnungen reichen in den meisten Fällen aus. Es sollte darauf geachtet werden, das sich die Überschriften von den Schriftgrößen klar differenzieren.
Neben den Headlines braucht es noch weitere Schriftstyles, um alle Inhalte von der Produktliste bis zur Magazinseite darstellen zu können. Folgendes minimales Basisset reicht für viele Shop-Designs aus:

• Große Überschrift
• Überschrift
• Zwischenüberschrift
• Einleitungstext
• Fließtext
• Kleingedrucktes

3. Schriftgröße

Die passende Schriftgröße ergibt sich aus dem Leseabstand der Nutzer. Dieser ist beim Lesen am Bildschirm vergleichbar mit dem beim Betrachten von Drucksachen. Dennoch sollten Bildschirmtexte grundsätzlich etwas größer gesetzt werden. Der Grund: die Augen ermüden durch die Hinter­grund­beleuchtung schneller. Kleine Schriften strengen dabei noch zusätzlich an.
Eine Schriftgröße von 16 px ist ein guter Richtwert für eine gute Lesbarkeit. Allerdings stellt eine so große Basisschrift den Interfacedesigner vor Herausforderungen – besonders wenn für kleine mobile Bildschirme optimiert wird. Dennoch sollte bei der Wahl der Schriftgröße kein vorschneller Kompromiss gemacht werden. Das gilt besonders dann, wenn sich die Kernzielgruppe bereits im fortgeschrittenen Alter befindet und von einer geringeren Differenzierungsfähigkeit bei den Kunden auszugehen ist. 

4. Zeilenlänge

Als Faustregel für längere Texte gilt: sie sollten eine Zeichenlänge von 70–80 Zeichen pro Zeile nicht überschreiten. Bei einer zu großen Satzbreite hat das Auge Schwierigkeiten den Einstieg in die nächste Zeile zu finden und der Lesefluß wird immer wieder unterbrochen. Unser Tipp: Längere Texte wie Produkttexte nicht einfach über die gesamte Seitenbreite laufen lassen, auch wenn der Platz vorhanden ist. Der so entstehende Freiraum sollte besser als willkommene aktive Weißfläche genutzt werden. Der Shop gewinnt so „Luft zum Atmen“ und der Nutzer visuelle Erleichterung.
Dies gilt auch für SEO-Texte, bei denen die Lesbarkeit nicht an erster Stelle steht. SEO-Texte können zwar breitere Zeilenlängen vertragen als Produkttexte. Doch sollten auch sie nicht über die gesamte Contentbreite laufen. Das sorgt nicht nur für ein professionelleres Gesamtbild, sondern verbessert auch die User Experience, da ein überladen wirkendes Interface die Nutzer überfordert.

5. Ziffern

In einem Online-Shop ist der Kunde mit vielen Zahlen konfrontiert: Größen, Bestellnummern, Rabatte, Lieferzeiten und natürlich Preise. Deshalb sollte gerade im E-Commerce Design darauf geachtet werden, das die gewählte Textschrift auch geeignete Ziffernsätze enthält. Klar unterscheidbare Ziffern verbessern die Lesbarkeit. Spezielle Tabellen­ziffern sorgen bei Produktlisten für eine übersichtliche Darstellung, wie z.B. im Warenkorb oder der Bestellübersicht. Die Dezimalstellen stehen so immer genau untereinander, da Tabellenziffern immer die gleiche Breite einnehmen.
Ansonsten gilt für Ziffern, was auch für Buchstaben gilt: die Wahl der Schrift, nimmt Einfluss darauf, wie die Zahlen emotional auf den Betrachter einwirken. Schmale Ziffern wirken labiler als breite. Kontrastarme nüchterner als kontrastreiche. Warum also nicht mit Hilfe einer sympathisch wirkenden Schrift, die Preise weniger streng wirken lassen und so dem Kunden bei der Kaufentscheidung helfen?

Die offenen Formen der Schrift „Proxima“ wirken freundlich und heiter und verleihen den Ziffern einen hohen Sympathiefaktor. Im Vergleich dazu die eher kalt wirkenden Zahlen der Helvetica. Welchen Preis zahlt man lieber?

6. Kursive Texte

Im Gegensatz zum aufrechten normalen Schnitt, sind kursive Schriften schräg geneigt. Kursiver Text wird vor allem zur Auszeichnung und Hervorhebung einzelner Wörter in Mengentexten eingesetzt.

Schrifthistorisch betrachtet, gehen unsere heutigen kursiven Schriftschnitte auf die Handschrift zurück. Sie lassen sich auf die verbundenen und fliessenden Schriftformen zurückführen, die beim Schreiben entstehen. Kursiv gesetzte Texte erinnern deshalb noch immer an handgeschriebene Texte und vermitteln eine dringliche und persönliche Note. Bei „echten“ kursiven Schnitten, die nicht nur schräggestellte Varianten des Normalschnittes sind, ist dieser Effekt stärker. Echte kursive Schnitte erkennt man z.B. an eigenständigen Formen der Buchstaben a, f und g.

Vor diesem Hintergrund setzen wir Kursiv-Schnitte gerne für die Hinweiskommunikation in Online-Shops ein. Die kursive Schreibweise unterstreicht so die persönliche Botschaft der Hinweise und sie werden so als relevanter von den Nutzern eingestuft.

7. Versalsatz

Versalsatz bezeichnet den Schriftsatz in Großbuchstaben. Versalsatz sollte im E-Commerce mit Bedacht eingesetzt werden, da hier die Lesbarkeit leidet. Der Grund: beim Lesen erfassen wir Wörter vielmehr anhand der Wortumrissformen, statt durch das lineare Lesen einzelner Buchstaben. Da im Versalsatz alle Buchstaben die gleiche Höhe aufweisen und die Wortsillhouetten sich somit sehr ähneln, wird eine Unterscheidung erschwert. Deshalb sollte Großbuchstabensatz grundsätzlich nicht für ganze Sätze eingesetzt werden.

Trotzdem hat Versalsatz auch seinen Platz im E-Commerce Design, gerade bei der Gestaltung von Überschriften. Auch Buttontexte können in Großbuchstaben gestaltet werden, da hier meist nur wenige Wörter zum Einsatz kommen. Versalsatz vermittelt eine distanzierte, autoritäre und klassische Note, die gerne von Premiummarken eingesetzt wird. Anbieter, die sich an eine breite Zielgruppe richten und Nähe vermitteln wollen, sollten Versalsatz dagegen meiden.

8. Sprachunterstützung

Bei der Suche nach einer geeigneten Schrift für international ausgerichtete Online-Shops, sollte im Vorfeld geprüft werden, ob die Schrift alle notwendigen Zeichen enthält, um die benötigten Sprachen korrekt darstellen zu können. Gerade Freefonts enthalten oft nur eine begrenzte Zeichenzahl, bei der man schnell an Grenzen stößt. Bei der Schriftwahl für unseren Auftraggeber bonprix mußte bedacht werden, das der Corporate Font alle 20 Sprachen unterstützt, in denen der Shop betrieben wird. Die Großfamilie ‚Museo‘ hat diese Anforderung erfüllt. Wer seltene Sprachen bedienen muß, für den könnte vielleicht der kostenlose Google Font Noto eine Lösung sein. Die Schrift hat sich zum Ziel gesetzt alle Sprachen der Welt zu unterstützen. Über 800 Sprachen sind bereits enthalten und die Schriftfamilie wird immer weiter ausgebaut.