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;
}Continue explorando
Outras ferramentas de Desenvolvimento que você pode gostar…
Formatador JSON
Formate, valide e minifique JSON com destaque de sintaxe e detecção de erros
Codificador/Decodificador Base64
Codifique texto ou arquivos em Base64 e decodifique strings Base64 em texto legível
Codificador/Decodificador de URL
Codifique e decodifique componentes de URL e parâmetros de query string
Gerador de UUID
Gere UUIDs aleatórios (v1, v4) ou gere múltiplos UUIDs em lote
Gerador de Hash
Gere hashes MD5, SHA-1, SHA-256, SHA-512 de texto ou arquivos
Testador de Regex
Teste expressões regulares com destaque de correspondências em tempo real
Decodificador JWT
Decodifique e inspecione JSON Web Tokens — header, payload e assinaturas
Formatador HTML
Formate e embeleze código HTML com indentação correta e destaque de sintaxe