Combinação de Fontes — Pares de Google Fonts selecionados, pré-visualização e CSS

Filtrar por estilo

Título — Playfair Display

Texto do corpo — Inter

Fonte do título: Playfair Display×Fonte do corpo: Inter

Pares de fontes curados(28)

Copiar CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Inter', system-ui, sans-serif; }

Fonte personalizada (opcional)

Substitua a fonte do título ou do corpo da lista abaixo.

Fonte do título

Fonte do corpo

Ferramentas externas relacionadas

Alguns links são links de afiliados.

Adobe FontsBiblioteca de fontes MyFontsLoja de fontes Creative MarketLoja de recursos de design

Ferramentas relacionadas

Gerador de Paleta de CoresGere paletas de cores harmônicas a partir de um HEX base com esquemas complementar, análogo, triádico e mais. Trave cores, regenere o resto e exporte para CSS, Tailwind ou JSON.Gerador de GradienteCrie gradientes CSS lineares, radiais e cônicos com múltiplas paradas de cor. Ajuste ângulo, forma e centro, e copie o CSS de background ou o valor do Tailwind com um clique.Conversor de CoresConverta qualquer cor entre HEX, RGB, HSL, HSV e RGBA ao mesmo tempo. Edite um valor, copie com um clique, com alfa e contraste WCAG.Extrator de Cores de ImagemExtraia a paleta de cores dominantes de qualquer imagem no seu navegador, sem enviar nada. Obtenha HEX, RGB e porcentagem (%) de cada cor, escolha quantas cores e exporte como CSS/JSON.

Como usar

Escolha uma etiqueta de estilo para filtrar os pares ou navegue pela lista completa.
Clique em um par de fontes para ver a pré-visualização ao vivo com as fontes reais.
Edite o texto da pré-visualização para testar seu próprio conteúdo. Apagá-lo restaura a amostra padrão.
Use «Aleatório» para descobrir um novo par ou «Trocar» para inverter título e corpo.
Salve os pares favoritos com a estrela — apenas no seu navegador, sem enviar dados.
Quando encontrar a combinação certa, clique em «Copiar CSS» para obter o import do Google Fonts e as declarações font-family. Sem cadastro.

O que é combinação de fontes?

Combinar fontes significa escolher duas tipografias complementares — uma para os títulos e outra para o corpo. A combinação certa cria hierarquia visual, melhora a legibilidade e dá personalidade consistente ao design. O erro mais comum é usar fontes demais, tornando o design caótico. Limitar-se a duas — uma expressiva e uma neutra — é a regra de ouro.

Dê um papel para cada fonte

A fonte do título atrai o olhar e expressa caráter. A do corpo sustenta a leitura prolongada sem fadiga. Como têm propósitos diferentes, podem (e muitas vezes devem) ser de famílias tipográficas distintas.

Adicione contraste

Combinar serif com sans-serif é a abordagem clássica — o contraste estrutural faz o design parecer mais polido. Evite combinar duas fontes muito parecidas; a diferença deve ser evidente à primeira vista.

Limite-se a duas

Duas fontes quase sempre são suficientes. Na dúvida, escolha uma fonte expressiva para os títulos e uma neutra e legível para o corpo.

As etiquetas de estilo explicadas

Cada par tem de uma a três etiquetas de estilo para filtrar por sensação (lógica OR). Você também pode omitir o filtro e explorar com «Aleatório».

Moderno / Minimalista / Limpo

Designs contemporâneos e depurados. Ideal para SaaS, portfólios e projetos de tecnologia.

Elegante / Clássico / Editorial

Refinado e atemporal. Para identidades de marca, revistas, blogs e produtos de alto padrão.

Amigável / Lúdico

Caloroso e acolhedor. Para sites pessoais, educação, apps de consumo e marcas que querem ser acessíveis.

Tecnológico / Marcante

Forte e vanguardista. Para ferramentas de desenvolvimento, documentação técnica e startups.

Funcionalidades

Dicionário de pares curados

Mais de 20 combinações título × corpo selecionadas a mão, cada uma com etiquetas e descrição. Não é um gerador aleatório — cada par é escolhido porque funciona.

Pré-visualização ao vivo com texto editável

Veja o título e o corpo renderizados nas fontes reais. Edite o texto de amostra para verificar seu próprio conteúdo.

Aleatório e troca

Aleatório encontra um par ao acaso dentro do filtro atual. Trocar inverte as fontes de título e corpo para comparação.

Favoritos

Marque pares com estrela para salvar. Armazenados apenas no seu navegador, nada é enviado a um servidor.

Copie CSS com um clique

Obtenha o @import ou <link> do Google Fonts mais as declarações CSS, prontos para colar no seu projeto. Também disponível em variáveis CSS ou configuração do Tailwind.

Casos de uso

Títulos e corpo de um site

Filtre por estilo para encontrar um par que combine com sua marca, copie o CSS e cole na sua folha de estilos.

Apresentações e slides

Mesmo sem CSS, a ferramenta mostra quais fontes funcionam juntas. Instale-as no Figma, PowerPoint ou Keynote.

Colar diretamente no CSS ou Tailwind

O trecho gerado inclui o import do Google Fonts e as declarações font-family. O formato Tailwind oferece um bloco fontFamily pronto para usar.

Nota sobre exibição em japonês, chinês e coreano

A maioria dos pares usa fontes do Google Fonts apenas com caracteres latinos. Veja como a ferramenta lida com texto CJK:

Mude para o modo de amostra em latim para ver as fontes como foram projetadas.
No modo de amostra no seu idioma, a pré-visualização usa as fontes do sistema e exibe uma nota explicando que a fonte latina não inclui caracteres CJK.
Há pares específicos para CJK (com fontes do sistema) disponíveis na lista.
Esta ferramenta é mais útil para escolher fontes para sites com escrita latina.

Fontes e privacidade

As fontes da pré-visualização são servidas por este site. Seu navegador não se conecta a fonts.googleapis.com para a pré-visualização.
O texto de amostra e os favoritos salvos permanecem no seu navegador (localStorage). Nada é enviado a um servidor.
O trecho CSS que você copia contém uma URL padrão do Google Fonts para o seu próprio site — esta página não a executa.
Todas as fontes são de código aberto (SIL OFL 1.1), livres para uso comercial. Verifique os termos no Google Fonts antes de usar.

Perguntas frequentes

Como escolho uma boa combinação de fontes?

Comece com o contraste: combine serif com sans-serif ou uma fonte display com uma neutra para o corpo. Limite-se a duas tipografias. Use as etiquetas de estilo para filtrar pela sensação que busca.

As fontes são gratuitas para uso comercial?

Todas as fontes estão sob a SIL Open Font License (OFL 1.1), que permite uso comercial e incorporação web. Consulte sempre a página de cada fonte no Google Fonts antes de usar em projetos de clientes.

Posso colar o CSS diretamente no meu projeto?

Sim. O trecho CSS inclui o @import (ou <link>) do Google Fonts e as declarações font-family para h1–h3 e body. Cole na sua folha de estilos. O formato Tailwind oferece um bloco fontFamily para seu arquivo de configuração.

Meu texto ou dados são enviados para algum lugar?

Não. Tudo é processado no seu navegador. Texto de amostra, favoritos e seleções de fontes nunca são enviados. As fontes da pré-visualização são servidas por este domínio, sem contatar os servidores do Google.

Funciona para texto em japonês, chinês ou coreano?

A maioria dos pares usa fontes apenas com caracteres latinos. Mude para o modo de amostra em latim para vê-las corretamente. Também há pares específicos para CJK com fontes do sistema.

Posso personalizar a fonte do título ou do corpo?

Sim. Abra a seção «Fonte personalizada» para escolher qualquer fonte da biblioteca para o título ou o corpo. A pré-visualização e o CSS são atualizados imediatamente.

Onde meus favoritos são salvos?

Os favoritos são salvos apenas no localStorage do seu navegador. Não sincronizam entre dispositivos e nunca são enviados a um servidor.