CodeKitHubWas ist dieses Tool?
Font-Pairing bedeutet, zwei (gelegentlich drei) Schriftarten auszuwählen, die gemeinsam auf einer Seite verwendet werden — meist eine für Überschriften und eine für den Fließtext —, damit die Seite eine visuelle Hierarchie erhält, ohne unpassend oder eintönig zu wirken.
Jede Kombination unten zeigt ein live gerendertes Beispiel: die Überschriftschrift oben, die Fließtextschrift darunter, mit den echten Google-Fonts-Dateien — was du siehst, ist genau das, was du auf deiner Website bekommst.
Jede Kombination wird mit einem einsatzbereiten Google-Fonts-`<link>`-Einbettungstag sowie einem passenden CSS-Snippet mit `font-family`-Deklarationen für Überschriften und Fließtext geliefert — beides kopieren, fertig.
Warum sollte man es nutzen?
- 28 handverlesene Kombinationen, keine automatisch generierte Liste — jede wurde ausgewählt, weil sich die beiden Schriftarten wirklich gut ergänzen.
- Live-Vorschau: Jede Kombination wird mit den echten, von Google Fonts geladenen Schriftarten gerendert, nicht mit einem statischen Bild oder einer Vermutung anhand des Schriftnamens.
- Filtern nach Stimmung — Modern, Elegant, Mutig, Minimalistisch, Klassisch —, um schnell das passende Gefühl für dein Projekt zu finden.
- Ein-Klick-Kopie sowohl für das `<link>`-Einbettungstag als auch für die CSS-`font-family`-Regeln.
- Kostenlos, läuft im Browser, kein Konto oder Login erforderlich.
Anleitung
- Klicke optional auf einen Stimmungsfilter (Modern, Elegant, Mutig, Minimalistisch, Klassisch), um die Liste einzugrenzen, oder belasse „Alle“ ausgewählt, um alle zu durchstöbern.
- Scanne die Live-Vorschaukarten — die obere Zeile zeigt die Überschriftschrift, die untere die Fließtextschrift.
- Öffne eine Kombination, die dir gefällt, und klicke, um den Abschnitt mit dem Einbettungscode aufzuklappen.
- Kopiere das `<link>`-Tag in den `<head>` deines HTML und das CSS-Snippet in dein Stylesheet, um die Schriftarten auf deine Überschriften und deinen Fließtext anzuwenden.
Beispiel
Eingabe
Eleganter BlogAusgabe
Playfair Display (Überschriften) + Source Sans Pro (Fließtext)Der Filter „Elegant“ zeigt kontrastreiche Serifen-Überschriften kombiniert mit einem klaren, gut lesbaren serifenlosen Fließtext — eine gängige Kombination für redaktionelle Layouts und Blogs.
Prinzipien einer guten Font-Kombination
- Kontrast statt Ähnlichkeit: Zwei Schriftarten, die fast identisch aussehen (etwa zwei ähnliche geometrische serifenlose Schriften), wirken eher wie ein Versehen als wie eine bewusste Entscheidung. Kombiniere eine Serifenschrift mit einer serifenlosen, oder eine schwere Display-Schrift mit einer leichteren Textschrift, damit der Unterschied als beabsichtigt gelesen wird.
- x-Höhe und Proportionen angleichen: Schriften, deren Kleinbuchstaben eine ähnliche optische Höhe haben, wirken auf derselben Seite zusammengehörig, selbst wenn sich ihre Stile unterscheiden — eine nicht passende x-Höhe ist einer der häufigsten Gründe, warum eine Kombination „nicht stimmt“.
- Beschränke dich auf zwei Familien (gelegentlich drei): eine für Überschriften, eine für Fließtext und höchstens eine dritte für Akzente wie Buttons oder Labels. Mehr als das lässt die Seite unüberlegt wirken.
- Denke an die Stimmung, nicht nur an die Form: Eine runde, freundliche serifenlose Schrift kombiniert mit einer formellen Serifenschrift sendet widersprüchliche Signale, selbst wenn die Buchstabenformen technisch zusammenpassen — wähle Schriften, die auch im Ton, nicht nur in der Struktur, übereinstimmen.
- In echten Größen testen: Eine Kombination, die in einer großen Vorschau großartig aussieht, kann bei Fließtextgröße an Kontrast verlieren, oder eine Display-Schrift kann bei kleinen Größen unleserlich werden — prüfe immer beide Extreme.
Die richtige Kombination je nach Einsatzzweck wählen
Landingpages und Marketing-Websites profitieren meist von den Filtern „Mutig“ oder „Modern“ — eine starke, kontrastreiche Überschriftschrift zieht oberhalb der Sichtgrenze die Aufmerksamkeit auf sich, kombiniert mit einer klaren, neutralen Fließtextschrift, die längere Texte leicht überfliegbar macht.
Blogs und redaktionelle Inhalte wirken oft am besten mit „Elegant“- oder „Klassisch“-Kombinationen — eine feine Serifen-Überschrift signalisiert eine durchdachte, redaktionell geprägte Stimme, während ein angenehmer Serifen- oder serifenloser Fließtext lange Artikel auch über längere Lesephasen hinweg gut lesbar hält.
E-Commerce- und Produkt-Websites bevorzugen meist „Minimalistisch“-Kombinationen — zurückhaltende, neutrale Schriften lenken den Fokus auf Produktfotos und Preise statt auf die Typografie selbst, was wichtig ist, wenn Dutzende Produktkarten auf einer Seite erscheinen.
Portfolios und kreative Websites haben den größten Spielraum zum Experimentieren — „Mutig“- oder „Elegant“-Kombinationen mit mehr Persönlichkeit funktionieren hier gut, da das Publikum teilweise auch den visuellen Geschmack beurteilen möchte.
Hinweise zu Performance und Lizenzierung
Das eingebettete `<link>`-Tag lädt Schriftarten vom Google-CDN, das schnell und auf vielen Websites, die deine Besucher wahrscheinlich schon besucht haben, bereits im Cache ist — es fügt jedoch eine externe Anfrage hinzu. Für Websites, bei denen jede Millisekunde zählt, entfernt das Herunterladen der Schriftdateien und das Selbst-Hosten (mit manuell gesetztem `font-display: swap`) diese externe Abhängigkeit, allerdings mit etwas mehr Einrichtungsaufwand.
Alle Schriftarten bei Google Fonts sind Open Source und für die kommerzielle Nutzung kostenlos, ohne dass eine Namensnennung erforderlich ist — die Nennung des Schriftgestalters ist aber eine nette Geste, wenn sie leicht umsetzbar ist.
Häufig gestellte Fragen
Was macht zwei Schriftarten zu einer „guten Paarung“?
Gute Kombinationen balancieren Kontrast und Harmonie. Kontrast — eine Serifenschrift mit einer serifenlosen Schrift kombinieren, oder eine fette Display-Schrift mit einer schlichten Fließtextschrift — schafft visuelle Hierarchie, sodass Überschriften und Fließtext klar unterscheidbar sind. Harmonie — ähnliche x-Höhe, vergleichbare Strichstärke und ein gemeinsames Maß an Formalität oder Verspieltheit — verhindert, dass die beiden aneinander vorbeigehen. Die hier vorgestellten Kombinationen wurden unter Berücksichtigung beider Aspekte ausgewählt.
Müssen Überschriften und Fließtext immer unterschiedliche Schriftarten verwenden?
Nein, auch die Verwendung einer einzigen Schriftfamilie für beides (wie die „Rubik + Rubik“-Kombination in diesem Tool) funktioniert gut, solange die Schrift genug Gewichtsvarianten bietet, um Überschriften vom Fließtext zu unterscheiden. Das ist eine gültige, minimalistische Wahl — kein Fehler.
Wie wende ich eine Kombination tatsächlich auf meine Website an?
Kopiere das `<link>`-Einbettungstag in den `<head>` deiner Seite, um die Schriftarten vom Google-CDN zu laden, und kopiere dann das CSS-Snippet in dein Stylesheet — es setzt `font-family` für Überschriften (h1, h2, h3) und für Fließtext (body, p). Passe die CSS-Selektoren an, falls dein Markup abweicht.
Verlangsamt das Laden von Google Fonts meine Website?
Jede zusätzliche Schriftdatei bedeutet eine weitere Netzwerkanfrage und ein gewisses Risiko, das Rendering zu blockieren. Beschränke dich auf ein Überschriftgewicht und ein oder zwei Fließtextgewichte, nutze `display=swap` (bereits im Einbettungscode enthalten), damit der Text während des Ladens der Webfont in einer Ersatzschrift angezeigt wird, und erwäge für Produktions-Websites mit höchsten Geschwindigkeitsansprüchen, die Schriftdateien selbst zu hosten.
Dürfen diese Schriftarten kommerziell kostenlos genutzt werden?
Ja. Alle Schriftarten in Google Fonts, einschließlich aller hier gezeigten Kombinationen, stehen unter der SIL Open Font License oder der Apache License — beide erlauben kostenlose kommerzielle Nutzung, Bearbeitung und Weiterverbreitung ohne Lizenzgebühren.