Font Pairing Tool
Pick two Google Fonts and preview them together as heading + body to find the perfect typographic combination
The quick brown fox jumps
Great typography creates hierarchy and readability. The right font pairing can make your design feel intentional, polished, and professional.
The bold weight of the body font and the italic variant both inherit the font family choice.
/* Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair%20Display:wght@400;600;700&family=Source%20Sans%203:wght@400;700&display=swap');
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-size: 36px;
font-weight: 700;
}
body, p {
font-family: 'Source Sans 3', sans-serif;
font-size: 16px;
line-height: 1.7;
}Weiter entdecken
Weitere Entwickler-Tools, die Ihnen gefallen könnten…
JSON-Formatierer
JSON mit Syntaxhervorhebung und Fehlererkennung formatieren, validieren und minifizieren
Base64 Encoder/Decoder
Text oder Dateien nach Base64 kodieren und Base64-Strings in lesbaren Text dekodieren
URL Encoder/Decoder
URL-Komponenten und Query-String-Parameter kodieren und dekodieren
UUID-Generator
Zufällige UUIDs (v1, v4) generieren oder mehrere UUIDs in Bulk erstellen
Hash-Generator
MD5-, SHA-1-, SHA-256-, SHA-512-Hashes aus Text oder Dateien generieren
Regex-Tester
Reguläre Ausdrücke mit Echtzeit-Übereinstimmungshervorhebung testen
JWT-Decoder
JSON Web Tokens dekodieren und prüfen — Header, Payload und Signaturen ansehen
HTML-Formatierer
HTML-Code mit korrekter Einrückung und Syntaxhervorhebung formatieren