CodeKitHubO que é esta ferramenta?
Combinação de fontes é escolher duas (às vezes três) tipografias para usar juntas em uma página — normalmente uma para títulos e outra para o corpo do texto — de modo que a página tenha hierarquia visual sem parecer desencontrada ou monótona.
Cada combinação abaixo mostra uma amostra renderizada ao vivo: a fonte do título em cima, a do corpo embaixo, usando os arquivos reais do Google Fonts, então o que você vê é exatamente o que vai obter no seu site.
Cada combinação vem com uma tag de incorporação `<link>` do Google Fonts pronta para uso e um trecho CSS correspondente com declarações `font-family` para títulos e corpo de texto — basta copiar os dois.
Por que usar?
- 28 combinações escolhidas a dedo, não uma lista gerada automaticamente — cada uma foi selecionada porque as duas tipografias realmente se complementam.
- Prévia ao vivo: cada combinação é renderizada com as fontes reais carregadas do Google Fonts, não uma imagem estática nem um palpite baseado no nome da fonte.
- Filtre por estilo — Moderno, Elegante, Ousado, Minimalista, Clássico — para encontrar rapidamente o clima certo para o seu projeto.
- Cópia com um clique tanto da tag de incorporação `<link>` quanto das regras CSS `font-family`.
- Grátis, funciona no navegador, sem necessidade de conta ou login.
Como usar
- Opcionalmente, clique em um filtro de estilo (Moderno, Elegante, Ousado, Minimalista, Clássico) para restringir a lista, ou deixe "Todos" selecionado para ver tudo.
- Veja os cartões de prévia ao vivo — a linha de cima mostra a fonte do título, a de baixo mostra a fonte do corpo.
- Abra uma combinação que goste e clique para expandir a seção de código de incorporação.
- Copie a tag `<link>` para o `<head>` do seu HTML, e copie o trecho CSS para sua folha de estilos para aplicar as fontes ao título e ao corpo do texto.
Exemplo
Entrada
Blog eleganteResultado
Playfair Display (títulos) + Source Sans Pro (corpo)Filtrar por "Elegante" mostra títulos serifados de alto contraste combinados com um corpo sem serifa limpo e muito legível — uma combinação comum em layouts editoriais e de blog.
Princípios de uma boa combinação de fontes
- Contraste em vez de semelhança: duas fontes quase idênticas (por exemplo, duas sans-serif geométricas parecidas) costumam parecer um erro em vez de uma escolha deliberada. Combine uma serifada com uma sem serifa, ou uma fonte de destaque pesada com uma fonte de texto mais leve, para que a diferença pareça intencional.
- Combine altura-x e proporções: fontes cujas letras minúsculas têm altura visual semelhante costumam parecer que pertencem à mesma página, mesmo com estilos diferentes — uma altura-x desencontrada é um dos motivos mais comuns para uma combinação parecer "errada".
- Limite-se a duas famílias (às vezes três): uma para títulos, uma para o corpo do texto e, no máximo, uma terceira para detalhes como botões ou rótulos. Além disso, a página começa a parecer sem planejamento.
- Considere o clima, não só a forma: uma sans-serif arredondada e amigável combinada com uma serifada formal envia sinais contraditórios, mesmo que as formas das letras tecnicamente funcionem juntas — escolha fontes que combinem tanto no tom quanto na estrutura.
- Teste em tamanhos reais: uma combinação que fica ótima em uma prévia grande pode perder contraste no tamanho do corpo de texto, ou uma fonte de destaque pode ficar ilegível em tamanhos pequenos — sempre verifique os dois extremos.
Escolhendo uma combinação de acordo com o uso
Landing pages e sites de marketing geralmente se beneficiam dos filtros "Ousado" ou "Moderno" — uma fonte de título forte e de alto contraste chama atenção logo no topo, combinada com uma fonte de corpo limpa e neutra que facilita a leitura rápida de textos longos.
Blogs e conteúdo editorial costumam ficar melhores com combinações "Elegante" ou "Clássico" — um título serifado refinado sinaliza uma voz cuidada e editada, enquanto um corpo serifado ou sem serifa confortável mantém artigos longos legíveis em sessões de leitura mais extensas.
Sites de e-commerce e de produtos tendem a favorecer combinações "Minimalista" — fontes discretas e neutras mantêm o foco nas fotos dos produtos e nos preços em vez de na tipografia em si, o que importa quando dezenas de cartões de produto aparecem na mesma página.
Portfólios e sites criativos têm mais espaço para experimentar — combinações "Ousado" ou "Elegante" com mais personalidade costumam funcionar bem, já que o público está ali, em parte, para avaliar o gosto visual.
Notas sobre desempenho e licenciamento
A tag de incorporação `<link>` carrega as fontes a partir do CDN do Google, que é rápido e já está em cache em muitos sites que seus visitantes provavelmente já acessaram — mas isso adiciona uma requisição externa. Para sites em que cada milissegundo importa, baixar os arquivos de fonte e hospedá-los você mesmo (com `font-display: swap` configurado manualmente) elimina essa dependência externa, ao custo de algum trabalho extra de configuração.
Todas as fontes do Google Fonts são de código aberto e gratuitas para uso comercial sem exigência de atribuição, embora dar crédito ao designer da fonte seja uma cortesia bem-vinda quando for fácil de fazer.
Perguntas frequentes
O que faz duas fontes "combinarem bem"?
Boas combinações equilibram contraste e harmonia. O contraste — combinar uma serifada com uma sem serifa, ou uma fonte de destaque em negrito com uma fonte de corpo simples — cria hierarquia visual para que títulos e corpo pareçam claramente distintos. A harmonia — altura-x semelhante, espessura de traço comparável e um mesmo grau de formalidade ou leveza — evita que as duas entrem em conflito. As combinações aqui foram selecionadas levando os dois aspectos em conta.
Títulos e corpo de texto sempre precisam usar fontes diferentes?
Não. Usar uma única família tipográfica para os dois (como a combinação "Rubik + Rubik" desta ferramenta) também funciona bem, desde que a fonte tenha variação de peso suficiente para distinguir títulos do corpo. É uma escolha minimalista válida, não um erro.
Como eu de fato aplico uma combinação ao meu site?
Copie a tag de incorporação `<link>` para o `<head>` da sua página para carregar as fontes a partir do CDN do Google, e depois copie o trecho CSS para sua folha de estilos — ele define o `font-family` para títulos (h1, h2, h3) e para o corpo do texto (body, p). Ajuste os seletores CSS se sua marcação for diferente.
Carregar o Google Fonts vai deixar meu site mais lento?
Cada arquivo de fonte adicional adiciona uma requisição de rede e algum risco de bloquear a renderização. Limite-se a um peso para o título e um ou dois para o corpo, use `display=swap` (já incluído no código de incorporação) para que o texto apareça em uma fonte substituta enquanto a webfont carrega, e considere hospedar você mesmo os arquivos de fonte em sites de produção que precisem do carregamento mais rápido possível.
Essas fontes são gratuitas para uso comercial?
Sim. Todas as fontes do Google Fonts, incluindo todas as combinações mostradas aqui, têm licença SIL Open Font License ou Apache License — ambas permitem uso comercial gratuito, modificação e redistribuição sem royalties.