Du kennst das. Du willst nur kurz ein Produkt checken, aber die Schrift ist mini. Du kneifst die Augen zusammen, zoomst, verlierst die Lust. Genau da fliegt dir Conversion davon. Gute Typografie packt Nutzer an der Hand. Sie führt, klärt, beruhigt und macht Kaufentscheidungen leicht. In diesem Guide zeige ich dir, wie du mit der richtigen Schriftgröße mehr Warenkörbe siehst und weniger Abbrüche kassierst.
Ich schreibe direkt, freundlich und fachlich klar. Du bekommst konkrete Schritte, die du heute umsetzen kannst. Du brauchst kein Design-Studium. Du brauchst deine Shop-Ziele, echte Inhalte und Lust auf Tests. Los geht’s.
Lesbarkeit als Conversion-Hebel
Lesbarkeit entscheidet, wie schnell dein Nutzer Information in Handlung verwandelt. Nutzer scannen zuerst. Wenn der Text zu klein ist, scheitert schon der erste Eindruck. Dann sinkt Aufmerksamkeit. Der Kopf rechnet. Lohnt sich der Aufwand. Das bremst. Mit einer sauberen Grundgröße entfernst du diese Hürde. Du senkst die kognitive Last. Du beschleunigst Entscheidungen.
Die Zahl 12 Prozent ist ein realistischer Richtwert aus Projekten und Tests. Du kannst diese Steigerung erreichen, wenn du von einer zu kleinen Basis auf eine sinnvolle Größe gehst und gleichzeitig Zeilenlänge, Abstände und Kontrast mitziehst. Der genaue Wert hängt von Zielgruppe, Sortiment und Endgerät ab. Wichtig ist der Prozess. Du misst, passt an und skalierst die Gewinner-Variante.
Die Schriftgröße im Shop kann kaufentscheidend sein – E-Commerce News – Tipps & Tricks – 🅰️ Warum die Schriftgröße über 12% deiner Conversion entscheidet 👁️🗨️
Psychologie dahinter
Größe wirkt auf Gefühl und Vertrauen. Große, klare Texte signalisieren Ruhe und Kontrolle. Nutzer fühlen sich sicherer. Sie finden schneller, was sie brauchen. Sie müssen weniger interpretieren. Das gibt Tempo. Kleine Texte lösen das Gegenteil aus. Unsicherheit, mehr Scroll, mehr Fehler, mehr Nachfragen. Die Folge ist Abbruch oder Zögern. Zeit frisst Motivation. Motivation frisst Budget, wenn du für jeden Klick bezahlst.
Lesbarkeit stärkt Markenbild. Ein Shop, der mich entspannt lesen lässt, wirkt kompetent. Ein Shop, der mich anstrengt, wirkt nachlässig. Deine Typografie ist also nicht nur Deko. Sie ist ein Leistungsversprechen. Sie sagt, wie du dich um deine Käufer kümmerst.
Mehr Grundlagen und konkrete Checklisten findest du hier: Usabilityblog Praxiswissen.
Mobile zuerst planen
Die meisten Käufe starten mobil. Plane daher von klein nach groß. Lege die Grundgröße für Fließtext zuerst auf dem Smartphone fest. Ein guter Start liegt bei 16 Pixel. Prüfe 17 bis 18 Pixel, wenn deine Zielgruppe ältere Nutzer enthält oder wenn du viel Fachtext hast. Headlines wachsen in Stufen. Produktnamen dürfen großzügig sein, sollten aber nicht umbrechen wie eine Gedichtszeile. Preise und Vorteilsargumente müssen in einem Blick sitzen. Nichts darf zu kleinteilig wirken.
Beobachte die Zeilenlänge. Auf dem Smartphone liegt ein angenehmer Bereich bei etwa 35 bis 60 Zeichen pro Zeile. Zu lange Zeilen machen müde. Zu kurze Zeilen erzeugen Treppen. Beides kostet Tempo. Passe Abstände zwischen Absätzen so an, dass Blöcke klar erkennbar sind. Das Auge liebt Rhythmus.
Hierarchie, die führt
Definiere eine klare Skala. H1 ist die Hauptaussage. H2 strukturiert die Themen. H3 führt in Details. Fließtext erklärt. Meta-Infos geben Kontext. Halte pro Stufe einen festen Zuwachs. Ein Multiplikator von 1.125 bis 1.25 pro Ebene funktioniert gut. So bleibt das Gefühl gleich, wenn Nutzer zwischen Kategorie, Produktseite und Checkout wechseln. Das schafft Vertrauen, weil das Gehirn weniger neu lernen muss.
Denke in Mustern. Produktname, Preis, kurze Nutzenliste, Haupt-CTA. Danach vertiefst du mit Reitern oder Abschnitten. Der Nutzer weiß dann, wo er weiterliest. Das spart Suchzeit. Suchzeit frisst Kauflaune.
Kontrast und Gewicht
Größe allein reicht nicht. Kontrast und Schriftgewicht entscheiden, ob die Größe ankommt. Halte Text und Hintergrund gut unterscheidbar. Dünne Schriftschnitte sehen edel aus, verlieren aber auf hellen Flächen. Wähle Gewichte mit solider Strichstärke. Prüfe Buttons, Labels und Fehlermeldungen. Diese Texte tragen Verantwortung. Sie müssen sofort erfassbar sein. Das gilt auch für Preise und Summen im Checkout. Fehlende Klarheit dort kostet Umsatz.
Teste deine Seiten bei Tageslicht, abends auf der Couch und bei geringer Helligkeit. Prüfe auf echtem Gerät. Simulatoren helfen, ersetzen den Alltag aber nicht. Bitte dein Team und zwei bis drei Kundinnen um Feedback. Was sie als anstrengend empfinden, ist fast immer ein echtes Problem.
Vertiefe das Thema Barrierefreiheit und Lesbarkeit: BIK Ratgeber sowie praxisnahe Typografie-Hinweise.
Formulare, die nicht müde machen
Formulare brechen Käufe, wenn sie klein und fragil wirken. Erhöhe die Schrift in Labels und Eingabefeldern. Stelle eine saubere Zeilenhöhe. Zeige hilfreiche Platzhalter nur, wenn sie nicht mit Inhalten konkurrieren. Fehlermeldungen müssen groß genug sein, damit der Blick sie sofort findet. Setze klare Sprache. Sage, was fehlt, und wie man es löst. Verstecke nichts.
Teste den Abstand zwischen Label, Feld und Hilfetext. Das Auge soll den Zusammenhang erkennen. Prüfe Eingaben auf Fehlerfrequenz. Sinkt die Fehlerquote mit größerer Schrift, hältst du einen direkten Conversion-Hebel in der Hand.
Produktseite: wo Größe verkauft
Produktnamen brauchen Präsenz. Halte sie gut lesbar, aber nicht übergroß. Preis und Verfügbarkeitsinfo kommen direkt danach. Liefervorteile und Rückgaberegeln dürfen nicht untergehen. Packe die wichtigsten Punkte in eine kurze Liste mit sauberer Größe. Nutze kurze Sätze. Vermeide Fachjargon. Bilder tragen, Texte überzeugen. Wenn der Text kämpft, gewinnt der Zweifel. Gewinnst du den Blick, gewinnst du den Klick.
Bewertungen sind ein Vertrauenselement. Stelle Sterne und Zähler neben den Titel. Der Link zur Übersicht soll sofort lesbar sein. Setze Filter und Sortierung so, dass Nutzer Zusammenhänge verstehen. Kleine Schrift bei Filtern frustriert. Das kostet Zeit. Zeit kostet Verkäufe.
Kategorie und Suche: Scannen ohne Frust
Die richtig gewählte Typografie im Onlineshop ist extrem wichtig – E-Commerce News – Tipps & Tricks – 🅰️ Warum die Schriftgröße über 12% deiner Conversion entscheidet 👁️🗨️
Kataloge brauchen Tempo. Karten mit Produktbild, Titel, Preis und CTA funktionieren, wenn die Schrift stimmt. Titel dürfen in zwei Zeilen enden, nicht in drei. Preise müssen in der Liste klar sein. Der CTA darf nicht schrumpfen. Paginierung, Facetten und Breadcrums brauchen solide Größe. So findet man sich zurecht. Verirrt sich der Nutzer, ist er weg.
Nutze klare Hierarchie auch in der Suche. Zeige Treffer mit starken Titeln. Hebe Suchbegriffe fett hervor. Halte Abstände gleich. Baue Vertrauen auf, indem du Konsistenz bietest. Konsistenz spart Energie. Gesparte Energie wird zur Kaufbereitschaft.
Checkout: wo Kleinteiligkeit teuer wird
Im Checkout ist die Toleranz für Reibung null. Stelle Summen, Versandkosten und Lieferzeiten groß und klar dar. Rechtstexte dürfen nicht schreien, sollen aber lesbar bleiben. Button-Texte wie Jetzt kaufen oder Zahlungspflichtig bestellen brauchen sicheren Biss. Niemand will rätseln, ob der Klick funktioniert. Niemand will eine Lupe für den Gesamtpreis.
Ein kleiner Gewinn bei der Lesbarkeit im Checkout skaliert direkt auf Umsatz. Du senkst kleine Fehler, die große Folgen haben. Du reduzierst Nachfragen an den Support. Beides steigert Marge und Laune.
Wie du testest und skalierst
Starte mit einem A/B-Test. Definiere eine Hypothese. Beispiel. Eine Erhöhung der Grundgröße von 14 auf 16 Pixel steigert die Add-to-Cart-Rate. Lege KPIs fest. Add-to-Cart, Checkout-Start, Checkout-Abschluss, Zeit bis zur Aktion, Scrolltiefe, Rücksprungrate. Lege die Laufzeit fest. Mindestens ein kompletter Kaufzyklus. Schließe saisonale Verzerrungen aus. Dokumentiere Setup, Messpunkte und Ergebnisse.
Wenn Variante B gewinnt, rolle sie aus. Wiederhole den Test mit Headlines. Nimm Buttons und Formulartexte unter die Lupe. Skalierst du Schritt für Schritt, wächst die Wirkung. Du behältst Kontrolle. Du lernst, welche Kombination aus Größe, Gewicht und Abstand in deinem Kontext am besten funktioniert.
Team-Workflow, damit nichts verrutscht
Lege eine kleine Typo-Dokumentation an. Notiere Grundgrößen, Hierarchien, Abstände und Beispiele. Ergänze Screenshots von Kategorie, PDP, Warenkorb und Checkout. Benenne für jeden Seitentyp die kritischen Elemente. Preis, CTA, Lieferinfo, Fehlertext. Hinterlege Testdaten. So bleiben Entscheidungen transparent. Neue Kolleginnen finden schneller rein. Änderungen passieren gezielt, nicht zufällig.
Arbeite mit Content aus dem echten Leben. Nimm echte Produktnamen, echte Spezifikationen, echte Retourenhinweise. Lorem Ipsum täuscht. Du willst sehen, wie sich deine Typo bei echten Längen verhält. Nur so vermeidest du Überraschungen nach dem Go-live.
Technische Hintergründe zu Webtypografie findest du auch bei SELFHTML Typografie.
International und rechtlich sauber
Größe muss mit Sprache harmonieren. Längere Worte in Deutsch oder Finnisch brauchen mehr Platz als Englisch. Plane Zeilenumbrüche. Kürze dort, wo es Sinn ergibt. Rechtstexte brauchen Ruhe und Lesbarkeit. Kleine Schrift wirkt schnell einschüchternd. Du willst Klarheit zeigen. Klare Texte senken Supportaufwand und bauen Vertrauen auf.
Wenn du mehrere Märkte bedienst, dokumentiere Unterschiede. Halte pro Sprache Beispiele bereit. Prüfe regelmäßig, ob Übersetzungen die Länge sprengen. Korrigiere früh. Dann bleibt das Layout stabil.
Messbare Ziele, klare Entscheidungen
Setze Ziele pro Seitentyp. Produktliste. Mehr Klicks auf Produktkarten. Produktseite. Mehr Klicks auf In den Warenkorb. Checkout. Mehr abgeschlossene Zahlungen. Leite daraus Typo-Maßnahmen ab. Erhöhe Grundgröße, verbessere Kontrast, ordne Hierarchie. Prüfe die Auswirkung. Triff Entscheidungen auf Datenbasis. Stimme dich mit CRM und Support ab. Wenn Rückfragen sinken, bist du auf dem richtigen Weg.
Baue dir ein Dashboard. Zeige Conversion nach Gerät, Scrolltiefe, Zeit bis zum ersten Klick, Fehlerrate in Formularen. Verknüpfe die Daten mit Release-Zeitpunkten. Dann siehst du, wie sich Typo-Änderungen auswirken. Das motiviert das Team und rechtfertigt die nächsten Schritte.
Quick-Checks für deinen Shop
- Fließtext mobil mindestens 16 Pixel. Prüfe 17 bis 18 Pixel.
- Zeilenhöhe 1.4 bis 1.6 für Fließtext. Kürzere UI-Texte 1.2 bis 1.4.
- Zeilenlänge 35 bis 60 Zeichen auf dem Smartphone.
- Buttons 15 bis 18 Pixel Schrift. Klare Worte. Genug Innenabstand.
- Preis, Lieferinfo und Vorteile sofort sichtbar und gut lesbar.
- Fehlermeldungen deutlich und in der Nähe des Feldes.
- Kontraste nach WCAG AA prüfen. Dünne Schnitte sparsam einsetzen.
- Testen auf echten Geräten und in echtem Licht.
- Alles dokumentieren. Änderungen mit Datum und Messwerten sichern.
Dein Mini-Plan für die nächsten 7 Tage
- Tag 1. Screencast und Screenshots deiner wichtigsten Seiten erstellen. Problemstellen markieren.
- Tag 2. Grundgröße mobil auf 16 bis 18 Pixel festlegen. Hierarchie definieren.
- Tag 3. Buttons, Labels, Fehlermeldungen anpassen. Checkout prüfen.
- Tag 4. Produktliste und Suche optimieren. Titel und Preise justieren.
- Tag 5. A/B-Test aufsetzen. Hypothese und KPIs festlegen.
- Tag 6. Test starten. Daten sammeln. Team-Feedback einholen.
- Tag 7. Ergebnisse prüfen. Gewinner ausrollen. Nächsten Test planen.
Typische Einwände und klare Antworten
Einwand. Große Schrift nimmt Platz weg. Antwort. Platz ohne Lesbarkeit ist toter Raum. Du verkaufst keine Pixel. Du verkaufst Orientierung. Einwand. Unsere Marke wirkt filigran. Antwort. Filigran geht mit klarem Kontrast und sauberer Hierarchie. Einwand. Wir haben keine Ressourcen für Tests. Antwort. Ein sauberer Typo-Test ist klein, schnell und bringt greifbare Learnings. Er zahlt sich aus.
Einwand. Unsere Nutzer sind digital fit. Antwort. Fit sein heißt nicht gerne rätseln. Niemand dankt dir für kleine Texte im Checkout. Gute Lesbarkeit wirkt auf alle Zielgruppen. Sie spart Zeit und Nerven.
Jetzt bist du dran
Zeig mir eine Seite aus deinem Shop. Schreib, welche Stellen du mühsam findest. Frag nach einer schnellen Typo-Skala für dein Layout. Teile Zahlen, wenn du schon getestet hast. Ich gebe dir ein klares Feedback mit einem Prioritätenplan. So kommst du ohne Umwege zur nächsten Verbesserung.
Du kannst auch ein kleines Vorher-Nachher posten. Nenne die Grundgröße, die Zeilenhöhe und einen Screenshot vom Checkout. Andere Händler lernen mit. Ihr spart euch viele Schleifen.
Als Copywriterin ärgere ich mich ständig über zu kleine Schriften. Man gibt sich so viel Mühe mit den Texten und dann kann sie keiner lesen! 🙄 Der Artikel bringt es auf den Punkt: Content ist King, aber nur wenn man ihn auch lesen kann! Ich hatte mal einen Kunden, der wollte unbedingt diese super dünne, moderne Schrift in 12px. Sah zugegebenermaßen schick aus, aber die Bounce-Rate war katastrophal. Nach langem Hin und Her haben wir einen Kompromiss gefunden: Moderne Schrift, aber in 17px und mit mehr font-weight. Ergebnis? Die Leute blieben plötzlich auf der Seite und haben tatsächlich gelesen was ich geschrieben hatte! Die Time-on-Site ist von durchschnittlich 45 Sekunden auf über 2 Minuten gestiegen. Für mich als Texterin ist das Gold wert. Was bringen die besten Headlines und Call-to-Actions, wenn sie niemand entziffern kann?
Kann ich zu 100% bestätigen. Wir haben vor 2 Monaten umgestellt und die Zahlen sprechen für sich.
Perfektes Timing! Wir redesignen gerade unsere Seite und ich war unsicher wegen der Schriftgröße. Jetzt weiß ich: Lieber zu groß als zu klein! Die Beispiele mit den Conversion-Steigerungen haben mich überzeugt. 16px minimum wird es bei uns!
Interessant, aber bei Premium-Marken sieht große Schrift schnell billig aus. Man muss schon aufpassen.
Dieser Artikel sollte Pflichtlektüre für alle Webdesigner sein! Ich arbeite in der Conversion-Optimierung und die Schriftgröße ist wirklich einer der am meisten unterschätzten Faktoren. Wir haben mal bei einem großen deutschen Versandhaus getestet: 12px vs 14px vs 16px vs 18px. Die Ergebnisse waren eindeutig: Mit jedem Schritt nach oben stieg die Conversion! Bei 18px haben wir aufgehört zu testen, weil der Kunde meinte es sähe ‚zu groß‘ aus. Aber die Zahlen lügen nicht: +22% Conversion insgesamt, +37% bei Mobile! Das Verrückte ist: Es kostet literally NULL Euro diese Änderung umzusetzen. Keine neue Software, keine Berater, keine Workshops. Nur eine CSS-Zeile ändern. Der ROI ist praktisch unendlich. Wenn ich Kunden nur EINE Sache empfehlen dürfte, wäre es: Macht eure verdammte Schrift größer! 😄
Vollkommen richtig! Lesbarkeit > Design-Spielereien
Mega hilfreicher Artikel! Die Beispiele sind super nachvollziehbar. Besonders der Vergleich mit dem Restaurant-Menü hat’s mir gebracht. Stimmt total – wenn ich die Karte nicht lesen kann, bestell ich auch nichts. Gleiches Prinzip online! Wir haben gerade unseren neuen Webshop gelauncht und ich werde definitiv nochmal über die Schriftgröße nachdenken. Aktuell haben wir 14px, aber nach eurem Artikel tendiere ich zu 16px oder sogar 18px. Die paar Pixel machen echt den Unterschied. Was mich noch interessieren würde: Gibt’s Unterschiede zwischen verschiedenen Branchen? Ich könnte mir vorstellen, dass z.B. Fashion-Brands mit kleinerer Schrift durchkommen als B2B-Seiten?
Moin! Als jemand der selbst eine Sehschwäche hat, kann ich nur unterschreiben was hier steht. Ich verlasse Webseiten sofort wieder, wenn ich zoomen muss um was zu lesen. Und ich bin erst 35! Stellt euch mal vor wie es den Silver Surfern geht. Die haben oft das Geld für eure Produkte, aber wenn sie die Beschreibung nicht lesen können, kaufen sie halt woanders. Simple as that. Bei meinem eigenen Shop hab ich letztes Jahr auf 18px umgestellt und die Conversion bei der Zielgruppe 50+ ist um 41% gestiegen! Kein Witz! Das war die einfachste Optimierung die ich je gemacht hab.
DANKE! Schicke den Artikel direkt an unseren CEO. Vielleicht glaubt er es endlich, wenn es nicht von mir kommt 😂
Guter Artikel, aber ihr hättet noch mehr auf die verschiedenen Schriftarten eingehen können. Manche Fonts sind auch bei 14px noch gut lesbar, andere brauchen mindestens 18px.
Endlich mal ein Artikel der Klartext spricht! In unserer Agentur predige ich das seit Jahren. Aber nein, die Kunden wollen immer alles ‚modern‘ und ‚clean‘ – was meist bedeutet: winzig kleine Schrift in hellgrau auf weiß. 🤦♀️ Accessibility ist halt nicht sexy, bis man die Conversion-Zahlen sieht. Wir hatten mal einen Kunden aus dem Finanzbereich, der partout nicht von seiner 10px Schrift wegwollte. ‚Sieht professioneller aus‘ meinte er. Nach 3 Monaten mieser Performance haben wir ihn überzeugt, einen A/B Test zu machen. Rate mal was passiert ist? Die Version mit 16px hat 34% besser konvertiert! VIERUNDDREISSIG PROZENT! Der Kunde konnte es selbst nicht glauben. Seitdem ist er unser größter Verfechter für lesbare Typografie geworden. 😄
Ich muss gestehen, ich war skeptisch. Aber nachdem ich eure Tipps umgesetzt habe: +15% mehr Newsletter-Anmeldungen! Wahnsinn! Besonders der Hinweis mit dem Zeilenabstand war Gold wert. Wir hatten vorher alles so gequetscht… 🙈
Danke für diesen Augenöffner! Werde direkt mal unsere Website checken. Die Statistiken sind ja eindeutig.
Als Webentwickler muss ich sagen: Der Artikel trifft den Nagel auf den Kopf! Ich erlebe es immer wieder, dass Kunden ihre Texte möglichst klein haben wollen, um mehr Inhalt unterzubringen. Dabei ist das totaler Quatsch. Eine gut lesbare Seite mit 18px Schriftgröße performt IMMER besser als eine vollgestopfte mit 12px. Das Problem ist oft, dass viele Designer noch auf ihren hochauflösenden Retina-Displays arbeiten und vergessen, wie das auf einem normalen Monitor aussieht. Besonders ältere Nutzer – und das sind in vielen Branchen die zahlungskräftigsten Kunden – strugglen extrem mit kleiner Schrift. Ich hatte mal einen Fall, da hat ein Kunde eines Möbelhauses sich beschwert, dass die Bounce-Rate so hoch ist. Ein Blick auf die Seite: 11px Schriftgröße! Nach der Erhöhung auf 16px ist die Verweildauer um fast 40% gestiegen. Der ROI von größerer Schrift ist einfach unschlagbar. Kostet nichts außer ein paar Zeilen CSS und bringt messbare Ergebnisse.
Interessanter Artikel! Bei uns im Online-Shop haben wir tatsächlich ähnliche Erfahrungen gemacht. Nach der Umstellung auf größere Schrift sind die Conversions um 8% gestiegen. Hätte nicht gedacht, dass es so einen Unterschied macht.
Kurz und knapp: Endlich sagt’s mal einer! 12px ist Folter für die Augen. Punkt.
Wow, endlich mal jemand der das Thema Schriftgröße ernst nimmt! Als UX-Designerin kämpfe ich ständig mit Kunden, die alles möglichst klein haben wollen. ‚Mehr Content above the fold‘ heißt es dann immer. Dabei vergessen sie komplett, dass niemand konvertiert, wenn er erstmal die Lesebrille rauskramen muss. Der Tipp mit den 16px als Minimum nehme ich direkt mit in die nächste Kundenpräsentation. Besonders der Punkt mit der mobilen Lesbarkeit ist Gold wert – ich hab letztens bei einem E-Commerce Projekt die Schrift von 14px auf 18px erhöht und die Absprungrate ist um 23% gesunken! Krass oder? Man unterschätzt wirklich wie sehr die Augen beim Shopping entspannt sein müssen. Danke für die konkreten Zahlen, die kann ich gut als Argumentationshilfe nutzen!