Gerador de Combinação de Fontes
Encontre pares de fontes Google Fonts que combinam. Visualize título + corpo em tempo real.
3 usos/* Playfair Display + Source Sans 3 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@400;700&display=swap');
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
}
body, p, li, span {
font-family: 'Source Sans 3', sans-serif;
}Como usar o Gerador de Combinação de Fontes
- 1
Escolha a fonte do título
Navegue pelas opções de fontes para títulos (headings). Cada fonte tem personalidade própria — serif para elegância, sans-serif para modernidade.
- 2
Escolha a fonte do corpo
Selecione a fonte para o texto do corpo. A combinação ideal contrasta título e corpo, mantendo legibilidade e harmonia visual.
- 3
Copie o código CSS
Clique em "Copiar CSS" para obter o código pronto com @import do Google Fonts e as regras de font-family. Cole no seu projeto e pronto.
O que é combinação de fontes?
Combinação de fontes (font pairing) é a arte de selecionar dois ou mais tipos de letra que funcionam bem juntos em um design. Um bom par tipográfico cria hierarquia visual, melhora a legibilidade e transmite a personalidade da marca. Geralmente, combina-se uma fonte display ou serif para títulos com uma sans-serif neutra para o corpo do texto. O Google Fonts oferece centenas de fontes gratuitas e de código aberto, tornando fácil experimentar combinações sem custo.
Perguntas frequentes
- Quantas fontes devo usar no meu site?
- O ideal é usar no máximo 2 a 3 fontes: uma para títulos, uma para corpo de texto e, opcionalmente, uma para destaques. Usar muitas fontes deixa o design poluído e aumenta o tempo de carregamento.
- As fontes do Google Fonts são gratuitas?
- Sim, todas as fontes do Google Fonts são gratuitas e de código aberto. Podem ser usadas em projetos pessoais e comerciais sem restrições de licença.
- Como fontes afetam a velocidade do site?
- Cada fonte adicionada requer download pelo navegador. Use display=swap para evitar bloqueio de renderização e limite o número de pesos (weights) carregados. Duas fontes com 2 pesos cada é um bom equilíbrio.
- Qual a diferença entre serif e sans-serif?
- Fontes serif (como Playfair Display) têm pequenos traços decorativos nas extremidades das letras, transmitindo elegância e tradição. Sans-serif (como Inter) são limpas e modernas, ideais para telas digitais e textos longos.