A versão curta
- Combinar tipos de letra funciona melhor quando cada um tem um papel claro, normalmente um para títulos e outro para o texto corrido.
- Um bom par contrasta claramente de uma maneira, como serifa contra sem serifa ou pesado contra leve, e partilha proporções e ambiente.
- Usar uma só família tipográfica em vários pesos, ou uma superfamília com versões com e sem serifa a condizer, é a forma mais segura de combinar tipos de letra.
- Dois tipos de letra parecidos mas não iguais, como duas sem serifa neutras, costumam parecer um erro e não uma combinação.
- Dois tipos de letra chegam para quase qualquer marca, publicação ou site; um terceiro deve ter uma função restrita, como código ou etiquetas.
Nesta página
Saber combinar tipos de letra resume-se a três regras: dá a cada tipo de letra um papel distinto, faz os dois contrastarem claramente de uma maneira e deixa-os concordar em tudo o resto, como as proporções e o ambiente. Um título com serifa sobre texto corrido sem serifa é o exemplo clássico. Na dúvida, usa uma só família em dois pesos; não pode chocar consigo própria.
Começa pelos papéis, não pelos tipos de letra
Antes de escolher qualquer tipo de letra, decide que funções o texto tem de cumprir. A maioria dos designs tem duas: títulos que dão o tom e texto corrido que tem de ser confortável de ler. Alguns acrescentam uma terceira função, pequena, como etiquetas ou código. Escolhe primeiro o tipo do texto corrido, porque carrega a maioria das palavras, e depois encontra um tipo de título que o complemente.
| Papel | A sua função | O que mais importa |
|---|---|---|
| Título | Dar o tom, ser visto primeiro | Carácter, peso, aspeto em tamanho grande |
| Texto corrido | Ler-se com conforto em textos longos | Legibilidade, textura uniforme, bons regular e itálico |
| Etiquetas e texto pequeno | Ler-se depressa em tamanhos pequenos | Formas claras, espaçamento aberto, pesos robustos |
| Código ou algarismos | Alinhar e não deixar ambiguidade | Monoespaçado ou algarismos tabulares |
Papéis à vista: um título grande com carácter, uma pequena etiqueta por cima e uma frase de apoio discreta por baixo. O contraste está no tamanho e no papel antes de estar no tipo de letra.
Contrasta de uma maneira, concorda no resto
Uma combinação precisa de uma diferença visível, senão o segundo tipo de letra parece um acidente. Mas se os dois diferirem em tudo ao mesmo tempo, parecem vindos de projetos diferentes. Escolhe um eixo de contraste e mantém o resto próximo.
- Classificação: uma serifa com uma sem serifa. O contraste mais fiável. Serifa ou sem serifa explica o que cada uma traz.
- Peso: um corte de destaque pesado com um corte de texto regular, mesmo da mesma família.
- Largura: um tipo de título condensado com texto corrido de largura normal.
- Concorda nas proporções: alturas-x semelhantes, a altura das letras minúsculas, fazem os dois assentar bem juntos na mesma linha.
- Concorda no ambiente: uma serifa quente e suave combina com uma sem serifa humanista e quente; uma sem serifa geométrica e afiada combina com uma serifa nítida e de alto contraste.
Uma família ou duas
A combinação mais simples é não combinar: uma só família em dois ou três pesos. É coerente por natureza e difícil de errar. As superfamílias vão mais longe, com uma serifa e uma sem serifa desenhadas em conjunto para partilharem proporções, por isso tens o contraste de duas classificações com a harmonia de um só desenho.
Uma família
- Contraste só pelo peso e pelo tamanho
- Harmonia garantida
- Voz mais discreta e uniforme
- Exemplo: títulos em Archivo Black, texto em Archivo
Duas famílias
- Contraste pela classificação ou pelo carácter
- Exige proporções e ambiente a condizer
- Mais expressivo, mais personalidade
- Exemplo: títulos em Fraunces, texto em Inter
Combinações de tipos de letra provadas no Google Fonts
Estes pares usam tipos de letra gratuitos no Google Fonts e muito usados, o que os torna fáceis de testar. Trata-os como pontos de partida: compõe as tuas próprias palavras com eles e avalia o resultado.
| Título | Texto corrido | Contraste | Sensação |
|---|---|---|---|
| Playfair Display | Source Sans 3 | Serifa de alto contraste com uma sem serifa limpa | Editorial, clássico |
| Fraunces | Inter | Serifa suave e com carácter com uma sem serifa neutra | Quente, contemporâneo |
| DM Serif Display | DM Sans | Serifa de destaque com a sua sem serifa companheira | Simpático, cuidado |
| Instrument Serif | Inter | Serifa condensada com uma sem serifa neutra | Moda, editorial |
| IBM Plex Serif | IBM Plex Sans | A serifa e a sem serifa de uma superfamília | Preciso, técnico |
| Space Grotesk | Inter | Grotesca peculiar com uma simples | Tecnologia, produto |
| Archivo Black | Archivo | Peso dentro de uma só família | Arrojado, direto |
<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
Evita
- Duas sem serifa neutras que diferem só ligeiramente
- Dois tipos de destaque a competir pela atenção
- Um terceiro e um quarto tipo de letra para variar
- Tipos com alturas-x muito diferentes na mesma linha
Em vez disso
- Uma sem serifa em dois pesos, ou uma serifa com ela
- Um tipo de destaque, um tipo de texto discreto
- Dois tipos de letra, com pesos e tamanhos para variar
- Tipos com proporções semelhantes
Os tipos de destaque são os mais tentadores de usar em excesso. São feitos para tamanhos grandes e linhas curtas; texto corrido composto num deles cansa a vista depressa. Os tipos de letra de destaque mostram onde brilham.
Como testar uma combinação de tipos de letra em dez minutos
- 1
Usa palavras reais
Compõe um título a sério e um parágrafo verdadeiro do teu trabalho, não texto de enchimento.
- 2
Usa tamanhos reais
O título em grande, o texto corrido em tamanho de leitura, no formato que vais usar de facto.
- 3
Observa a textura
Afasta-te. O texto corrido deve parecer um cinzento uniforme; o título deve destacar-se claramente dele.
- 4
Experimenta no telemóvel
Muitas combinações que parecem elegantes num monitor desfazem-se no tamanho do telemóvel. Os tipos de letra para redes sociais mostram o que aguenta.
- 5
Verifica os detalhes
Algarismos, pontuação, itálicos e todas as línguas em que publicas.
Quando tiveres escolhido, regista a combinação com pesos e tamanhos para que todos a usem da mesma forma; os tipos de letra da marca tratam de licenças e línguas, e as bases da tipografia tratam da escala. Na Gradiently, os tipos de letra vivem no teu kit de marca e aplicam-se a cada novo design.
Perguntas frequentes
O que é combinar tipos de letra?
É escolher dois tipos de letra, normalmente um para títulos e outro para o texto corrido, que contrastam claramente de uma maneira e concordam nas proporções e no ambiente.
Quantos tipos de letra devo usar?
Dois chegam para quase tudo. Um terceiro deve ter uma função restrita, como código ou etiquetas pequenas.
Posso usar só um tipo de letra?
Sim. 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 fiáveis incluem Fraunces com Inter, Playfair Display com Source Sans 3 e IBM Plex Serif com IBM Plex Sans.
Porque é que os meus dois tipos de letra ficam mal juntos?
Normalmente são demasiado parecidos, e a diferença parece um erro, ou diferem em tudo ao mesmo tempo. Mantém um contraste claro e iguala as proporções.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
