Guia de combinação de fontes: 12 pares eficientes para sites
Um método prático para escolher fontes de títulos e texto legíveis, coerentes e adequadas a layouts reais.
As quatro regras da combinação de fontes
O par deve criar hierarquia sem parecer a mistura de duas marcas. Uma serif expressiva nos títulos e uma sans discreta no corpo funcionam quando os papéis são claros.
Defina primeiro títulos, leitura, interface e fallback. Isso evita reunir fontes bonitas sem formar um sistema.
- Contraste categoria, peso, largura ou personalidade, mas não tudo ao mesmo tempo.
- Compare altura x, largura, ritmo, números e pontuação.
- Atribua uma família aos títulos e outra ao corpo antes das exceções.
- Teste parágrafos reais, mobile, negrito, itálico, acentos e idiomas.
12 combinações confiáveis
São pontos de partida. Considere tom, pesos disponíveis, desempenho e cobertura de idiomas.
| Par | Estilo | Ideal para | Por que funciona |
|---|---|---|---|
| Playfair Display + Source Sans 3 | Serif editorial + sans neutra | Revistas, beleza e portfólios | Títulos fortes e corpo sereno. |
| DM Serif Display + Inter | Serif expressiva + sans de interface | SaaS editorial e landing pages | Títulos distintos com texto adequado à interface. |
| Merriweather + Open Sans | Serif legível + sans humanista | Blogs, educação e ONGs | Formas abertas e papéis claros. |
| Lora + Roboto | Serif contemporânea + sans versátil | Guias e histórias de produto | Calor nos títulos e eficiência nos parágrafos. |
| Libre Baskerville + Montserrat | Serif clássica + sans geométrica | Serviços profissionais e cultura | Autoridade clássica com estrutura moderna. |
| Cormorant Garamond + Work Sans | Serif de alto contraste + sans limpa | Luxo, moda e hotelaria | Elegância equilibrada por texto direto. |
| Bodoni Moda + Manrope | Serif de moda + sans moderna | Campanhas premium e lookbooks | Impacto visual e leitura digital limpa. |
| Fraunces + IBM Plex Sans | Serif variável + sans técnica | Tecnologia criativa e estúdios | Personalidade com funções inequívocas. |
| Oswald + Source Sans 3 | Sans condensada + sans neutra | Esportes, eventos e painéis | Títulos compactos e corpo confortável. |
| Space Grotesk + Spectral | Grotesca moderna + serif literária | Startups, pesquisa e newsletters | Energia técnica e profundidade editorial. |
| Poppins + Lora | Sans geométrica + serif acolhedora | Lifestyle, cursos e criadores | Títulos acessíveis e leitura rítmica. |
| Noto Sans + Noto Serif | Superfamília sans + serif | Sites multilíngues com muito conteúdo | Métricas compartilhadas e ampla cobertura. |
Um processo em cinco passos
Um método repetível é mais confiável do que copiar tendências.
- Defina o conteúdo e três adjetivos da marca.
- Escolha primeiro a função mais difícil.
- Compare a estrutura no mesmo tamanho óptico.
- Crie uma escala com títulos, parágrafos, botão, rótulo e dados reais.
- Teste desktop, mobile, carregamento lento, fallback e locales.
Melhores combinações de fontes para sites
A web adiciona quebras no mobile, pesos ausentes e arquivos pesados. O corpo deve continuar confortável em torno de 16–18 px.
Carregue apenas os estilos usados, defina fallbacks robustos e verifique a cobertura dos mesmos alfabetos.
Erros comuns
Pouco contraste
Duas sans parecidas parecem uma escolha acidental.
Personalidade demais
Duas fontes decorativas competem.
Testar só o hero
Confira tabelas, formulários, parágrafos e mobile.
Ignorar idiomas
Caracteres ausentes ativam fallbacks incompatíveis.
Muitos pesos
Comece com regular, semibold e bold.
Confundir espaçamento e fonte
Ajuste medida e entrelinha antes de trocar.
Ferramentas para encontrar fontes compatíveis
Se você conhece uma fonte e procura uma vizinha visual, use nosso comparador de fontes. Se começar por uma captura, identifique o original com o guia de busca de Google Font por imagem.
FAQ
Qual é a melhor regra?
Use contraste controlado e compatibilidade de proporção, tom ou ritmo.
Títulos e corpo precisam de fontes diferentes?
Nem sempre. Uma superfamília com pesos contrastantes pode bastar.
Quantas fontes um site deve usar?
Duas famílias atendem à maioria dos sites.
Posso combinar duas serif ou duas sans?
Sim, se largura, peso, construção ou função forem distintos.
O que torna um par acessível?
Tamanho legível, contraste, entrelinha estável, ênfase e fallbacks.
Como combinar para vários idiomas?
Escolha cobertura comum e teste traduções reais.