Schriftkombinationen-Vorschau

Zwei Schriften kombinieren und live für Headline, Fließtext und UI ansehen – mit selbst gehosteten Fonts und CSS-Export.

Die Schriftkombinationen-Vorschau zeigt zwei Schriften im Zusammenspiel: eine für Überschriften, eine für den Fließtext. Du wählst aus selbst gehosteten Schriften, stellst Größe, Gewicht, Laufweite und Zeilenhöhe ein und siehst live einen Artikel, eine Landingpage und ein Interface. Ausgabe als CSS, Tailwind-Theme und Einbindung. Es werden keine Schriften von Google geladen.

Überschrift

Fließtext

Größe Überschrift px

Gewicht Überschrift

Laufweite Überschrift em

Zeilenhöhe Überschrift

Größe Fließtext px

Zeilenhöhe Fließtext

Überschrifttext

Ansicht

Design · 6 Min. Lesezeit

Gute Typografie beginnt mit der Kombination

Zwei Schriften, ein Eindruck: Wie du Überschriften und Fließtext so wählst, dass sie sich ergänzen.

Typografie prägt den Ton einer Seite. Eine ausdrucksstarke Überschrift zieht den Blick an, der Fließtext trägt die Inhalte. Damit beides zusammenpasst, brauchen die Schriften genug Kontrast in Charakter, Gewicht und Größe.

Auf Rhythmus achten

Zeilenabstand und Absatzabstand bestimmen die Lesbarkeit. Ein großzügiger Abstand macht lange Texte angenehmer, sollte aber nicht auseinanderfallen.

„Weniger Schriften, mehr Klarheit.“

:root {
  --font-heading: 'Playfair Display Variable', Georgia, serif;
  --font-body: 'Inter Variable', system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

Schriften kombinieren

Die Wahl der Schriften entscheidet mit über Wirkung und Lesbarkeit. Bewährt hat sich ein Paar aus Überschriftschrift und Textschrift. Die Vorschau zeigt beides im echten Kontext: als Artikel, Landingpage und Formular.

Bewährte Kombinationen

Paar	Wirkung
Klassisch: Playfair + Inter	Kontrast aus Serifen und Grotesk
Modern: Space Grotesk + Inter	Modern und funktional
Freundlich: Fraunces + DM Sans	Kontrast aus Serifen und Grotesk
Editorial: Lora + Work Sans	Kontrast aus Serifen und Grotesk
Kontrast: Manrope + Source Serif	Modern und funktional
Lesbar: Source Serif + Inter	Kontrast aus Serifen und Grotesk
Technisch: JetBrains Mono + Inter	Modern und funktional

So gehst du vor

Vorlage wählen und in allen drei Ansichten prüfen.
Größen und Abstände anpassen. Eine ganze Skala erzeugt der Typografie-Skala-Generator, fließende Größen der Fluid-Typografie-Generator.
CSS und Einbindung kopieren. Das Ergebnis lässt sich im Design-Token-Generator in ein Design-System übernehmen.

Beispiel

Playfair Display für Überschriften in Gewicht 700 und Inter im Fließtext mit 17 px und Zeilenhöhe 1,65 ergibt einen klassisch-modernen Editorial-Look. Für ein technisches Produkt tauscht du die Überschrift gegen Space Grotesk. Die Zeilenhöhe berechnest du im Zeilenhöhe-Rechner.

Häufige Fragen

Wie kombiniere ich Schriften gut?

Setze auf Kontrast bei gleichzeitiger Harmonie: eine Serifenschrift für Überschriften mit einer neutralen Sans für den Text funktioniert fast immer. Kombiniere nicht zwei ähnliche Schriften, sie wirken wie ein Fehler. Zwei Schriften genügen in den meisten Projekten.

Warum werden keine Google Fonts geladen?

Beim Laden von Google-Servern wird die IP-Adresse der Besucher übertragen, was in Deutschland datenschutzrechtlich problematisch sein kann. Deshalb liefert dieses Tool die Schriften selbst aus, und der Code zeigt, wie du sie über Fontsource selbst hostest.

Sind die Schriften frei nutzbar?

Alle hier angebotenen Schriften stehen unter der SIL Open Font License und sind auch kommerziell frei nutzbar. Lizenztexte findest du in den jeweiligen Fontsource-Paketen. Die System-Schriften hängen vom Gerät ab.

Was sind Variable Fonts?

Schriftdateien, die den ganzen Bereich von dünn bis fett in einer Datei enthalten. Du stellst das Gewicht stufenlos ein und lädst weniger Dateien. Die Vorschau nutzt sie für das Gewicht der Überschriften.

Welche Zeilenhöhe passt zu welcher Schrift?

Überschriften vertragen 1,1 bis 1,3, Fließtext 1,5 bis 1,7. Schriften mit großer x-Höhe brauchen etwas mehr Zeilenabstand. Prüfe die Werte im Zeilenhöhe-Rechner.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.