Schriftpaarungs-Explorer

Was ist Schriftpaarungs-Explorer?

Der Schriftpaarungs-Explorer ist ein kostenloses Browser-Tool für Webdesigner, Entwickler und Content-Ersteller, die eine gelungene Kombination aus Überschrift und Fließtext suchen, ohne Schriftbibliotheken zu durchforsten. Zwei unabhängige, durchsuchbare Auswahlfelder lassen dich 48 kuratierte Google Fonts nach Serif, Sans, Display oder Mono filtern und für jede Rolle eine Schrift wählen, während Steuerelemente pro Rolle Schnitt, Größe, Zeilenhöhe und Laufweite festlegen. Eine Live-Vorschau stellt deine Überschrift und deinen Absatz in den echten Schriften dar, und ein Misch-Button schlägt zufällige Paarungen vor, wenn du Inspiration brauchst. Wenn es dir gefällt, kopiere das generierte CSS im gewünschten Format — eine @import-Regel, ein HTML-link-Tag oder Fontsource-artige npm-Importe — und setze es in eine Landingpage, ein Blog-Theme, eine Präsentation oder ein Designsystem ein.

So verwendest du Schriftpaarungs-Explorer

1. Filtere im Überschriften-Auswahlfeld nach Serif, Sans, Display oder Mono, tippe zum Suchen und klicke eine Schrift an, um sie auszuwählen.
2. Mache dasselbe im Fließtext-Auswahlfeld, um eine passende Schrift für den Absatztext zu wählen.
3. Öffne die Einstellungen, um Schnitt, Größe, Zeilenhöhe und Laufweite je Rolle festzulegen.
4. Tippe deine eigene Überschrift und einen Satz in das Beispielfeld oder lass es für den Standardtext leer; drücke Mischen für zufällige Paarungsideen.
5. Wähle das Ausgabeformat — @import, <link> oder Fontsource — und kopiere das generierte CSS in dein Stylesheet oder Projekt.

Beispiele

Überschrift: Playfair Display 700 · Fließtext: Source Sans 3 400

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

Format: <link>

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

Häufig gestellte Fragen

Wie wähle ich die beiden Schriften?

Jede Rolle hat ihr eigenes Auswahlfeld. Filtere den Katalog nach Serif, Sans, Display oder Mono, tippe einen Teil eines Familiennamens zum Suchen und klicke ein Ergebnis an, um es auszuwählen. Überschrift und Fließtext werden unabhängig gewählt, und der Misch-Button sucht ein zufälliges Paar für dich aus.

Kann ich Schnitt, Größe, Zeilenhöhe und Laufweite steuern?

Ja. Öffne die Einstellungen, um Schnitt, Größe in Pixel, Zeilenhöhe und Laufweite (in em) getrennt für Überschrift und Fließtext festzulegen. Jede Änderung erscheint sowohl in der Live-Vorschau als auch im kopierten CSS.

Welche Ausgabeformate kann ich kopieren?

Drei: eine CSS-@import-Regel, ein HTML-<link>-Tag mit preconnect-Hinweisen und Fontsource-artige npm-Importe (npm i @fontsource/… plus Importzeilen je Schnitt). Alle drei enthalten dieselben font-family-, Schnitt-, Größen-, Zeilenhöhen- und Laufweiten-Regeln für h1–h3 und body.

Woher kommen die Schriften und ist mein Text privat?

Wenn du eine Paarung wählst, lädt dein Browser nur diese beiden Familien direkt über die öffentliche Google Fonts CSS API unter fonts.googleapis.com — eine Drittanbieter-Anfrage direkt aus deinem Browser, nicht über unsere Server. Dein Beispieltext und deine Einstellungen bleiben vollständig auf deinem Gerät.

Welche Schriften sind enthalten?

Ein kuratierter Satz von 48 beliebten Google Fonts über Serif, Sans-Serif, Display und Monospace — darunter Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono und mehr.