Resumindo
- A combinação de fontes funciona melhor quando cada tipografia tem um papel claro, em geral uma para títulos e outra para o texto corrido.
- Um bom par contrasta com clareza de um jeito só, como serifada contra sem serifa ou pesada contra leve, e divide proporções e clima.
- Usar uma só família com vários pesos, ou uma superfamília com versões serifada e sem serifa que combinam, é o jeito mais seguro de combinar fontes.
- Duas fontes parecidas, mas não idênticas, como duas sem serifa neutras, costumam parecer um erro e não uma combinação.
- Duas fontes bastam para quase toda marca, post ou site; uma terceira deve ter uma função restrita, como código ou rótulos.
Nesta página
Uma boa combinação de fontes se resume a três regras: dar a cada tipografia um papel distinto, fazer as duas contrastarem com clareza de um jeito só e deixá-las concordar em todo o resto, como proporções e clima. Um título serifado sobre um texto sem serifa é o exemplo clássico. Na dúvida, use uma família em dois pesos; ela não briga consigo mesma.
Comece pelos papéis, não pelas fontes
Antes de escolher qualquer tipografia, decida que trabalhos ela precisa fazer. A maioria dos designs tem dois: títulos que dão o tom e texto corrido que precisa ser confortável de ler. Alguns acrescentam um terceiro trabalho pequeno, como rótulos ou código. Escolha primeiro a fonte do texto, porque ela carrega a maior parte das palavras, e depois encontre uma fonte de título que a complemente.
| Papel | A função dele | O que mais importa |
|---|---|---|
| Título | Dar o tom, ser visto primeiro | Caráter, peso, como fica grande |
| Texto corrido | Ser lido com conforto por muito tempo | Legibilidade, textura uniforme, bons regular e itálico |
| Rótulos e texto pequeno | Ser lido rápido em tamanhos pequenos | Formas claras, espaçamento aberto, pesos firmes |
| Código ou números | Alinhar e não gerar ambiguidade | Monoespaçada ou números tabulares |
Papéis à vista: um título grande com caráter, um rótulo pequeno acima e uma linha de apoio discreta abaixo. O contraste está no tamanho e no papel antes de estar na fonte.
Contraste de um jeito só, concordância no resto
Uma combinação precisa de uma diferença visível, senão a segunda fonte parece um acidente. Mas se as duas diferem em tudo ao mesmo tempo, parecem vir de projetos diferentes. Escolha um eixo de contraste e mantenha o resto próximo.
- Classificação: uma serifada com uma sem serifa. O contraste mais confiável. Serifada ou sem serifa explica o que cada uma traz.
- Peso: um corte display pesado com um corte de texto regular, mesmo da mesma família.
- Largura: uma fonte de título condensada com um texto de largura normal.
- Concordar nas proporções: alturas-x parecidas, a altura das letras minúsculas, fazem as duas conviverem bem numa mesma linha.
- Concordar no clima: uma serifada calorosa e suave combina com uma sem serifa humanista e calorosa; uma sem serifa geométrica e afiada combina com uma serifada nítida e de alto contraste.
Uma família ou duas
A combinação mais simples é nenhuma combinação: uma família em dois ou três pesos. É consistente por natureza e difícil de errar. As superfamílias vão um passo além, com uma serifada e uma sem serifa desenhadas juntas para partilhar proporções, então você obtém o contraste de duas classificações com a harmonia de um só desenho.
Uma família
- Contraste só de peso e tamanho
- Harmonia garantida
- Voz mais discreta e uniforme
- Exemplo: títulos em Archivo Black, texto em Archivo
Duas famílias
- Contraste de classificação ou de caráter
- Exige proporções e clima combinando
- Mais expressiva, com mais personalidade
- Exemplo: títulos em Fraunces, texto em Inter
Combinações aprovadas do Google Fonts
Estes pares usam tipografias gratuitas no Google Fonts e amplamente usadas, o que facilita testá-las. Trate-os como pontos de partida: componha as suas próprias palavras neles e julgue o resultado.
| Título | Texto corrido | Contraste | Sensação |
|---|---|---|---|
| Playfair Display | Source Sans 3 | Serifada de alto contraste com uma sem serifa limpa | Editorial, clássica |
| Fraunces | Inter | Serifada suave e cheia de caráter com uma sem serifa neutra | Calorosa, contemporânea |
| DM Serif Display | DM Sans | Serifada display com a sem serifa companheira | Amigável, refinada |
| Instrument Serif | Inter | Serifada condensada com uma sem serifa neutra | Moda, editorial |
| IBM Plex Serif | IBM Plex Sans | A serifada e a sem serifa de uma superfamília | Precisa, técnica |
| Space Grotesk | Inter | Grotesca peculiar com uma simples | Tecnologia, produto |
| Archivo Black | Archivo | Peso dentro de uma só família | Ousada, direta |
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
h1, h2 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
line-height: 1.1;
}
body {
font-family: "Inter", system-ui, sans-serif;
font-weight: 400;
line-height: 1.55;
}
</style>Combinações a evitar
Evite
- Duas sem serifa neutras que diferem só um pouco
- Duas fontes display disputando atenção
- Uma terceira e uma quarta fonte para dar variedade
- Fontes com alturas-x muito diferentes na mesma linha
Em vez disso
- Uma sem serifa em dois pesos, ou uma serifada com ela
- Uma fonte display e uma fonte de texto discreta
- Duas fontes, com pesos e tamanhos para dar variedade
- Fontes com proporções parecidas
As fontes display são as mais tentadoras de usar demais. Elas são feitas para tamanhos grandes e linhas curtas; texto corrido composto em uma delas cansa o olho rápido. As fontes display mostram onde elas brilham.
Como testar uma combinação de fontes em dez minutos
- 1
Use palavras reais
Componha um título de verdade e um parágrafo real do seu trabalho, não texto de preenchimento.
- 2
Use tamanhos reais
O título grande, o texto no tamanho de leitura, no formato que você realmente vai usar.
- 3
Olhe a textura
Dê um passo atrás. O texto deve parecer um cinza uniforme; o título deve se destacar claramente dele.
- 4
Experimente no celular
Muitas combinações que ficam elegantes num monitor se desfazem no tamanho do celular. As fontes para redes sociais mostram o que se sustenta.
- 5
Confira os detalhes
Números, pontuação, itálicos e todos os idiomas em que você publica.
Depois de escolher, anote com pesos e tamanhos para que todos usem do mesmo jeito; as fontes de marca tratam de licenças e idiomas, e os fundamentos de tipografia tratam da escala. No Gradiently, as fontes ficam no seu kit de marca e valem para todo design novo.
Perguntas frequentes
O que é combinação de fontes?
Combinação de fontes é escolher duas tipografias, em geral uma para títulos e outra para o texto corrido, que contrastam com clareza de um jeito e concordam em proporções e clima.
Quantas fontes devo usar?
Duas bastam para quase tudo. Uma terceira deve ter uma função restrita, como código ou pequenos rótulos.
Posso usar só uma fonte?
Pode. Uma família em dois ou três pesos é a combinação mais segura que existe, e muitas marcas fortes usam exatamente isso.
Qual é uma boa combinação do Google Fonts?
Pontos de partida confiáveis incluem Fraunces com Inter, Playfair Display com Source Sans 3 e IBM Plex Serif com IBM Plex Sans.
Por que as minhas duas fontes ficam estranhas juntas?
Em geral são parecidas demais, e a diferença parece um erro, ou diferem em tudo ao mesmo tempo. Mantenha um contraste claro e combine as proporções.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
