# Vorschaukarte für Schriftkombinationen

Vorschau einer Titel- und Textschrift mit echtem Text, Größen, Gewichten, Zeilenhöhen, Zeichensatz und CSS.

> Kanonische Seite: https://elysiatools.com/de/tools/font-pairing-preview-card

- **Kategorie:** Design

- **Schlagwörter:** Schriftkombination, Typografie, Font-Vorschau, CSS

## Überblick

Die Karte verwendet die eingegebenen Namen als CSS-Stacks und lädt keine Font-Dateien. Das Ergebnis ist deterministisch und offline nutzbar; das Aussehen hängt von den verfügbaren Schriften ab.

## Eingaben

- **Titelschrift-Stack** (text): Fraunces, Georgia, serif
- **Textschrift-Stack** (text): Inter, system-ui, sans-serif
- **Beispieltext** (textarea): A thoughtful interface starts with readable type.
- **Zeichensatz** (select)
- **Titelgröße (px)** (number)
- **Textgröße (px)** (number)
- **Titelgewicht** (number)
- **Textgewicht** (number)
- **Titelzeilenhöhe** (number)
- **Textzeilenhöhe** (number)

## Wann verwenden

- Wenn Sie eine passende Kombination aus Überschriftenschrift und Textschrift vergleichen möchten.
- Wenn Sie Lesbarkeit und typografische Wirkung mit konkretem Beispieltext prüfen möchten.
- Wenn Sie die Darstellung für lateinische, kyrillische, griechische, chinesische, arabische oder Devanagari-Zeichen testen möchten.

## Funktionsweise

- Geben Sie einen CSS-Schriftstack für die Titelschrift und die Textschrift ein.
- Fügen Sie den gewünschten Beispieltext ein und wählen Sie bei Bedarf den Zeichensatz.
- Passen Sie Titel- und Textgröße, Schriftgewicht sowie Zeilenhöhe an.
- Die Anwendung zeigt daraus eine HTML-Vorschau; das tatsächliche Aussehen hängt von den verfügbaren Schriften ab.

## Anwendungsfälle

- Typografische Entwürfe für Websites und Benutzeroberflächen vergleichen.
- CSS-Fallbacks mit konkretem Text auf Lesbarkeit und Wirkung prüfen.
- Mehrsprachige Überschriften und Texte vor der Umsetzung mit passenden Zeichensätzen testen.

## Häufig gestellte Fragen

### Werden Font-Dateien heruntergeladen?

Nein. Die eingegebenen Namen werden als CSS-Schriftstacks verwendet.

### Welches Ergebnis liefert das Tool?

Das Tool liefert eine HTML-Vorschau der Schriftkombination.

### Kann ich eigenen Text verwenden?

Ja. Sie können einen beliebigen Beispieltext eingeben.

### Welche Zeichensätze kann ich prüfen?

Verfügbar sind Latein, Kyrillisch, Griechisch, Chinesisch, Arabisch und Devanagari.

### Warum sieht die Vorschau je nach Gerät anders aus?

Die Darstellung hängt davon ab, welche Schriften auf der Host-Seite verfügbar oder geladen sind.

## Ähnliche Tools

- [BFV-, CKKS-, LWE-FHE-Erklärer für Rauschbudget, Relinearisierung und Bootstrapping](https://elysiatools.com/de/tools/bfv-ckks-lwe-fhe-ciphertext-noise-budget-relin-and-bootstrapping-explainer): Führt eine echte Mini-BFV/CKKS-Pipeline über Z_q\[x\]/(xⁿ+1) aus: exakte invariante Rauschbudgets in Bit, Ciphertext-Multiplikation mit Relinearisierung, Moduluswechsel, SIMD-Slot-Packing und Bootstrapping-Auffrischung.
- [Manuskript-Stilkonsistenz-Auditor](https://elysiatools.com/de/tools/manuscript-style-consistency-auditor): Prüft Zahlen, Daten, Einheiten, Anführungszeichen, Striche, Überschriftsebenen und Eigennamen; erstellt ein Style Sheet
- [Farb-Opazitäts-Regler](https://elysiatools.com/de/tools/color-opacity-adjuster): Farbopazität/Alpha-Transparenz mit Echtzeitvorschau und Stapelverarbeitung anpassen
- [ECharts-Theme-Token-Extraktor](https://elysiatools.com/de/tools/echarts-theme-token-extractor): Extrahiert Design-Tokens — Farben, Zahlen, Schriftgrößen und Strings — aus einem ECharts-Theme-JSON und exportiert sie direkt in Ihr Design-System. Fügen Sie ein Theme-Objekt ein (das per echarts.init(dom, themeName) registriert wird) und das Werkzeug durchläuft jedes Leaf, taggt jede Farbe (optional Named/rgb → hex normalisiert), jeden Abstand, jede Schriftgröße und jeden String und gibt saubere CSS-Variablen, ein Tailwind theme.extend, ein Style Dictionary tokens.json oder SCSS-Variablen aus. Überbrückt die Lücke zwischen einem ECharts-Visualisierungs-Theme und Figma/CSS/Tailwind-Design-Tokens, ohne jeden Wert von Hand zu kopieren.
- [Figma iOS Android pt dp sp Responsive-Spezifikationskarte](https://elysiatools.com/de/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Rechnet Figma-px-Werte in die korrekten Plattform-Einheiten um und erzeugt eine Entwickler-Spec-Card: iOS-pt (@1x/@2x/@3x mit gerenderten px je Skalierung), Android-dp/sp (Render-Tabelle mdpi…xxxhdpi und Schriftskalierung), Web-rem/vw mit clamp()-Snippet; Prüfung der minimalen Touch-Ziele (44pt iOS / 48dp Android / 44px und 24px WCAG) samt Material-Fensterklassen und Tailwind-Breakpoints.
- [Schriftdatei-Inspektor (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/de/tools/font-file-inspector): Lade eine TTF-, OTF-, WOFF- oder WOFF2-Datei hoch (WOFF2 wird automatisch dekomprimiert) und prüfe alle Metadaten: Familie/Subfamilie/Designer/Copyright/Version, Glyphenanzahl, unitsPerEm, Strichstärke und Breite, Kursivwinkel, Stilflags und Bounding-Box; Heatmap der Unicode-Blockabdeckung; SVG-Glyphenvorschau (eigener Text, Auto-Stichprobe für Icon-Fonts); liga-Ligaturen und OpenType-Features; fvar-Achsen und benannte Instanzen variabler Fonts.
- [PDF-Typografie-Labor](https://elysiatools.com/de/tools/pdf-typography-playground): Experimentieren Sie mit Typografie-Einstellungen: Zeilenabstand, Abstände, Ausrichtung und Einrückung
- [Doppelte Zeilen Entfernen](https://elysiatools.com/de/tools/remove-duplicate-lines): Dedupliziert Zeilen in einer Liste oder einem Textblock. Behält das erste oder letzte Vorkommen, mit Optionen für Groß-/Kleinschreibung, Leerzeichen-Trimming und das Ignorieren leerer Zeilen.

## Beispiele

- [Kreditkartenbeispiele](https://elysiatools.com/de/samples/credit-card): Testkartennummern für verschiedene Netzwerke (Visa, MasterCard, Amex, usw.)
- [Variable Schriftarten Beispiele](https://elysiatools.com/de/samples/variable-font-samples): Variable Schriftartdateien mit fvar-Achsen für den Achsen/Instanzen-Inspektor und CSS-Builder
- [MP3 Audio-Beispiele ohne Urheberrechte](https://elysiatools.com/de/samples/mp3-samples): Sammlung urheberrechtsfreier Audio-Beispiele zum Testen und Entwickeln, einschließlich Naturklänge, Meditationsmusik und Umgebungsgeräusche
- [SVG Beispiele](https://elysiatools.com/de/samples/svg-samples): Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren