# Combinações de Google Fonts: 25 duplas que funcionam [Canonical HTML page](https://gradiently.design/pt-br/guide/google-fonts-pairings) Todas as duplas aqui são gratuitas no Google Fonts e foram escolhidas pelo comportamento em títulos e textos reais. Agrupadas pela sensação que você quer, com os pesos que fazem cada uma funcionar. ## The short version - Uma boa combinação de Google Fonts dá ao título e ao texto funções claramente diferentes, em geral contrastando uma fonte de exibição ou serifada com uma sem serifa simples. - Duplas da mesma superfamília, como DM Serif Display com DM Sans ou IBM Plex Sans com IBM Plex Mono, são o lugar mais seguro para começar. - O texto corrido precisa de uma fonte com altura de x generosa e formas abertas, em peso regular 400; os títulos podem ter mais personalidade. - As fontes do Google Fonts são lançadas sob licenças abertas que permitem uso comercial, inclusive em logos, produtos e trabalhos para clientes. - Carregue só os pesos que você usa e acrescente display=swap para manter as páginas rápidas. As melhores **combinações de Google Fonts** contrastam um título cheio de personalidade com um texto discreto e legível: Fraunces com Inter, Playfair Display com Source Sans 3, Space Grotesk com Inter ou DM Serif Display com DM Sans. A seguir estão 25 combinações agrupadas por clima, cada uma com os pesos que a fazem funcionar e o que ela combina. Todas são gratuitas, todas permitem uso comercial e todas carregam com uma linha de código. Escolha primeiro um grupo pela sensação e depois uma dupla pela tarefa. ## Como ler estas combinações Cada dupla traz o título primeiro e o texto depois. O peso do título é o que se usa em tamanhos grandes; o texto fica em 400, com 600 ou 700 para destaque. Se o raciocínio é novidade para você, [combinação de fontes](https://gradiently.design/pt-br/guide/font-pairing) explica por que o contraste vence a semelhança, e [serifada versus sem serifa](https://gradiently.design/pt-br/guide/serif-vs-sans-serif) trata do que cada família oferece. Um post vertical de estilo editorial com um grande título de exibição acima de um texto de apoio menor e mais calmo Uma combinação dá à página duas vozes. O título atrai; o texto explica. Elas nunca devem competir. ## Combinações editoriais: títulos serifados com texto sem serifa A estrutura clássica. Um título serifado traz calor e autoridade; um texto sem serifa mantém a leitura longa fácil nas telas. | # | Título | Texto | Combina com | | --- | --- | --- | --- | | 1 | Playfair Display 700 | Source Sans 3 400 | Revistas, restaurantes, casamentos | | 2 | Fraunces 600 | Inter 400 | Gastronomia, marcas artesanais, newsletters | | 3 | DM Serif Display 400 | DM Sans 400 | Agências, portfólios, landing pages | | 4 | Instrument Serif 400 | Instrument Sans 400 | Editorial moderno, estúdios, moda | | 5 | Cormorant Garamond 600 | Work Sans 400 | Beleza, interiores, hotéis boutique | | 6 | Libre Baskerville 700 | Libre Franklin 400 | Editoras, direito, leituras longas e cuidadosas | A Fraunces tem um eixo de tamanho óptico: em tamanhos grandes, os detalhes ficam mais nítidos. A Cormorant Garamond é delicada nas telas, então use só em títulos. ## Combinações sem serifa modernas para tecnologia e produto Para software, startups e tudo que deve parecer atual. O título carrega o caráter pela forma, pela largura ou por detalhes curiosos, enquanto o texto é um cavalo de batalha. | # | Título | Texto | Combina com | | --- | --- | --- | --- | | 7 | Space Grotesk 700 | Inter 400 | Ferramentas para desenvolvedores, fintech, dashboards | | 8 | Syne 700 | Manrope 400 | Estúdios criativos, eventos, música | | 9 | Sora 600 | Figtree 400 | Apps, sites de SaaS, onboarding | | 10 | Unbounded 600 | Plus Jakarta Sans 400 | Marcas futuristas, games, lançamentos | | 11 | Archivo Black 400 | Archivo 400 | Páginas de produto ousadas, esporte, varejo | A Unbounded e a Syne são largas e barulhentas: mantenha os títulos curtos. A Archivo combina consigo mesma porque o peso black dela é um bicho diferente do regular. ## Títulos sem serifa com texto serifado A estrutura inversa serve para leituras longas: um título sem serifa limpo sinaliza as seções, e um texto serifado tem cara de livro e desacelera o olhar de um jeito agradável. | # | Título | Texto | Combina com | | --- | --- | --- | --- | | 12 | Poppins 600 | Lora 400 | Blogs, coaching, sites pessoais | | 13 | Montserrat 700 | Merriweather 400 | Guias, ONGs, relatórios | | 14 | Bricolage Grotesque 700 | Newsreader 400 | Ensaios, mídia independente | | 15 | Outfit 600 | Source Serif 4 400 | Documentação, material de cursos | ## Combinações amigáveis e arredondadas | # | Título | Texto | Combina com | | --- | --- | --- | --- | | 16 | Fredoka 600 | Nunito 400 | Marcas infantis, brinquedos, cafés para famílias | | 17 | Quicksand 700 | Mulish 400 | Bem-estar, pets, serviços gentis | | 18 | Rubik 600 | Karla 400 | Apps de comunidade, serviços locais, instituições beneficentes | As fontes arredondadas parecem acessíveis, mas suaves. A Quicksand parece leve abaixo de 600; use os pesos mais fortes para o que precisa ser lido. ## Combinações de exibição ousadas para pôsteres e redes sociais Fontes de exibição condensadas e pesadas encaixam palavras grandes em quadros pequenos, e por isso dominam miniaturas e pôsteres. Elas precisam de um par calmo. [Texto em miniaturas](https://gradiently.design/pt-br/guide/typography-for-thumbnails) e [fontes para títulos](https://gradiently.design/pt-br/guide/headline-fonts) vão além. | # | Título | Texto | Combina com | | --- | --- | --- | --- | | 19 | Anton 400 | Roboto 400 | Miniaturas, esporte, posts em estilo de notícia | | 20 | Bebas Neue 400 | Montserrat 400 | Academias, eventos, cardápios ousados | | 21 | Oswald 600 | Lato 400 | Pôsteres, campanhas, promoções | | 22 | Abril Fatface 400 | Poppins 400 | Posts de moda, bebidas, vida noturna | ## Combinações técnicas e de luxo | # | Título | Texto | Combina com | | --- | --- | --- | --- | | 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Documentação para desenvolvedores, dados, pesquisa | | 24 | Space Grotesk 500 | Space Mono 400 | Software independente, zines, portfólios | | 25 | Bodoni Moda 500 | Jost 400 | Joalheria, perfumes, varejo de alto padrão | Na 24, a monoespaçada é o texto: funciona para notas curtas e rótulos, não para ensaios. Os traços finos da Bodoni Moda ficam melhores em tamanho grande, acima de cerca de 32 px. ## Erros que quebram uma combinação ### Evite - Duas fontes sem serifa parecidas, que parecem um erro - Duas fontes de exibição disputando atenção - Uma serifada de traço fino como texto corrido em telas - Carregar todos os pesos das duas famílias - Uma terceira fonte para um único título especial ### Faça - Contraste claro de estrutura, peso ou largura - Uma fonte forte e uma discreta - Texto em 400 numa fonte com altura de x generosa - Só os dois a quatro pesos que você usa - Usar peso ou tamanho das suas duas fontes em vez disso ## Como acrescentar uma combinação de Google Fonts ao seu site 1. **Escolha os pesos** Em geral, um peso de título e dois de texto. Cada peso extra é mais um arquivo para baixar. 2. **Copie o código de incorporação** Selecione as famílias no Google Fonts e copie o link que ele fornece, ou adapte o código abaixo. 3. **Defina os papéis em CSS** Dê ao título e ao texto suas próprias variáveis de família de fonte, para que uma troca futura seja uma mudança de uma linha. 4. **Teste com texto real** Confira um parágrafo longo, um título de duas linhas e o nome do seu produto mais longo antes de se decidir. ```html ``` A combinação 2, Fraunces com Inter, carregando só três pesos. Troque os nomes das famílias por qualquer dupla acima. O Google Fonts é gratuito para uso comercial, mas leia [licenciamento de fontes](https://gradiently.design/pt-br/guide/font-licensing) antes de modificar uma fonte ou vendê-la como parte de um produto. Para a escolha valer em toda a marca, transforme-a num [sistema tipográfico](https://gradiently.design/pt-br/guide/brand-typography-system) com papéis nomeados. Para posts e apresentações, defina sua dupla uma vez num kit de marca do Gradiently (parte do Pro), que guarda uma fonte de título e uma de texto e aceita [arquivos de fonte enviados](https://gradiently.design/pt-br/guide/custom-fonts-upload), e o Designer as usa ao montar um design. ## FAQ ### Quais são as melhores combinações de Google Fonts? Pontos de partida confiáveis são Fraunces com Inter, Playfair Display com Source Sans 3, DM Serif Display com DM Sans e Space Grotesk com Inter. ### Que fonte combina com Montserrat? Merriweather para o texto dá um contraste clássico entre sem serifa e serifada. A Bebas Neue funciona acima da Montserrat como título ousado de pôster. ### O que combina com Playfair Display? Uma sem serifa simples e aberta para o texto, como Source Sans 3, Lato ou Inter. Evite combiná-la com outra serifada de alto contraste. ### O Google Fonts é gratuito para uso comercial? É. As fontes do Google Fonts usam licenças abertas, em sua maioria a SIL Open Font License, que permitem uso comercial, inclusive em logos, sites, impressão e trabalhos para clientes. Leia a licença na página de cada fonte se pretende modificar ou redistribuir os arquivos. ### Quantas fontes um site deve usar? Duas bastam para a maioria dos sites: uma para títulos e outra para o texto, apenas nos pesos de que você precisa.