Die wichtigsten Regeln für lesbare Webschrift
Serife oder Sans-Serif – was passt wann?
Die Frage, ob Serifenschriften oder serifenlose Fonts besser für Websites geeignet sind, hat keine universelle Antwort. Es kommt auf die Marke an. Eine Anwaltskanzlei oder ein Verlag kann wunderbar mit einer Serifenschrift wie Lora oder Playfair Display arbeiten – beide vermitteln Seriosität und einen klassischen Charakter. Ein Startup oder Kreativstudio wirkt in einer cleanen Sans-Serif wie Inter oder DM Sans moderner und klarer.
Was nie funktioniert: eine Schrift rein nach persönlichem Geschmack zu wählen, ohne zu fragen, welche Wirkung sie bei der Zielgruppe erzeugt. Schriften kommunizieren, bevor ein einziges Wort gelesen wird.
Schriftpaarungen: Was gut zusammengeht
Klassische Kombinationen funktionieren, weil sie Kontrast schaffen, ohne zu kollidieren. Bewährt haben sich:
- Playfair Display + Source Sans Pro – elegant und lesbar, gut für Beratung und Coaching
- Montserrat + Merriweather – modern und warm, ideal für Kreative und Dienstleister
- Inter + Lora – clean und professionell, sehr flexibel einsetzbar
- Nur Inter oder Roboto – eine Schriftfamilie mit verschiedenen Gewichten reicht oft vollständig aus
In Dresdner Kundenprojekten teste ich Schriftpaarungen immer im echten Kontext – mit echten Texten, echten Längen und auf echten Bildschirmgrößen. Im Figma-Entwurf wirkt Typografie oft besser als sie später im Browser tatsächlich ist.
Lesbarkeit ist keine Nebensache
Die häufigsten typografischen Probleme auf realen Websites sind:
- Zu helles Grau auf weißem Hintergrund – Kontrast unter 4,5:1 (WCAG AA)
- Fließtext zu klein: unter 15px auf mobilen Geräten
- Zeilen zu breit: über 80 Zeichen ohne Unterbrechung ermüden das Auge
- Kein Zeilenabstand – Text wirkt gequetscht, das Gehirn muss extra Arbeit leisten
- Zu viele Schriftgewichte und -stile ohne erkennbare Hierarchie
Gute Typografie fällt nicht auf – sie lässt den Inhalt sprechen. Schlechte Typografie macht sich durch Anstrengung bemerkbar: Man merkt, dass man lesen muss, statt lesen zu wollen. Der Zusammenhang mit Barrierefreiheit ist dabei kein Zufall: Lesbarkeit ist immer auch Inklusion.
Schriften datenschutzkonform einbinden
Google Fonts ist bequem, hat aber einen entscheidenden Haken: Beim Laden der Schriften wird die IP-Adresse des Besuchers an Google-Server übertragen – ohne ausdrückliche Einwilligung. Das ist nach DSGVO nicht zulässig und wurde in Deutschland bereits mehrfach abgemahnt und gerichtlich verfolgt.
Die Lösung ist einfach: Schriften lokal einbinden. Die WOFF2-Dateien werden heruntergeladen, auf dem eigenen Server gespeichert und per @font-face im CSS eingebunden. Das ist technisch kein Mehraufwand – und gleichzeitig schneller, weil kein externer Server kontaktiert werden muss. Ich binde in allen meinen Projekten Schriften grundsätzlich lokal ein. Mehr zum Thema gibt es im Beitrag Datenschutz auf der Website richtig umsetzen.
Variable Fonts: Mehr Flexibilität, weniger Ladezeit
Variable Fonts vereinen viele Gewichte und manchmal auch Weiten oder Neigungen in einer einzigen Datei. Statt vier Dateien (Regular, Italic, Bold, Bold Italic) lädt der Browser nur eine – was die Performance messbar verbessert. Ein weiterer Vorteil: Achsenwerte lassen sich per CSS animieren, z. B. für subtile hover-Effekte auf Überschriften.
Beliebte Variable Fonts mit breiter Browserunterstützung: Inter, DM Sans, Fraunces, Recursive. Alle sind kostenlos, offen lizenziert und dürfen lokal eingebunden werden.
Typografie funktioniert nie isoliert – sie ist Teil der visuellen Sprache einer Marke. Wie Farbpsychologie und Schriftwahl zusammenwirken, beeinflusst, wie dein Unternehmen wahrgenommen wird – noch bevor jemand einen Text zu Ende gelesen hat.
