Encontre combinações de fontes para título e corpo de texto que funcionem bem juntas. Escolha uma combinação, visualize com seu próprio texto e copie o CSS ou o link do Google Fonts para o seu projeto.
Cada combinação junta uma fonte de título com uma de texto já testadas em contraste visual e conforto de leitura: serifa de título com sans humanista para o corpo, sans geométrica com toques monoespaçados, display condensada ao lado de uma fonte de texto confiável. Filtre por estilo, jogue seu próprio título na pré-visualização e copie a linha de import do Google Fonts com o CSS pronto.
Como usar
Passo 1 — Explore os pares tipográficos ou filtre por estilo (serifa, sem serifa, display, monoespaçada, manuscrita).
Passo 2 — Clique em uma combinação para visualizá-la com texto de exemplo ou digite o seu próprio.
Passo 3 — Copie o link de importação do Google Fonts ou o código CSS da combinação escolhida.
Quando usar
Escolher fontes de título e corpo para um blog ou landing antes de escrever CSS.
Renovar a tipografia de uma apresentação ou portfólio sem mexer no layout.
Conferir se duas fontes que você já usa realmente combinam.
Resultado
Criando um blog: escolha a combinação 'Playfair Display + Source Sans 3', visualize seu título e copie o CSS para colar na sua folha de estilos.
Perguntas frequentes
Todas essas fontes são gratuitas para uso comercial?
Sim. Todas vêm do Google Fonts sob a SIL Open Font License ou outras licenças abertas. Você pode embutir em sites comerciais, distribuir em apps e usar em trabalhos para clientes sem comprar licença.
O que faz duas fontes combinarem bem?
Contraste com harmonia. O título se beneficia de personalidade (serifa, display, geométrica encorpada), enquanto o corpo deve sumir na legibilidade. As combinações aqui misturam categorias de propósito: um título serifa com caráter ao lado de uma sans neutra no parágrafo.
Dá para usar a mesma fonte no título e no corpo?
Dá, principalmente com superfamílias como Inter, Source Sans ou Roboto, que trazem vários pesos. Misturar duas fontes costuma dar mais interesse visual, mas uma família só com regular e bold já fica elegante para documentação e dashboards.
Carregar duas Google Fonts deixa a página lenta?
Duas famílias com um peso cada somam uns 30–50 KB e um pedido HTTP a mais. Auto-hospedando o CSS gerado, ligando `font-display: swap` e mantendo só os pesos usados de fato, o custo fica praticamente invisível.
Como mantenho a tipografia consistente depois de escolher o par?
Defina como padrão com variáveis `font-family`, fixe uma escala tipográfica (proporção 1.25, por exemplo) e evite jogar fontes novas dentro dos componentes. Duas fontes bem escolhidas dão conta da maioria dos documentos.
