Die kurze Antwort
Eine passende Website-Schrift ist gut lesbar, unterstützt den Charakter deines Unternehmens und funktioniert auf großen und kleinen Bildschirmen. Meist reichen eine Schriftfamilie oder zwei sinnvoll kombinierte Schriften aus. Entscheidend sind außerdem passende Größen, Zeilenabstände, Kontraste, verfügbare Schriftschnitte, die Lizenz und eine technisch saubere Einbindung.
Woran erkennst du, dass die Schrift auf deiner Website nicht mehr passt?
Vielleicht stört dich etwas an deiner Website, ohne dass du sofort benennen kannst, was es ist. Die Schriften wirken unruhig, Überschriften sehen auf jeder Seite anders aus oder der Fließtext ist auf dem Smartphone anstrengend zu lesen.
Typische Hinweise sind:
→ Auf verschiedenen Seiten tauchen unterschiedliche Schriftarten, Größen und Schriftschnitte auf.
→ Überschriften und Fließtext lassen sich optisch kaum unterscheiden.
→ Die Schrift wirkt verspielt, technisch oder streng, obwohl dein Unternehmen inzwischen ganz anders auftritt.
→ Texte sind zu klein, zu hell oder zu dicht gesetzt.
→ Auf dem Smartphone brechen Überschriften ungünstig um oder einzelne Wörter ragen aus dem sichtbaren Bereich.
→ Für Navigation, Buttons und Text fehlen klare Regeln.
Ein einzelner Ausreißer lässt sich meist schnell korrigieren. Wenn sich diese Punkte durch die ganze Website ziehen, fehlt häufig ein verbindliches typografisches System.
Was steckt tatsächlich hinter einer unruhigen Typografie?
Die Schriftart ist nur ein Teil der Typografie. Ebenso wichtig sind Schriftgröße, Zeilenhöhe, Zeilenlänge, Abstände, Kontrast und die Frage, welche Texte wie stark hervorgehoben werden.
Gerade auf selbst erstellten oder über Jahre ergänzten Websites kommen nach und nach neue Einstellungen hinzu. Eine Überschrift wird hier größer gemacht, dort bekommt ein Absatz eine andere Schrift und beim nächsten Baukasten-Element gelten wieder eigene Vorgaben. Jede einzelne Entscheidung kann zunächst harmlos wirken. Zusammen entsteht ein Auftritt, der unruhig und schwer steuerbar wird.
Beim Projekt Fühlenswert hatte Corinna ihre Website selbst mit einem Baukasten erstellt. Im Website-Check zeigte sich unter anderem, dass Schriften, Größen und Hervorhebungen nicht einheitlich eingesetzt waren. Die Typografie war allerdings nur ein Teil des Gesamtbildes. Nach dem Check wurde die Website deshalb umfassender überarbeitet und nicht lediglich eine neue Schrift ausgewählt.
Das ist ein wichtiger Unterschied: Wenn Angebot, Inhalte und Seitenstruktur nicht mehr tragen, löst ein neuer Font das Problem nicht. Er verschönert höchstens die Oberfläche.
Nach welchen Kriterien solltest du Schriftarten für Websites auswählen?
1. Passt die Wirkung zum heutigen Unternehmen?
Schriften lösen Assoziationen aus. Eine Serifenschrift kann klassisch, hochwertig oder redaktionell wirken. Eine serifenlose Schrift kann sachlich, reduziert, technisch oder freundlich erscheinen. Eine Handschrift kann persönlich wirken.
Feste Regeln wie „Serifenschriften schaffen Vertrauen“ greifen trotzdem zu kurz. Farbe, Bilder, Weißraum, Text und Schriftgrößen verändern den Gesamteindruck erheblich.
Beispiel: Eine Finanzberatung kann mit einer Serifenschrift sehr traditionell auftreten. Mit großzügigen Abständen, klaren Farben und kurzen Überschriften kann dieselbe Schriftfamilie deutlich zeitgemäßer wirken.
Für dich bedeutet das: Beschreibe zuerst mit zwei oder drei konkreten Eigenschaften, wie dein Unternehmen heute auftreten soll. Prüfe anschließend, ob die Schrift diese Wirkung unterstützt.
2. Bleibt der Text auf jedem Bildschirm gut lesbar?
Eine Schrift muss im Fließtext, in Überschriften, Buttons und Navigation funktionieren. Eine eindrucksvolle Überschrift auf dem Laptop reicht dafür nicht aus.
Beispiel: Dünne, eng laufende Buchstaben können in einer großen Überschrift elegant aussehen. Auf einem Smartphone wird derselbe Schnitt bei kleiner Größe schnell mühsam zu lesen.
Für dich bedeutet das: Teste die Schrift mit echten Texten und auf mehreren Bildschirmgrößen. Prüfe kurze und lange Überschriften, Absätze, Buttons sowie kleine Zusatzinformationen.
3. Stimmen Größe, Zeilenhöhe und Textbreite?
Zwei Schriften wirken bei derselben eingestellten Größe nicht automatisch gleich groß. Deshalb gibt es keinen Pixelwert, der für jede Website und jede Schrift passt.
Auch Zeilenhöhe und Textbreite beeinflussen das Lesen. Zu enge Zeilen wirken gedrängt. Sehr lange Zeilen erschweren es dem Auge, den Anfang der nächsten Zeile zu finden.
Beispiel: Ein Fließtext kann mit 18 Pixel gut lesbar sein und trotzdem anstrengend wirken, wenn er fast über die gesamte Bildschirmbreite läuft.
Für dich bedeutet das: Beurteile Schriftgröße, Zeilenabstand und Textbreite immer zusammen. Verlasse dich dabei nicht allein auf den Wert im Website-Baukasten.
4. Ist der Kontrast ausreichend?
Hellgrauer Text auf weißem Hintergrund wirkt auf einem Designentwurf oft zurückhaltend. Für viele Menschen ist er schlicht schwer zu lesen.
Die WCAG empfehlen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1. Für großen Text gilt unter bestimmten Voraussetzungen ein Mindestwert von 3 zu 1.
Beispiel: Ein warmer Grauton kann auf einem weißen Hintergrund zur Gestaltung passen. Ist er zu hell, verlieren längere Texte deutlich an Lesbarkeit.
Für dich bedeutet das: Prüfe den Kontrast mit einem Contrast Checker. Verlass dich nicht nur auf deinen eigenen Bildschirm und deine persönliche Wahrnehmung.
5. Brauchst du wirklich mehrere Schriftarten?
Für viele Unternehmenswebsites reicht eine gut ausgebaute Schriftfamilie. Unterschiedliche Größen und Schriftschnitte schaffen bereits eine klare Hierarchie. Eine zweite Schrift kann sinnvoll sein, wenn sie eine eigene Aufgabe übernimmt.
Beispiel: Eine charaktervolle Serifenschrift kennzeichnet Überschriften. Eine ruhige serifenlose Schrift übernimmt Fließtext, Navigation und Buttons.
Für dich bedeutet das: Gib jeder Schrift eine feste Aufgabe. Wenn zwei Schriften fast gleich aussehen oder dieselbe Funktion erfüllen, bringt die zweite meist nur zusätzliche Unruhe.
6. Sind die benötigten Schriftschnitte vorhanden?
Regular, Medium, SemiBold, Bold, Light, ExtraLight und Italic: Viele Schriftfamilien bieten eine lange Liste an Varianten. Deine Website braucht davon in der Regel nur einen kleinen Teil.
Beispiel: Für Fließtext, Hervorhebungen und Überschriften können Regular, SemiBold und Bold ausreichen. Jeder weitere geladene Schnitt muss einen erkennbaren Zweck erfüllen.
Für dich bedeutet das: Lege vor der technischen Einbindung fest, welche Schriftschnitte du tatsächlich verwendest. Das hält die Gestaltung übersichtlich und vermeidet unnötige Schriftdateien.
7. Darfst und kannst du die Schrift verwenden?
Eine herunterladbare Schrift ist nicht automatisch für jede geschäftliche Website freigegeben. Anbieter unterscheiden zum Beispiel zwischen Desktop-, Webfont- und App-Lizenzen. Prüfe daher die Bedingungen der konkreten Schrift und ihrer Quelle.
Die Schriften im Verzeichnis von Google Fonts stehen unter Open-Source-Lizenzen und dürfen auch kommerziell verwendet werden. Das beantwortet jedoch noch nicht die Frage der technischen Einbindung. Wenn du die Google Fonts API nutzt, lädt der Browser Stylesheet und Schriftdateien von Google-Servern. Alternativ können geeignete Dateien auf dem eigenen Webspace liegen.
Für dich bedeutet das: Prüfe Lizenz, Dateiformate und Einbindung, bevor du dich endgültig auf eine Schrift festlegst. Bei Unsicherheit lass die technische und datenschutzrechtliche Umsetzung fachlich prüfen.
Eine neue Schrift repariert keine alte Website
Wenn Angebot, Texte und Seitenstruktur nicht mehr zum Unternehmen passen, bleibt das Problem auch mit einer schöneren Schrift bestehen. Typografie kann Inhalte ordnen und die gewünschte Wirkung unterstützen. Sie kann jedoch nicht erklären, was das Unternehmen heute anbietet oder für wen das Angebot gedacht ist.
Welche Lösung passt zu deiner Website?
| Ausgangslage | Sinnvolle Lösung | Worauf du achten solltest |
|---|---|---|
| Die Website wirkt grundsätzlich stimmig, einzelne Texte sind uneinheitlich formatiert. | Bestehende Typografie bereinigen | Größen, Abstände und Schriftschnitte vereinheitlichen |
| Die Schrift passt, aber Hierarchie und Lesbarkeit fehlen. | Typografisches System definieren | Regeln für H1 bis H3, Fließtext, Links und Buttons festlegen |
| Die bisherige Schrift wirkt nicht mehr wie das heutige Unternehmen. | Schrift neu auswählen | Wirkung, Lesbarkeit, Lizenz und technische Einbindung gemeinsam prüfen |
| Schriften, Inhalte, Navigation und Angebote sind über Jahre gewachsen. | Website als Ganzes prüfen | Erst klären, welche Teile erhalten bleiben und welche neu geordnet werden müssen |
Was kannst du jetzt konkret tun?
Öffne deine Website einmal auf dem Laptop und einmal auf dem Smartphone. Schau dir Startseite, Angebotsseite und Kontaktseite an. Beantworte dabei diese fünf Fragen:
- Werden dieselben Schriftarten und Schriftschnitte durchgängig verwendet?
- Erkennst du auf jeder Seite sofort, was Überschrift, Zwischenüberschrift und Fließtext ist?
- Kannst du alle Texte ohne Zoomen und ohne Anstrengung lesen?
- Passt die Wirkung der Schrift zu deinem heutigen Angebot und deinen heutigen Kunden?
- Ist die Typografie das eigentliche Problem oder wirkt die gesamte Website überholt und uneinheitlich?
Wenn du bei den ersten drei Punkten hängenbleibst, kann eine typografische Bereinigung genügen. Wenn auch Angebot, Inhalte und Seitenaufbau nicht mehr stimmen, lohnt sich der Blick auf die Website als Ganzes.
Häufige Fragen zu Schriftarten für Websites
Welche Schrift eignet sich am besten für eine Website?
Die beste Website-Schrift ist gut lesbar, passt zum Unternehmen und bietet alle benötigten Zeichen und Schriftschnitte. Eine pauschal beste Schrift gibt es deshalb nicht. Für längere Texte eignen sich viele Serif- und Sans-Serif-Schriften. Entscheidend ist, wie die konkrete Schrift in Größe, Zeilenabstand, Kontrast und auf kleinen Bildschirmen funktioniert.
Wie viele Schriftarten sollte eine Website verwenden?
Für die meisten Unternehmenswebsites reichen eine Schriftfamilie oder zwei aufeinander abgestimmte Schriften. Eine einzige Familie kann durch verschiedene Größen und Schnitte bereits eine klare Hierarchie erzeugen. Bei zwei Schriften sollte jede eine feste Aufgabe haben, etwa eine für Überschriften und eine für Fließtext, Navigation und Buttons.
Welche Schriftgröße ist für Fließtext sinnvoll?
Eine feste Mindestgröße passt nicht zu jeder Schrift, weil Buchstaben bei demselben Pixelwert unterschiedlich groß wirken. Häufig liegt gut lesbarer Fließtext ungefähr im Bereich von 16 bis 20 Pixeln. Prüfe zusätzlich Zeilenhöhe, Textbreite und Kontrast und teste die Darstellung auf Smartphone, Tablet und großem Bildschirm.
Darf ich Google Fonts auf einer geschäftlichen Website verwenden?
Google Fonts stehen unter Open-Source-Lizenzen und dürfen auch kommerziell verwendet werden. Zusätzlich musst du entscheiden, wie die Schrift technisch eingebunden wird. Beim Abruf über die Google Fonts API verbindet sich der Browser mit Google-Servern. Eine lokale Einbindung kann diese externe Verbindung vermeiden. Lass Lizenz und Datenschutz im Zweifel fachlich prüfen.
Wann reicht es nicht, nur die Schrift auszutauschen?
Ein Schrifttausch reicht nicht, wenn auch Angebot, Texte, Navigation und Seitenstruktur nicht mehr zum heutigen Unternehmen passen. Dann ist die uneinheitliche Typografie nur ein sichtbares Symptom. Prüfe zuerst, welche Informationen fehlen und welche Seiten noch eine klare Aufgabe haben. Danach lässt sich entscheiden, ob eine Überarbeitung genügt oder ein Relaunch sinnvoller ist.
Fazit
Behalte deine bisherige Schrift, wenn sie gut lesbar ist, zu deinem heutigen Unternehmen passt und auf der Website konsequent eingesetzt wird. Überarbeite die Typografie, wenn Regeln für Größen, Abstände und Hervorhebungen fehlen. Wenn auch Angebote, Texte und Navigation nicht mehr stimmen, sollte die Entscheidung größer ausfallen als die Wahl eines neuen Fonts.
Wenn du deine bestehende Website gerade genauer ansiehst
Ist die Schrift wirklich das Problem?
Wenn deine Website an mehreren Stellen nicht mehr zu deinem Unternehmen passt, prüfe ich im persönlichen Website-Check das Gesamtbild: Inhalte, Struktur, Gestaltung, Technik und Auffindbarkeit. Du bekommst eine priorisierte Einschätzung und weißt anschließend, welche Änderungen sinnvoll sind und ob eine Überarbeitung ausreicht.