Schriftpaarung — Kuratierte Google Fonts für Überschrift & Text, Echtzeit-Vorschau & CSS-Kopie

Nach Stimmung filtern

Überschrift — Playfair Display

Fließtext — Inter

Überschrift-Schrift: Playfair Display×Fließtext-Schrift: Inter

Kuratierte Schriftpaarungen(28)

CSS kopieren

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Inter', system-ui, sans-serif; }

Schriften manuell auswählen (optional)

Wähle eine Überschrift- oder Fließtext-Schrift aus der Liste, um die aktuelle Paarung zu überschreiben.

Überschrift-Schrift

Fließtext-Schrift

Anleitung

Filtere nach Stimmungs-Tags (Modern, Elegant, Minimal…) oder wähle direkt aus der Paarungsliste.
Klicke auf eine Paarung, um die Überschrift + Text-Vorschau mit den echten Schriften zu sehen.
Ersetze den Vorschautext durch deinen eigenen Inhalt, um den tatsächlichen Eindruck zu prüfen. Leere das Feld, um zum Standardbeispiel zurückzukehren.
Nutze Mischen, um zufällige Paarungen zu erkunden, oder Tauschen, um Überschrift- und Fließtext-Schrift zu vertauschen.
Speichere Lieblingspaarungen mit dem Stern (nur lokal im Browser, keine Übertragung).
Nach der Entscheidung klicke auf „CSS kopieren“, um den Google-Fonts-Import und font-family auf einmal zu kopieren. Keine Anmeldung nötig.

Was ist Schriftpaarung?

Schriftpaarung bedeutet, zwei komplementäre Schriften zu wählen — eine für Überschriften, eine für den Fließtext. Eine gute Paarung schafft visuelle Hierarchie, verbessert die Lesbarkeit und gibt dem Design eine einheitliche Persönlichkeit. Der häufige Fehler ist, zu viele Schriften zu verwenden; die goldene Regel lautet: zwei Schriften — eine ausdrucksstarke für Überschriften, eine neutrale und lesbare für den Fließtext.

Weise jeder Schrift eine Rolle zu

Die Überschrift-Schrift erregt Aufmerksamkeit und vermittelt Persönlichkeit. Die Fließtext-Schrift sorgt für komfortables Lesen langer Texte. Diese unterschiedlichen Rollen sprechen dafür, Schriften aus verschiedenen Stilfamilien zu wählen.

Schaffe Kontrast

Eine Serif- mit einer Sans-Serif-Schrift zu kombinieren ist ein klassischer Ansatz. Der strukturelle Unterschied zwischen den Stilen verleiht dem Design Kohärenz und Interesse. Vermeide zwei zu ähnliche Schriften, die einen unangenehmen Eindruck erzeugen können.

Beschränke dich auf zwei Schriften

Zwei Schriften reichen. Wenn du unsicher bist, wähle eine ausdrucksstarke Display-Schrift für Überschriften und eine neutrale, lesbare Schrift für den Fließtext.

Erklärung der Stimmungs-Tags

Jede Paarung hat ein bis drei Stimmungs-Tags. Kombiniere Tags (ODER) zum Filtern oder erkunde ohne Filter mit Mischen.

Modern / Minimal / Sauber

Sauberes, zeitgemäßes Erscheinungsbild. Ideal für SaaS, Portfolios und Tech-Seiten.

Elegant / Klassisch / Editorial

Raffinierter, zeitloser Stil. Für Markenidentität, Magazine, Blogs und Luxusprodukte.

Freundlich / Verspielt

Warm und zugänglich. Für persönliche Dienste, Bildung, Consumer-Apps und einladende Marken.

Tech / Fett

Stark und zukunftsweisend. Für Entwickler-Tools, technische Dokumentationen, Startups und wirkungsvolle Landing-Pages.

Funktionen

Kuratiertes Paarungslexikon

Über 20 handgepickte Überschrift × Fließtext-Paarungen. Jede Paarung enthält Stimmungs-Tags und eine Beschreibung. Nur bewährte Kombinationen, keine Zufallsgenerierung.

Echtzeit-Vorschau (Text editierbar)

Überschrift und Fließtext werden sofort mit den echten Schriften angezeigt. Ersetze den Vorschautext durch deinen eigenen Inhalt.

Mischen & Tauschen

Mischen wechselt zu einer zufälligen Paarung im aktuellen Filter. Tauschen vertauscht Überschrift- und Fließtext-Schrift zum Vergleich.

Favoriten

Markiere Lieblingspaarungen mit einem Stern. Nur lokal im Browser gespeichert, keine Serverübertragung.

CSS-Kopie mit einem Klick

Generiert und kopiert den Google-Fonts-@import (oder <link>-Tag) und font-family-Deklarationen. CSS-Variablen und Tailwind-Format ebenfalls verfügbar.

Anwendungsfälle

Überschrift- und Fließtext-Schriften für eine Website wählen

Nutze Stimmungs-Tags, um eine zur Marke passende Paarung zu finden, und füge das CSS direkt in dein Stylesheet ein.

Schriften für Präsentationen wählen

Auch ohne CSS kannst du die Paarungen als Inspirationsquelle nutzen. Installiere dieselben Schriften in Figma, PowerPoint oder Keynote.

Direkt in CSS / Tailwind einfügen

Der generierte Code enthält Google-Fonts-Import und font-family-Deklarationen. Das Tailwind-Format liefert einen fertigen fontFamily-Konfigurationsblock.

Japanisch, Chinesisch, Koreanisch anzeigen

Die meisten Paarungen verwenden Google Fonts, die nur lateinische Zeichen unterstützen. So wird CJK-Text behandelt:

Wechsle in den Latein-Vorschaumodus, um die Schriften wie beabsichtigt zu sehen.
Im lokalisierten Modus werden lateinische Schriften durch die Systemschrift des Geräts ersetzt, mit einem Hinweis.
CJK-spezifische Paarungen (Systemschriften) sind in der Liste enthalten.
Dieses Tool ist am nützlichsten für lateinische Websites, Logos, Präsentationen und mehrsprachige Layouts.

Schriften und Datenschutz

Vorschau-Schriften werden von dieser Website bereitgestellt. Dein Browser verbindet sich für die Vorschau nicht mit fonts.googleapis.com, und deine IP wird nicht an Google übertragen.
Vorschautext und gespeicherte Favoriten verbleiben nur in deinem Browser (localStorage). Keine Serverübertragung.
Die Google-Fonts-@import-URL im kopierten CSS ist für deine Website gedacht — diese Seite führt die Anfrage nicht aus.
Alle Schriften sind Open Source (SIL OFL 1.1) und für kommerzielle Nutzung freigegeben. Überprüfe stets die aktuellen Bedingungen auf Google Fonts, bevor du sie in Projekten verwendest.

Häufig gestellte Fragen

Wie wähle ich eine gute Schriftpaarung?

Beginne mit Kontrast: kombiniere Serif und Sans-Serif oder eine Display-Schrift mit einer lesbaren Fließtext-Schrift. Beschränke dich auf zwei Schriften und verfeinere mit Stimmungs-Tags.

Sind diese Schriften kostenlos für kommerzielle Nutzung?

Alle Schriften sind unter der SIL Open Font License (OFL 1.1) lizenziert, die kommerzielle Nutzung und Web-Einbettung erlaubt. Überprüfe stets die aktuellen Bedingungen auf der Google-Fonts-Seite, bevor du sie in Kundenprojekten verwendest.

Kann ich das CSS direkt in mein Projekt einfügen?

Ja. Das CSS enthält Google-Fonts-@import (oder <link>) und font-family-Deklarationen für h1–h3 und body. Füge es in dein Stylesheet ein. Das Tailwind-Format liefert den fontFamily-Block.

Wird mein Text oder meine Daten irgendwo übertragen?

Nein. Alles läuft in deinem Browser. Vorschautext, Favoriten und Schriftauswahlen werden nie übertragen. Vorschau-Schriften sind lokal gehostet, ohne Verbindung zu Google-Servern.

Kann ich Schriftpaarungen für deutschen Text sehen?

Ja. Alle Paarungen funktionieren mit lateinischen Zeichen einschließlich deutscher Umlaute (ä, ö, ü, ß). Die deutsche Vorschau zeigt deinen Text in den ausgewählten Schriften.

Kann ich Überschrift- oder Fließtext-Schriften manuell auswählen?

Ja. Der Abschnitt „Schriften manuell auswählen“ unter der Liste erlaubt es, jede Schrift aus der Bibliothek Überschrift oder Fließtext zuzuweisen. Vorschau und CSS aktualisieren sich sofort.

Wo werden meine Favoriten gespeichert?

Nur im localStorage deines Browsers. Sie werden nicht zwischen Geräten oder Browsern synchronisiert und nie an einen Server übertragen.