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;
}Sigue explorando
Otras herramientas de Desarrollo que te pueden gustar…
Formateador JSON
Formatea, valida y minifica JSON con resaltado de sintaxis y detección de errores
Codificador/Decodificador Base64
Codifica texto o archivos a Base64 y decodifica cadenas Base64 a texto legible
Codificador/Decodificador de URL
Codifica y decodifica componentes URL y parámetros de query string
Generador de UUID
Genera UUIDs aleatorios (v1, v4) o genera múltiples UUIDs en lote
Generador de Hash
Genera hashes MD5, SHA-1, SHA-256, SHA-512 desde texto o archivos
Tester de Regex
Prueba expresiones regulares con resaltado de coincidencias en tiempo real
Decodificador JWT
Decodifica e inspecciona JSON Web Tokens — ve header, payload y verifica firmas
Formateador HTML
Formatea y embellece código HTML con indentación correcta y resaltado de sintaxis