Google-Fonts-Kombinationen: 25 Paare, die funktionieren

Die besten Google-Fonts-Kombinationen stellen eine charakterstarke Überschriftschrift gegen eine ruhige, gut lesbare Textschrift: Fraunces mit Inter, Playfair Display mit Source Sans 3, Space Grotesk mit Inter oder DM Serif Display mit DM Sans. Unten findest du 25 Kombinationen nach Stimmung gruppiert, jeweils mit den Schnitten, die sie tragen, und ihrem Einsatzzweck. Alle sind kostenlos, alle erlauben kommerzielle Nutzung, und alle laden mit einer Codezeile. Wähle zuerst eine Gruppe nach Gefühl, dann ein Paar nach Aufgabe.

So liest du diese Kombinationen

Jedes Paar nennt zuerst die Überschrift, dann den Text. Der Überschriftschnitt ist der für große Größen; Text bleibt bei 400, mit 600 oder 700 zur Betonung. Wenn dir die Überlegung dahinter neu ist: Schriftkombination erklärt, warum Kontrast Ähnlichkeit schlägt, und Serif oder Sans Serif zeigt, was jede Familie mitbringt.

Editorial-Kombinationen: Serifen-Überschrift mit serifenlosem Text

Die klassische Struktur. Eine Serifen-Überschrift bringt Wärme und Autorität; ein serifenloser Text hält langes Lesen am Bildschirm leicht.

Moderne Serifenlose für Tech und Produkt

Für Software, Startups und alles, was aktuell wirken soll. Die Überschrift trägt den Charakter durch Form, Breite oder eigenwillige Details, während der Text ein Arbeitstier ist.

Serifenlose Überschriften mit Serifen-Text

Die umgekehrte Struktur eignet sich fürs lange Lesen: Eine klare serifenlose Überschrift markiert Abschnitte, und ein Serifen-Text wirkt buchig und bremst das Auge angenehm.

Freundliche, runde Kombinationen

Fette Display-Kombinationen für Poster und Social

Schmale und schwere Display-Schriften bringen große Wörter in kleine Ausschnitte, weshalb sie Thumbnails und Poster dominieren. Sie brauchen einen ruhigen Partner. Thumbnail-Text und Schlagzeilenschriften gehen weiter.

Technische und luxuriöse Kombinationen

Fehler, die eine Kombination zerstören

So bindest du eine Google-Fonts-Kombination in deine Website ein

1. 1

   Schnitte wählen

   Meist ein Überschriftschnitt und zwei Textschnitte. Jeder weitere Schnitt ist eine weitere Datei zum Herunterladen.

2. 2

   Embed kopieren

   Wähle die Familien bei Google Fonts aus und kopiere den Link, den es dir gibt, oder passe den Code unten an.

3. 3

   Rollen in CSS festlegen

   Gib Überschriften und Text eigene Variablen für die Schriftfamilie, damit ein späterer Wechsel nur eine Zeile kostet.

4. 4

   Mit echtem Text testen

   Prüfe einen langen Absatz, eine zweizeilige Überschrift und deinen längsten Produktnamen, bevor du dich festlegst.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  :root {
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
  }
  h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
  body { font-family: var(--font-body); font-weight: 400; }
</style>

Google Fonts sind für kommerzielle Nutzung kostenlos, aber lies Schriftlizenzen, bevor du eine änderst oder als Teil eines Produkts verkaufst. Damit die Wahl für eine ganze Marke hält, mach daraus ein Typografiesystem mit benannten Rollen.

Für Social-Posts und Decks legst du dein Paar einmal in einem Gradiently-Markenkit fest (Teil von Pro), das eine Überschrift- und eine Textschrift hält und hochgeladene Schriftdateien akzeptiert, und der Designer nutzt sie, wenn er ein Design aufbaut.