Beste Google-Schriftkombinationen für Webseiten (6 Paare, die funktionieren)

Eine gute Schriftkombination besteht aus einer Überschriftschrift und einer Textschrift, die sich genug unterscheiden, um als Team zu arbeiten, aber dieselbe Stimmung haben. Ein sicherer Anfang ist eine Serifenschrift für Überschriften mit einer klaren Groteskschrift für den Text, etwa Playfair Display + Source Sans 3. Unten findest du sechs Kombis aus Google Fonts, eine pro Stimmung, und einen kostenlosen Weg, sie auf deiner eigenen Webseite auszuprobieren, bevor du den Code anfasst.

Was zwei Schriften zu einem guten Paar macht

Denk an eine Band. Die Sängerin ist deine Überschriftschrift, die Musiker dahinter sind deine Textschrift, die für die Absätze. Wenn alle gleichzeitig schreien, versteht niemand den Text. Ein gutes Paar hat eine Stimme, die auffällt, und eine, die sie trägt. Drei einfache Regeln bringen dich schon weit:

• Kontrast statt Krach. Wähle zwei Schriften, die sich klar unterscheiden, etwa eine Serifenschrift (Buchstaben mit kleinen Füßchen an den Enden, wie in einem gedruckten Buch) neben einer Groteskschrift (Buchstaben ohne Füßchen). Zwei fast gleiche Schriften wirken einfach wie ein Fehler.
• Eine Stimmung. Eine verspielte, runde Schrift neben einer steifen, förmlichen sendet gemischte Signale. Nimm Schriften, die sich im selben Raum wohlfühlen würden.
• Zwei Schriften, nicht mehr. Eine für Überschriften, eine für den Text. Abwechslung bringst du mit Größe und Schriftschnitt (wie dünn oder dick die Buchstaben sind), nicht mit einer dritten Schrift.

Klassisch: Playfair Display + Source Sans 3

Playfair Display ist eine Serifenschrift mit scharfen, kontrastreichen Strichen, die ein bisschen an eine Zeitungstitelseite erinnert. Source Sans 3 ist eine ruhige, gut lesbare Groteskschrift, die sich nicht in den Vordergrund drängt. Passt zu Blogs, Magazinen, Portfolios und allem, was vertrauenswürdig wirken soll.

Elegant: Cormorant Garamond + Montserrat

Cormorant Garamond ist eine leichte, anmutige Serifenschrift mit langen, feinen Linien. Montserrat ist eine breite, geometrische Groteskschrift, die ihr einen modernen Boden gibt. Denk an Mode, Beauty, Hochzeiten und Restaurants. Ein Tipp: Cormorant wird klein sehr dünn, hebe sie dir also für große Überschriften auf.

Modern: DM Serif Display + DM Sans

DM Serif Display ist eine kräftige Serifenschrift für große Schlagzeilen. DM Sans ist eine klare, freundliche Groteskschrift mit ähnlich weichem Charakter, die beiden passen deshalb gut zusammen. Eine gute Wahl für Startups, Agenturen und Landingpages, die frisch, aber nicht kalt wirken sollen.

Kraftvoll: Oswald + Open Sans

Oswald ist hoch und schmal, sodass viele Wörter in eine Zeile passen und trotzdem laut sind. Open Sans ist breit, offen und sehr gut lesbar, was das ausgleicht. Nützlich für Nachrichten, Sport, Events und überall, wo die Überschrift packen muss.

Technisch: Space Grotesk + Inter

Space Grotesk hat einen leicht eigenwilligen, geometrischen Look, der sagt: „Wir bauen Dinge.“ Inter wurde für Bildschirme entworfen und bleibt auch klein gut lesbar, deshalb trägt sie die Absätze. Ein natürlicher Partner für Software, Dashboards und Entwickler-Tools.

Freundlich: Quicksand + Nunito

Quicksand und Nunito haben beide sanft gerundete Enden, deshalb wirken sie wie füreinander gemacht. Das Ergebnis ist warm und nahbar. Passt zu Bildung, Kindern, Apps, Essen und Community-Seiten.

So testest du eine Kombination auf deiner eigenen Webseite

Über ein Paar zu lesen ist etwas anderes, als es auf den eigenen Seiten mit den eigenen Wörtern zu sehen. FontMee ist eine kostenlose Chrome-Erweiterung, ein kleines Zusatzprogramm, das dem Browser eine neue Funktion gibt, und lässt dich Schriften auf einer echten Webseite ausprobieren, nur auf deinem Bildschirm. Sie hat sogar Kombinationen eingebaut: 32 handverlesene Paare aus Überschrift und Text, darunter alle sechs von oben. Das Video zeigt die Seitenleiste in Aktion.

1. Installiere FontMee. Füge sie im Chrome Web Store hinzu. Sie ist kostenlos und braucht kein Konto. Klicke in Chrome auf das Puzzle-Symbol und hefte sie an, dann ist sie immer einen Klick entfernt.
2. Öffne deine Webseite und klicke auf das FontMee-Symbol. Die Seitenleiste öffnet sich neben der Seite. Du kannst auch Alt + Shift + F drücken. Chromes eigene Seiten (neuer Tab, der Web Store, chrome://-Seiten) lassen sich nicht ändern.
3. Klicke auf den Button Schriftkombinationen. Du siehst eine Liste von Paaren, jedes in seinen echten Schriften gezeigt, mit einem Stimmungsetikett wie Klassisch, Kraftvoll oder Technisch.
4. Drücke Diese Kombi nutzen. Überschriftschrift und Textschrift wechseln sofort auf der Seite. Hast du schon eine Schrift gewählt, schlägt FontMee zuerst Partner dafür vor, unter Für und dem Namen der Schrift.
5. Vergleichen und feinjustieren. Wechsle zwischen Originalschrift und FontMee-Vorschau (oder drücke Alt + Shift + O) und nutze Feinjustieren für Größe, Schriftstärke, Zeilenhöhe und Buchstabenabstand. Probiere zwei, drei Paare, denn die Kombi, die auf der Musterkarte gewinnt, gewinnt nicht immer auf deiner Seite. Auf Seite behalten merkt sich deine Wahl bei jedem Besuch, und Alles zurücksetzen stellt die Seite wieder her.

Vier Dinge, die du vor der Entscheidung prüfen solltest

• Nimm deine eigenen Wörter. Ein Paar, das bei einem kurzen Slogan großartig aussieht, kann bei deinen echten Produktnamen oder einem langen Absatz anders wirken.
• Schau dir kleinen Text an, auch auf dem Handy. Fließtext wird viel häufiger gelesen als Überschriften, er muss also auch klein angenehm sein.
• Prüfe die Buchstaben, die du brauchst. Akzente wie ł, č und ş sowie kyrillische oder vietnamesische Buchstaben stecken nicht in jeder Schrift. FontMee hat einen Schriftsystem-Filter, der nur Schriften mit den Buchstaben zeigt, die du brauchst.
• Prüfe die Lizenz. Google Fonts sind Open Source und für kommerzielle Nutzung frei, andere Schriften vielleicht nicht.

Ist es deine eigene Webseite? Dann ist das Ausprobieren nur die halbe Arbeit. Wenn dir ein Paar gefällt, drücke CSS kopieren und füge die Regeln in das Stylesheet deiner Seite ein, die Datei, die bestimmt, wie deine Seite aussieht (in WordPress unter Design, Customizer, Zusätzliches CSS). FontMee zeigt außerdem die Lizenz jeder Schrift und kann ein ZIP mit den Schriften zum Selbsthosten laden, sodass die Browser deiner Besucher sie von deinem eigenen Server holen statt von Google. Eine Seite braucht außerdem ein Zuhause, und ein Baukasten ist der schnellste Weg dorthin, ganz ohne Code.

Hol dir die Erweiterung

FontMee ist kostenlos, mit über 1.900 Schriften, 32 fertigen Kombinationen, CSS kopieren und dem Hochladen eigener Schriften. Kein Konto, kein Abo. Füge sie im Chrome Web Store hinzu oder lies zuerst die FontMee-Seite.

Gut zu wissen, bevor du loslegst

FAQ