Welche Schriftarten stehen im Tool zur Verfügung?

Es gibt eine kuratierte Auswahl von 22 beliebten Google Fonts, darunter Inter, Playfair Display, Montserrat und JetBrains Mono.

Lädt der generierte CSS-Code alle Schriftschnitte?

Nein, die @import-Regel wird so optimiert, dass nur die von Ihnen ausgewählten Schriftgewichte geladen werden.

Kann ich meinen eigenen Text für die Vorschau verwenden?

Ja, Sie können den Überschriften- und Fließtext-Beispieltext direkt in den Optionen anpassen.

Was bewirkt die Einstellung der Zeilenhöhe?

Sie ändert den Zeilenabstand des Fließtexts in der Vorschau, um die Lesbarkeit bei verschiedenen Schriftgrößen zu optimieren.

Bietet das Tool fertige Kombinationen an?

Ja, es stehen 7 vordefinierte Presets für verschiedene Stile wie Magazin, SaaS, Tech oder Dev-Tools bereit.

Web-Schrift-Pairing-Labor | Kostenloses Online-Tool

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Magazin: Playfair × Inter

Kontrastreicher Didone-Titel über neutraler Grotesk.

<div class="wp-wrap">Playfair Display × Inter — @import with wght@700 and wght@400, CSS variables --font-heading / --font-body.</div>

SaaS: Montserrat × Merriweather

Geometrischer Titel mit bildschirmoptimiertem Serif.

<div class="wp-wrap">Montserrat × Merriweather — modern agency / startup vibe.</div>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

8 Optionen

InhaltHaupteingaben einfügen oder eingeben.2

Überschrift-BeispieltexttextOptionales FeldOptional custom heading text. Defaults to a neutral sample.Fließtext-BeispieltexttextareaOptionales FeldOptional custom body paragraph(s). Defaults to a neutral sample.

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.6

Überschrift-SchriftselectOptionales FeldThe display / heading typeface.Strichstärke ÜberschriftnumberOptionales FeldSnaps to the nearest available weight for the chosen font.Fließtext-SchriftselectOptionales FeldThe body / paragraph typeface.Strichstärke FließtextnumberOptionales FeldSnaps to the nearest available weight for the chosen font.Fließtextgröße (px)numberOptionales FeldBody paragraph font-size in pixels.ZeilenhöhenumberOptionales FeldUnitless line-height for body text. 1.4–1.7 is the readable range.

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Magazin: Playfair × Inter

Kontrastreicher Didone-Titel über neutraler Grotesk.

<div class="wp-wrap">Playfair Display × Inter — @import with wght@700 and wght@400, CSS variables --font-heading / --font-body.</div>

SaaS: Montserrat × Merriweather

Geometrischer Titel mit bildschirmoptimiertem Serif.

<div class="wp-wrap">Montserrat × Merriweather — modern agency / startup vibe.</div>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

8 Optionen

InhaltHaupteingaben einfügen oder eingeben.2

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.6

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

1. Klassischer Magazin-Stil mit Serif und Sans-Serif

Webdesigner

Hintergrund

Ein Designer entwirft ein Online-Magazin und sucht eine elegante, klassische Überschrift kombiniert mit einem hochgradig lesbaren Fließtext.

Aufgabe

Die Kombination muss edel wirken, aber auf Mobilgeräten gut lesbar bleiben.

Verwendung

Wählen Sie 'Playfair Display' für die Überschrift (Gewicht 700) und 'Inter' für den Fließtext (Gewicht 400, Größe 16px, Zeilenhöhe 1.6).

headingFont: Playfair Display, headingWeight: 700, bodyFont: Inter, bodyWeight: 400, bodySize: 16, lineHeight: 1.6

Ergebnis

Ein kontrastreiches Schriftbild mit einer eleganten Serif-Überschrift und einem sauberen, modernen Fließtext inklusive passendem CSS-Code.

2. Modernes SaaS-Layout mit Montserrat und Merriweather

Frontend-Entwickler

Hintergrund

Für eine neue Software-Landingpage soll eine markante, geometrische Überschrift mit einer gut lesbaren Serifenschrift für längere Erklärtexte kombiniert werden.

Aufgabe

Die richtige Balance zwischen moderner Tech-Ästhetik und hoher Lesbarkeit bei Fließtexten finden.

headingFont: Montserrat, headingWeight: 700, bodyFont: Merriweather, bodyWeight: 400, bodySize: 16, lineHeight: 1.7

Web-Schrift-Pairing-Labor | Kostenloses Online-Tool | Elysia Tools

Web-Schrift-Pairing-Labor

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Klassischer Magazin-Stil mit Serif und Sans-Serif

2. Modernes SaaS-Layout mit Montserrat und Merriweather

FAQ

Web Python Bildverarbeitung Beispiele

Web Rust Bildverarbeitungsbeispiele

Web TypeScript Bildverarbeitungsbeispiele

Web Go Dateioperationsbeispiele

ECharts-Theme-Token-Extraktor

CSS-Fluid-Typography-Clamp-Rechner

Twitter-/X-Thread-Splitter

Farbpaletten-Extraktor aus Bild-URL

Tools zur Textextraktion

Textfall-, Encoding- und Normalisierungs-Konvertierungs-Tools

Text-Tools

Textanalyse-, Lesbarkeits- und Inhaltsinspektions-Tools