Finden Sie Überschrift- und Fließtext-Schriftkombinationen, die gut zusammenpassen. Wählen Sie eine Paarung, testen Sie sie mit eigenem Text und kopieren Sie den CSS-Code oder Google-Fonts-Link in Ihr Projekt.
Jede Paarung kombiniert eine Überschriften- mit einer Fließtext-Schrift, getestet auf visuellen Kontrast und Lesekomfort: Serifen-Headline mit humanistischer Sans, geometrische Sans mit Monospace-Akzenten, kondensierte Display-Schrift neben einer zuverlässigen Textschrift. Nach Stil filtern, eigene Überschrift in die Vorschau setzen und die fertige Google-Fonts-Import-Zeile samt CSS direkt kopieren.
Anleitung
Schritt 1 — Stöbere durch die Schriften-Duos oder filtere nach Stil (Serif, Sans-Serif, Display, Monospace, Handschrift).
Schritt 2 — Klicken Sie auf eine Paarung, um sie mit Beispieltext oder eigenem Text zu testen.
Schritt 3 — Kopieren Sie den Google-Fonts-Import-Link oder den CSS-Code für Ihre gewählte Kombination.
Wann verwenden
Überschrift- und Fließtextschrift für Blog oder Landingpage festlegen, bevor CSS geschrieben wird.
Die Typografie eines Decks oder Portfolios auffrischen, ohne das Layout zu ändern.
Zwei bereits verwendete Schriften prüfen, ob sie wirklich harmonieren.
Ergebnis
Für einen Blog: Wählen Sie „Playfair Display + Source Sans 3“, testen Sie Ihre Überschrift und kopieren Sie das CSS zum Einfügen in Ihr Stylesheet.
Häufige Fragen
Sind diese Schriften alle frei und kommerziell nutzbar?
Ja. Sämtliche Paarungen stammen aus Google Fonts unter der SIL Open Font License oder ähnlichen offenen Lizenzen. Du darfst sie auf kommerziellen Seiten einbinden, in Apps mitliefern und für Kundenprojekte nutzen, ohne eine Lizenz zu kaufen.
Was macht zwei Schriften zu einem guten Paar?
Kontrast plus Harmonie. Überschriften vertragen Charakter (Serifen, Display, kräftige Geometrische), Fließtext sollte hinter Lesbarkeit verschwinden. Die Paare hier mischen bewusst Kategorien: eine markante Serifen-Überschrift neben einer neutralen Sans im Absatz.
Darf ich für Überschrift und Fließtext dieselbe Schrift verwenden?
Ja, vor allem mit Superfamilien wie Inter, Source Sans oder Roboto, die viele Schnitte liefern. Zwei Schriften erzeugen meist mehr visuellen Reiz, aber eine Familie mit Regular und Bold wirkt für Dokumentation und Dashboards immer noch sehr aufgeräumt.
Verlangsamt das Laden zweier Google Fonts die Seite?
Zwei Familien mit je einer Stärke ergeben rund 30 bis 50 KB plus eine zusätzliche HTTP-Anfrage. Mit selbst gehostetem CSS, `font-display: swap` und einer Beschränkung auf wirklich genutzte Schnitte fällt der Overhead kaum ins Gewicht.
Wie halte ich die Typografie konsistent, nachdem ich ein Paar gewählt habe?
Setze beide als Standard über CSS-Variablen für `font-family`, lege eine Größenskala fest (z. B. Verhältnis 1,25) und streue keine zusätzlichen Schriften in Komponenten. Zwei sorgfältig gewählte Schnitte tragen die meisten Dokumente komplett.
