# Combinação de fontes: regras simples que funcionam [Canonical HTML page](https://gradiently.design/pt-br/guide/font-pairing) Duas fontes que ficam bem sozinhas podem brigar quando dividem uma página. Algumas regras e um punhado de pares aprovados tiram o palpite da história. ## The short version - 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. 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 tipográficos. Duas fontes cobrem os quatro; a fonte do texto muitas vezes cuida também dos rótulos. Um post editorial com um título grande, um rótulo pequeno e uma linha de apoio num estilo mais discreto 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](https://gradiently.design/pt-br/guide/serif-vs-sans-serif) 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](https://fonts.google.com/) 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 | Sete combinações do Google Fonts. Cada uma contrasta com clareza de um jeito e concorda em proporção. ```html ``` Carregando e aplicando uma combinação: Fraunces nos títulos, Inter no texto, cada uma com uma reserva sensata. Só os pesos que você usa são solicitados. ## 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](https://gradiently.design/pt-br/guide/display-fonts) 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](https://gradiently.design/pt-br/guide/fonts-for-social-media) 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](https://gradiently.design/pt-br/guide/brand-fonts) tratam de licenças e idiomas, e os [fundamentos de tipografia](https://gradiently.design/pt-br/guide/typography-basics) tratam da escala. No Gradiently, as fontes ficam no seu kit de marca e valem para todo design novo. ## FAQ ### 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.