Schriftarten kombinieren: 8 schöne Paare für Websites und Marken

Was eine gute Schriftkombination ausmacht

Zwei schöne Schriften ergeben noch kein gutes Paar. Entscheidend ist, dass beide eine klare Aufgabe haben. Die Überschrift darf Aufmerksamkeit erzeugen, während der Fließtext möglichst unauffällig lesbar bleibt. Sind sich zwei Schriften zu ähnlich, wirkt die Mischung schnell zufällig. Sind beide sehr laut, konkurrieren sie miteinander.

Ein zuverlässiger Ausgangspunkt ist die Kombination aus Serif und Sans Serif. Dabei zählt aber nicht nur die Kategorie: Auch x-Höhe, Buchstabenbreite, Rundungen und Strichstärken sollten miteinander harmonieren. Mehr Grundlagen zu Hierarchie, Zeilenlänge und Lesbarkeit findest du im Beitrag Typografie im Webdesign.

Warum sich hier Schriften wiederholen

Acht Kombinationen müssen nicht sechzehn verschiedene Schriftfamilien bedeuten. Im Gegenteil: Ein kleines, gut ausgewähltes Set ist leichter zu pflegen und lädt schneller. Die Beispiele zeigen deshalb bewusst, wie sich Playfair Display, Fraunces, Lora, Manrope und Montserrat je nach Rollenverteilung unterschiedlich anfühlen.

Für ein echtes Projekt würde ich zuerst die Markenwirkung bestimmen und danach höchstens zwei Familien auswählen. Eine Website benötigt außerdem selten alle verfügbaren Gewichte. Regular, Semibold und eventuell Bold reichen in vielen Fällen aus.

Google Fonts nutzen, ohne Google beim Seitenaufruf zu kontaktieren

„Google Font“ bezeichnet zunächst die Schrift aus dem Katalog – nicht zwingend die Art ihrer technischen Auslieferung. Wird eine Schrift über fonts.googleapis.com oder fonts.gstatic.com eingebunden, stellt der Browser beim Besuch eine Verbindung zu Google her. Bei lokaler Einbindung liegen WOFF2-Datei und CSS dagegen auf dem eigenen Webserver.

@font-face {
  font-family: "Meine Schrift";
  src: url("/fonts/meine-schrift.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

Das Urteil des LG München I vom 20. Januar 2022 wird häufig als Anlass genannt, externe Font-Aufrufe sorgfältig zu prüfen. Die robuste technische Lösung ist eine lokale Bereitstellung, sofern die jeweilige Schriftlizenz dies erlaubt. Das Google-Fonts-Repository weist ausdrücklich darauf hin, die Lizenz jeder Familie einzeln zu lesen. Diese Hinweise ersetzen keine Rechtsberatung.

Schriften lokal und performanceoptimiert einrichten

• WOFF2 verwenden: Das moderne Webformat ist kompakter als TTF oder OTF.
• Nur benötigte Schnitte laden: Nicht vorsorglich neun Gewichte und Kursiven einbinden.
• Variable Fonts prüfen: Sie lohnen sich besonders, wenn mehrere Gewichte tatsächlich gebraucht werden.
• font-display setzen: Text bleibt sichtbar, auch wenn die Webfont noch lädt.
• Preload sparsam nutzen: Nur eine wirklich kritische Schriftdatei vorladen, nicht das gesamte Schriftsystem.
• Zeichensatz begrenzen: Latin statt aller weltweiten Schriftsysteme, wenn das Projekt nur Deutsch und Englisch benötigt.
• Lange cachen: Fontdateien ändern sich selten und eignen sich für eine langfristige Browser-Zwischenspeicherung.
• Layout Shift testen: Fallback und Webfont sollten ähnliche Proportionen haben.

Welche Kombination passt zu welcher Marke?

Serifenschriften wirken nicht automatisch elegant und Sans-Serif-Schriften nicht automatisch modern. Die Wirkung entsteht im Zusammenspiel mit Farbe, Bildsprache, Weißraum und Inhalt. Eine Praxis braucht andere Nähe als ein Tech-Startup; eine Kulturmarke darf typografisch stärker auffallen als ein Formular oder Onlineshop.

Deshalb sollte die Auswahl nie nur anhand einer hübschen Beispielgrafik erfolgen. Teste Navigation, Buttons, lange Absätze, Zahlen, Umlaute und mobile Zeilenumbrüche. Auch ausreichende Größen und Kontraste gehören zur barrierefreien Gestaltung.

Schrift im Logo ist noch keine fertige Wortmarke

Für eine Website kann eine unveränderte Schriftfamilie völlig richtig sein. Bei einem Logo reicht es meist nicht, einen Namen einfach in einer schönen Font zu setzen. Kerning, Buchstabenabstände, Proportionen und einzelne Zeichen müssen sauber angepasst werden. Zusätzlich braucht ein Logo Varianten für kleine Größen, einfarbige Anwendungen und unterschiedliche Hintergründe.

Wie Typografie, Farbe und Logo zu einem verlässlichen System werden, zeige ich auf der Seite zu Corporate Design und Branding. Passende Farbwelten behandeln außerdem die Beiträge zu Farbpsychologie und zu Farbpaletten für Marken mit HEX-Codes.

Quellen und Lizenzen

Technische Hinweise zur Font-Performance orientieren sich an den Empfehlungen von web.dev zur Webfont-Optimierung. Angaben zu Dateien und Lizenzen stammen aus dem offiziellen Google-Fonts-Repository.