Schriftarten für Onlineshops: Lesbar, schnell und markenstark

Welche Schriftarten für Onlineshops sind lesbar und schnell?

Gute Schriftarten für Onlineshops sind klar lesbare, schnell ladende Schriften, die alle Sonderzeichen Ihrer Kundschaft abdecken. Meist genügt eine neutrale serifenlose Schrift für den Fließtext und eine zurückhaltende Schrift für Überschriften. So erfassen Besucher Preise und Produktdetails sofort. Eine falsche Wahl bremst dagegen die Seite und zerstört Umlaute.

Ein Kunde kann Ihr Produkt nicht anfassen, er kann es nur lesen. Also übernimmt der Text die Rolle von Licht und Regalplatz im Ladengeschäft. Deshalb gehört die Schrift zum Verkaufsprozess und ist kein bloßer Schmuck.

In diesem Leitfaden zeigen wir, wie unser Team bei Shop Projekten vorgeht. Allgemeine Regeln finden Sie in unserem Beitrag Web Typografie: Schrift richtig wählen. Hier konzentrieren wir uns auf Entscheidungen, die speziell für Onlineshops zählen.

Warum beeinflusst die Schriftwahl den Umsatz im Onlineshop?

Die Schriftwahl steuert, wie schnell Besucher Preis, Lagerstatus und Lieferbedingungen lesen. Außerdem prägt sie das Vertrauen, denn ein einheitliches Bild wirkt seriös. Eine ordentliche, einheitliche Seite wirkt sicher. Dagegen wirkt eine Seite mit gemischten Schriften und kaputten Zeichen wirkt nachlässig, und Besucher springen vor dem Checkout ab.

Auch die Geschwindigkeit spielt mit. Jede Web Font ist eine zusätzliche Datei. Auf einer langsamen Mobilverbindung erscheint dann die Überschrift oder der Preis zu spät. Somit ist die Wahl der Schriftarten für Onlineshops auch eine Performance Entscheidung.

Zum Beispiel braucht ein Shop für Technik eine andere Stimmung als ein Laden für Handgemachtes. Allerdings brauchen beide dasselbe Ergebnis: Der Besucher muss Produkt und Preis auf einen Blick lesen. Jede Schrift, die das nicht schafft, schadet dem Shop, egal wie schön sie aussieht. Prüfen Sie daher jede Wahl an echten Produkten, nicht an Mustertexten.

Welche Lesbarkeitsfaktoren zählen bei Schriftarten für Onlineshops?

Fünf Faktoren entscheiden über die Lesbarkeit: Buchstabenform, Größe, Zeilenabstand, Zeilenlänge und Kontrast. Ist einer schwach, rettet ihn deshalb kein anderer. Zum Beispiel bleibt eine elegante Schrift in kleiner Größe und mit wenig Kontrast unlesbar.

Prüfen Sie diese Punkte auf jeder Produktseite:

• Buchstabenform: Zeichen wie "a", "g" und "1" müssen klar unterscheidbar sein, und "I" und "l" dürfen nicht verschwimmen.
• Größe: Der Fließtext muss auf dem Smartphone angenehm bleiben.
• Zeilenabstand: Textblöcke brauchen Luft und dürfen nicht gedrängt wirken.
• Zeilenlänge: Sehr lange Zeilen ermüden das Auge, daher halten Sie sie kurz.
• Kontrast: Der Abstand zwischen Text und Hintergrund muss stark genug sein.

Zunächst testen Sie diese Faktoren gemeinsam und nicht einzeln. Außerdem sollten Sie auf einem echten Gerät prüfen. Ein Designprogramm zeigt ein saubereres Bild als ein Handy im Sonnenlicht.

Für den Kontrast veröffentlicht das W3C klare Kriterien. Lesen Sie dazu die WCAG Erläuterung zum Mindestkontrast. Diese Regeln helfen Menschen mit Sehschwäche, und sie helfen auch jedem, der auf einer hellen Straße einkauft.

Welche Schriftgröße und welchen Zeilenabstand brauchen Produktseiten?

Unsere Praxiserfahrung liefert einen Startwert, keine Garantie: Fließtext ab 16 Pixeln und ein Zeilenabstand von etwa dem 1,5 Fachen der Schriftgröße. Passen Sie den Wert dann an die Schrift an, denn Schriften unterscheiden sich stark. Eine Schrift mit breiten Buchstaben braucht womöglich etwas mehr Abstand.

Bauen Sie eine klare Hierarchie zwischen Produkttitel, Preis und Warenkorb Button auf. Zunächst bekommt der Titel die größte Schrift. Dann folgt der Preis an zweiter Stelle. Beschreibung und technische Daten halten Sie ruhiger. So wissen Besucher sofort, wohin sie schauen sollen.

Erzeugen Sie die Hierarchie über Größe und Gewicht, nicht über viele Schriftfamilien. Konkret reichen normal und fett für die meisten Shops. Zur Seitenstruktur lesen Sie auch Produktseite im Onlineshop optimieren.

Halten Sie außerdem die Variantenauswahl lesbar. Labels für Größe, Farbe und Kapazität sind Tippflächen. Also führt ein winziges Größenlabel zu Fehlbestellungen. Geben Sie diesen Labels deshalb dieselbe klare Größe wie dem Fließtext.

Serifen oder serifenlos: Was passt zu Schriftarten für Onlineshops?

Einen allgemeinen Sieger gibt es allerdings nicht. Für das Lesen am Bildschirm fahren die meisten Shops mit einer serifenlosen Fließtextschrift sicherer. Serifenschriften können Überschriften Charakter geben. Entscheidend ist, dass die Schrift in Ihren echten Bildschirmgrößen sauber wirkt und zur Zielgruppe passt.

Serifenlose Schriften haben weniger feine Details, daher bleiben sie auf kleinen Displays scharf. Serifenschriften vermitteln Eleganz, Handwerk oder Tradition, zum Beispiel bei Luxus, Handgemachtem und Büchern. Eine dünne Serifenschrift in kleiner Größe ist im Fließtext allerdings riskant.

Stattdessen entscheiden Sie nach Produktart und nicht nur nach Geschmack. Die folgende Tabelle gibt einen groben Rahmen.

Also nehmen Sie die Tabelle als Ausgangspunkt. Testen Sie danach das fertige Paar neben Ihren eigenen Produktfotos. Dort sehen Sie sofort, ob Bild und Text zusammenpassen.

Warum sind Umlaute und Sonderzeichen so wichtig?

Fehlt einer Schrift ein Zeichen, setzt der Browser für dieses Zeichen eine Ersatzschrift ein. Dasselbe Wort zeigt dann zwei Schriften, daher wirkt die Seite defekt. Das trifft jeden Shop, der mehrsprachig verkauft, etwa für deutsche, türkische, polnische oder spanische Kundschaft.

Nach MDN liegen türkische Buchstaben wie ğ, ş, ı, İ, ç, ö und ü in Latin Extended A (U+0100 bis U+017F) und im Latin 1 Bereich. Prüfen Sie daher, ob eine Schrift Latin Extended unterstützt. Mehr dazu in der MDN Dokumentation zu unicode-range.

Zunächst nutzen Sie für jede Verkaufssprache einen Testsatz. Für Deutsch eignet sich: "Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich." Für Türkisch: "Pijamalı hasta yağız şoföre çabucak güvendi." Lassen Sie den Satz durch Produktnamen, Menüs und Preisschilder laufen.

Zudem geht das Problem über die Optik hinaus. Ein fehlendes Zeichen stört auch die Suchleiste und die Filter. Testen Sie Sonderzeichen deshalb auch im Warenkorb und im Checkout, nicht nur auf der Startseite.

Wie lösen Sie Probleme mit Großbuchstaben und ß?

Legen Sie die Seitensprache im HTML fest und überlassen Sie CSS die Schreibweise. Mit lang="de" beachtet der Browser die deutschen Regeln, wenn Sie text-transform: uppercase nutzen. Ohne Sprachangabe kann in einem Aktionsbanner ein falscher Buchstabe stehen.

Zum Beispiel wandelt das "ß" bei Großschreibung je nach Browser in "SS" um. Prüfen Sie daher, ob Ihre Schrift ein großes "ẞ" kennt, wenn Sie es bewusst nutzen wollen. Konkret testen Sie Kategorienamen wie "Straßen" in Großbuchstaben.

Das gilt vor allem für mehrsprachige Shops. Geben Sie jedem Sprachbereich ein eigenes lang Attribut. Sonst also wendet der Browser eine einzige Regelsammlung auf alle Sprachen an.

Ergänzen Sie diese Punkte in Ihrer Liste:

• Haben Sie die Hauptsprache der Seite mit dem lang Attribut gesetzt?
• Zeigen Großbuchstaben die richtigen Umlaute?
• Enthält die Schrift das Währungssymbol, etwa €, £ oder ₺?
• Sieht ß in Überschriften und Bannern richtig aus?

Ein kleiner Fehler im Sale Banner wirkt harmlos. Trotzdem beeinflusst er, wie Besucher die ganze Marke beurteilen.

Wie viele Schriftarten darf ein Onlineshop nutzen?

Für die meisten Shops genügen zwei Schriften: eine für Überschriften und eine für den Fließtext. Sogar eine einzige Familie mit mehreren Schnitten kann reichen. Jede weitere Schrift kostet Ladezeit und erzeugt visuelles Rauschen.

Folgen Sie einer einfachen Paarungsregel. Wählen Sie dann eine neutrale Schrift und eine mit Charakter. Denn zwei charakterstarke Schriften konkurrieren miteinander. Zum Beispiel kombinieren Sie eine geometrische Überschriftschrift mit einer schlichten Textschrift.

Hat Ihre Marke schon eine Hausschrift, starten Sie daher dort. Allerdings sind Schriften aus Markenrichtlinien nicht immer fürs Web gebaut. Wählen Sie dann eine nahe Web Schrift. Bei der Markenseite hilft unsere Leistung Markenidentität.

Behandeln Sie das Schriftgewicht ebenfalls als Designentscheidung. Eine halbfette Überschrift mit normalem Fließtext bringt oft genug Kontrast. Extraleichte und extrafette Schnitte bedeuten zusätzliche Dateien, daher lassen Sie sie weg, wenn Sie sie nicht brauchen.

Welche Schrifteigenschaften sind für Preise und Zahlen wichtig?

Preise sind der meistgelesene Text im Shop, daher müssen Zahlen klar und bündig stehen. Tabellenziffern geben jeder Ziffer dieselbe Breite. Somit bleiben Preisspalten im Warenkorb und in Vergleichstabellen gerade. In CSS schalten Sie sie mit font-variant-numeric: tabular-nums ein.

Manche Schriften nutzen Mediävalziffern, die in der Zeile auf und ab springen. Zum Beispiel sehen sie in einem Roman schön aus. Auf einem Preisschild bremsen sie jedoch das Lesen. Bevorzugen Sie für Preisbereiche Versalziffern gleicher Höhe.

Prüfen Sie außerdem das Währungssymbol. Enthält die Schrift es nicht, nimmt der Browser eine Ersatzschrift, und das Zeichen sieht neben dem Preis fremd aus. Testen Sie €, £, ₺ und $ in einem echten Browser.

Denken Sie an einen Aktionspreis neben einem durchgestrichenen Altpreis. Ist der Unterschied in Größe und Gewicht schwach, zögern Besucher, welcher Preis gilt. Also heben Sie den aktuellen Preis immer stärker hervor.

Wie wirken sich Web Fonts auf die Ladezeit aus?

Denn jede Web Font ist eine weitere Datei zum Herunterladen. Größere Dateien verzögern den Text oder verschieben das Layout, und mobile Besucher spüren das am stärksten. Weil Tempo sowohl die Nutzererfahrung als auch die Suche beeinflusst, ist die Schriftwahl eine Performance Entscheidung.

Die Anleitung web.dev von Google nennt die wichtigsten Schritte: nur WOFF2 nutzen, Schriften auf Teilmengen beschränken, die Zahl der Schriften senken und den passenden font-display Wert wählen. Die ganze Liste lesen Sie bei den web.dev Font Best Practices.

Unser Beitrag Wie beeinflusst die Ladezeit das SEO zeigt das größere Bild. Bilder wiegen oft mehr als Schriften, daher lohnt sich auch Bilder für die Website optimieren.

In der Praxis listet unser Team zunächst alle Schriftdateien eines Shops auf. Oft liegen einige Schnitte ungenutzt im Projekt. Sie zu entfernen spart also Datenvolumen und kostet kein Design.

Sollten Sie font-display swap oder optional nutzen?

Wählen Sie optional, wenn Tempo zuerst kommt, und swap, wenn die Markenschrift zuerst kommt. Laut web.dev sorgt optional dafür, dass Text in etwa 100 Millisekunden erscheint und das Layout nicht springt. Dafür nutzt die Seite die Web Font womöglich gar nicht. Swap zeigt den Text sofort und tauscht ihn, sobald die Schrift da ist.

Entscheiden Sie deshalb nach Seitentyp. Auf Produktlisten, wo Tempo kritisch ist, passt optional. Auf einer markengeprägten Landingpage sichert swap die Schrift. In beiden Fällen wählen Sie eine Ersatzschrift, die der Web Schrift ähnelt.

Zum Angleichen der Ersatzschrift nutzen Sie CSS Angaben wie size-adjust. web.dev empfiehlt das, um den Sprung beim Tausch zu verringern. Somit springt der Bildschirm selbst bei swap kaum noch.

Wie funktionieren WOFF2 und Subsetting?

WOFF2 ist das empfohlene Format. web.dev nennt, dass WOFF2 etwa 30 Prozent besser komprimiert als WOFF und inzwischen überall läuft. Sie brauchen also keine älteren Formate. Liefern Sie WOFF2 aus und lassen Sie den Rest weg.

Subsetting behält nur die Zeichen, die Sie nutzen. Für einen deutschen oder türkischen Shop deckt Basis Latin plus Latin Extended A meist alles ab. Zeichen für Kyrillisch oder Griechisch verschwinden aus der Datei, und sie wird kleiner.

Gehen Sie so vor:

• Prüfen Sie, ob die Lizenz Subsetting erlaubt.
• Legen Sie die nötigen Unicode Bereiche fest.
• Erzeugen Sie WOFF2 Dateien mit einem Subsetting Werkzeug.
• Deklarieren Sie unicode-range in @font-face.
• Kontrollieren Sie Umlaute und Sonderzeichen im Browser.

Beachten Sie zuerst die Lizenz. Denn manche Schriften verbieten veränderte Dateien. Offene Lizenzen erlauben Subsetting meist, dennoch sollten Sie den Lizenztext lesen. Aktualisieren Sie die Teilmenge außerdem, sobald Sie eine neue Sprache oder ein neues Währungssymbol ergänzen.

Lohnen sich variable Schriften im Onlineshop?

Ja, wenn Sie mehrere Schnitte nutzen. web.dev erklärt, dass eine variable Schrift viele Stile in einer Datei bündelt. Sie laden also eine Datei statt getrennter Dateien für normal, halbfett und fett.

Nutzen Sie dagegen nur einen Schnitt, ist somit der Gewinn klein. Eine variable Datei kann sogar mehr wiegen als eine statische. Zählen Sie daher zunächst, welche Schnitte Sie wirklich brauchen. Die meisten Shops brauchen zwei oder drei.

Dann vergleichen Sie die Dateigrößen, bevor Sie entscheiden. Prüfen Sie außerdem, ob die variable Version Ihre Sonderzeichen enthält. Manche Builds liefern nur Basis Latin, und Umlaute fehlen dann.

Google Fonts oder eigener Server: Was ist besser?

Beide Wege funktionieren, und die Antwort hängt von Ihrem Aufbau ab. Google Fonts ist einfach und bietet eine riesige Auswahl. Laut web.dev brauchen Sie dafür zwei Preconnect Hinweise: einen zu fonts.googleapis.com und einen mit crossorigin zu fonts.gstatic.com.

Zudem spart selbst hosten eine Drittverbindung. Allerdings warnt web.dev, dass Self Hosting nur mit CDN und HTTP/2 besser läuft. Messen Sie also, bevor Sie wechseln, statt es anzunehmen.

Sprechen Sie mit Ihrem Team auch über den Datenschutz. Anfragen an einen externen Schriftanbieter spielen in manchen rechtlichen Prüfungen eine Rolle, vor allem in der EU. Lassen Sie sich dazu rechtlich beraten. Technisch testen Sie beide Wege und lassen die Zahlen entscheiden.

Wie beeinflusst das Laden von Schriften die Core Web Vitals?

Schriftladen berührt zwei Kennzahlen: LCP und CLS. Nutzt Ihr größter Textblock eine Web Font, verzögert eine späte Schrift den LCP. Haben Ersatz und Web Schrift unterschiedliche Maße, springt der Inhalt beim Tausch, und der CLS steigt.

Machen Sie die wichtige Schrift daher früh auffindbar. web.dev empfiehlt, @font-face Regeln im Head zu platzieren und Preload mit Bedacht zu nutzen. Preload nimmt dem Browser Ressourcen für andere Dateien. Markieren Sie deshalb nur die ein oder zwei wichtigsten Schriften.

Wie Sie die Kennzahlen lesen, erklärt unser Beitrag Core Web Vitals: LCP, INP und CLS erklärt. Für Layoutsprünge nutzen Sie Lighthouse. Den Aufbau zeigt Google Lighthouse Test für die Website Performance.

Allerdings genügt ein einzelner Labortest nicht. Echte Nutzerdaten liefern das ehrlichste Bild. Zum Beispiel wirkt eine Seite am Desktop stabil und springt dennoch auf einem langsamen Handy. Wiederholen Sie Tests daher in langsamen Netzen. Außerdem lohnt es sich, den Test nach jeder Designänderung zu wiederholen.

Ist eine Systemschrift eine gute Idee?

Ja, wenn Tempo und Schlichtheit am meisten zählen. web.dev weist darauf hin, dass Systemschriften wie system-ui keinen Download brauchen. Der Text erscheint sofort und ohne Layoutsprung.

Der Nachteil: Das Aussehen ändert sich also je nach Gerät. Android, iOS und Desktop zeigen unterschiedliche Schriften. Das kann Marken mit starker Bildwelt stören. Zudem sehen Kunden dieselbe Seite je nach Gerät leicht anders. Dagegen spielt der Unterschied in preisgetriebenen Shops mit großem Sortiment selten eine Rolle.

Daher können Sie beides mischen. Nutzen Sie die Markenschrift für Überschriften und eine Systemschrift für den Fließtext. So schützen Sie die Marke und senken die Last. Da der Fließtext den Großteil einer Produktseite füllt, ist die Ersparnis spürbar.

Schauen Sie vorher auf Ihre eigenen Besucherdaten. Kommt der Großteil des Verkehrs mobil, bringen Systemschriften mehr Entlastung. Ist Ihre Marke bekannt, rechtfertigt eine eigene Schrift womöglich das Mehrgewicht.

Wie sollten Schriften auf dem Smartphone funktionieren?

Mobile Besucher scrollen schnell, tippen mit dem Daumen und lesen oft im hellen Licht. Die Schrift muss also groß sein, starken Kontrast haben und kurze Zeilen erlauben. Ein dünner Schnitt, der am Desktop elegant wirkt, sieht auf dem Handy blass aus.

Beginnen Sie bei Schriftarten für Onlineshops also mobil zuerst. Lösen Sie die Lesbarkeit auf dem kleinen Bildschirm und passen Sie dann an große Bildschirme an. Die Methode beschreiben wir in Was ist Mobile First Design.

Prüfen Sie am Handy diese Punkte:

• Bricht ein langer Produktname sauber über zwei Zeilen um?
• Erkennen Sie Preis und Rabattlabel auf einen Blick?
• Ist die Beschriftung des Buttons groß genug zum bequemen Tippen?
• Erscheint der Text bei langsamer Verbindung zuerst in der Ersatzschrift?

Denken Sie außerdem daran, dass manche Besucher die Systemschrift vergrößern. Ein Design mit festen Pixelwerten ignoriert diese Einstellung. Nutzen Sie deshalb relative Einheiten und testen Sie die Seite mit vergrößertem Text.

Wie passt die Schriftwahl zur Markenidentität?

Kurz gesagt, eine Schrift ist die Stimme Ihrer Marke. Ein Techshop spricht nüchtern. Eine Boutique spricht wärmer. Diesen Ton hören Sie schon in der Schrift. Geraten Markenstil und Lesbarkeit aber in Konflikt, sollte die Lesbarkeit gewinnen.

Eine praktische Lösung: Nutzen Sie die Markenschrift nur im Logo und in den Hauptüberschriften. In funktionalen Bereichen wie Listen, Filter, Warenkorb und Checkout setzen Sie eine neutrale Schrift ein. So schützen Sie Ihre Identität und halten den Kaufprozess schlicht.

Schließlich prüfen Sie bei Schriftarten für Onlineshops auch die Lizenz. Eine Lizenz für den Druck deckt das Web oft nicht ab. Wer diesen Punkt übergeht, riskiert später rechtlichen Ärger. Kurz gesagt wägen Sie Markenschrift und Performance ab und laden nur nötige Schnitte und Zeichen.

Für die gesamte Bildsprache lesen Sie Bildsprache und UX im Onlineshop optimieren. Möchten Sie die Typografie gemeinsam mit dem restlichen Design klären, unterstützt Sie unsere Leistung Webdesign.

Welche Schriften sind ein sicherer Startpunkt?

Die folgenden Schriften sind bei Google Fonts verbreitet und liefern meist Latin Extended mit. Prüfen Sie sie vor dem Start dennoch selbst mit einem Testsatz. Die Liste mit Schriftarten für Onlineshops ist ein Vorschlag und keine Garantie.

Testen Sie dann jeden Kandidaten mit echten Inhalten. Eine Schrift, die mit Blindtext gut aussieht, kann bei einem echten Produktnamen überlaufen. Legen Sie außerdem die Schnitte vorab fest, damit die Dateizahl klein bleibt.

Beobachten Sie nach dem Start Ihre Daten mindestens eine Woche. Bleiben Warenkorbrate und Absprungrate stabil, ist die Änderung sicher. Halten Sie die Änderung in einer einzigen CSS Datei, damit Sie schnell zurückrollen können.

Kann ein Schriftgenerator die Shopschrift festlegen?

Nein. Ein Schriftgenerator erfüllt eine andere Aufgabe. Unser Schriftgenerator wandelt normalen Text in gestaltete Unicode Zeichen für Social Media Bios und Beiträge um. Das Ergebnis ist keine echte Web Font.

Also nutzen Sie solchen Text nicht im Shop Fließtext. Screenreader lesen die Zeichen womöglich falsch, und Suchmaschinen können den Text nicht sauber auswerten. Definieren Sie Ihre Seitenschrift immer in CSS.

Für eine Kampagnenunterschrift in sozialen Netzwerken können Sie das Werkzeug dennoch nutzen. Lassen Sie Produktnamen und Beschreibungen jedoch als schlichten Text. So schützen Sie Barrierefreiheit und SEO.

Wie sieht die Schrift Checkliste vor dem Start aus?

Zuletzt machen Sie vor dem Start der Schriftarten für Onlineshops eine letzte Prüfung. Die Liste fasst die Kontrollen zusammen, die unser Team bei Shop Starts nutzt. Testen Sie alles auf echten Geräten und mit simulierter langsamer Verbindung.

• Sieht der Testsatz mit Sonderzeichen in jedem Textbereich richtig aus?
• Liefern Sie nur WOFF2 Dateien aus?
• Haben Sie ungenutzte Schnitte und Stile entfernt?
• Haben Sie font-display nach Seitentyp gewählt?
• Nutzt die Ersatzschrift eine size-adjust Angabe?
• Sind Tabellenziffern in Preisbereichen aktiv?
• Erscheinen Umlaute und ß in Großbuchstaben korrekt?
• Haben Sie die Core Web Vitals nach der Änderung neu gemessen?

Beobachten Sie nach dem Start weiter die Conversion. Unser Conversion Rate Rechner zeigt Ihnen die Wirkung einer Schriftänderung. Für umfassende Shop Unterstützung lesen Sie unsere Leistung E-Commerce Beratung.