Die Schriftart für die Website wirkt, bevor ein Besucher das erste Wort gelesen hat. Eine verspielte Schreibschrift lässt eine Steuerberatung unseriös erscheinen, eine kühle Technikschrift macht eine Konditorei kälter, als sie ist.
Gleichzeitig muss die Schrift auf einem kleinen Handy bei Sonnenlicht noch gut lesbar sein. Dieser Beitrag führt Sie in fünf Schritten zu einer Wahl, die zu Ihnen passt und Ihren Lesern das Lesen leicht macht.
Inhaltsverzeichnis
Schritt 1: Die gewünschte Wirkung festlegen
Beschreiben Sie Ihren Betrieb mit drei Adjektiven, etwa „bodenständig, präzise, freundlich“. Diese Worte sind der Maßstab für jede Schrift, die Sie ansehen. Gibt es schon ein Corporate Design mit festgelegten Schriften, ist die Wahl meist schon getroffen.
| Schriftgruppe | Wirkt oft | Typischer Einsatz |
|---|---|---|
| Serifenlos (Grotesk) | klar, modern, sachlich | Fließtext, Menüs, Buttons |
| Serifenschrift | klassisch, wertig, ruhig | Überschriften, längere Texte |
| Schreib- oder Zierschrift | persönlich, verspielt | nur einzelne Akzente |
Die Tabelle ist eine Faustregel. Innerhalb jeder Gruppe gibt es freundliche und strenge, schmale und breite Schriften.
Schritt 2: Lesbarkeit vor Originalität
Für den Fließtext zählt vor allem, dass sich Buchstaben gut unterscheiden lassen. Ein einfacher Test: Schreiben Sie „Il1 O0 rn m“ in der Schrift. Sehen ein großes I, ein kleines l und die Ziffer 1 gleich aus, wird es bei Telefonnummern und Preisen schwierig.
- offene Buchstabenformen und eine nicht zu kleine x-Höhe (Höhe der Kleinbuchstaben),
- mehrere Schriftschnitte, mindestens normal und fett,
- alle Umlaute, ß und das Euro-Zeichen, auch in Großbuchstaben,
- gute Darstellung auf Windows-Rechnern und älteren Handys.
Schritt 3: Eine Schriftart für die Website oder zwei kombinieren
Für die meisten kleinen Websites reichen eine oder zwei Schriften. Eine bewährte Kombination ist eine Serifenschrift für Überschriften und eine serifenlose Schrift für den Text, oder umgekehrt. Mehr als zwei Familien wirken schnell unruhig und verlängern die Ladezeit.
Vorher und nachher (fiktiv): Eine Physiotherapie-Praxis in Bern nutzte vier Schriften, darunter eine Schreibschrift für ganze Absätze. Nach der Umstellung auf eine Serifenschrift für Überschriften und eine serifenlose Schrift für alles andere wirkte die Seite ruhiger, und Patienten fanden die Öffnungszeiten schneller.
Schritt 4: Größe, Zeilenabstand und Kontrast
Auch die beste Schrift scheitert an zu kleiner Größe oder zu hellem Grau. Als Ausgangspunkt für den Fließtext haben sich etwa 16 bis 18 Pixel bewährt, mit einem Zeilenabstand vom 1,5-Fachen der Schriftgröße.
| Element | Startwert |
|---|---|
| Fließtext | 16–18 px, Zeilenabstand ca. 1,5 |
| Zeilenlänge | etwa 60–80 Zeichen |
| Kontrast normaler Text | mindestens 4,5 : 1 |
Der Kontrastwert stammt aus den Richtlinien für barrierefreie Webinhalte, WCAG 2.1, Kriterium 1.4.3. Mehr dazu, warum das allen Besuchern hilft, lesen Sie unter Barrierefreie Website.
Schritt 5: Lizenz prüfen und lokal einbinden
Prüfen Sie die Lizenz, bevor Sie eine Schrift einsetzen. Viele Schriften sind für Druck lizenziert, aber nicht für die Nutzung als Webfont. Freie Schriften, etwa unter der SIL Open Font License, dürfen Sie in der Regel auch auf Websites verwenden.
Laden Sie Schriften von Ihrem eigenen Server statt von einem fremden Dienst. So werden beim Seitenaufruf keine Daten an Dritte übertragen. Wie das in WordPress geht, zeigt Google Fonts lokal einbinden. Binden Sie nur die Schnitte ein, die Sie wirklich brauchen.
Test auf echten Geräten
Sehen Sie sich die gewählte Schriftart für die Website auf drei Geräten an: Laptop, eigenes Handy, ein älteres Handy aus der Familie. Lesen Sie einen ganzen Absatz, nicht nur die Überschrift. Hinweise für einen strukturierten Test finden Sie in Website mobil testen.
- drei Adjektive für die Wirkung notiert,
- Lesbarkeit mit „Il1 O0“ geprüft,
- höchstens zwei Schriftfamilien,
- Fließtext mindestens 16 px, Kontrast 4,5 : 1,
- Lizenz geklärt, Schrift lokal eingebunden.
Sie möchten Schriften, die zu Ihrem Auftritt passen und technisch sauber laufen? Unser Team für Webseiten berät Sie bei der Auswahl und setzt sie um.