# Combinações de Google Fonts: 25 pares que funcionam [Canonical HTML page](https://gradiently.design/pt-pt/guide/google-fonts-pairings) Todos os pares aqui são gratuitos no Google Fonts e escolhidos pelo comportamento em títulos e texto corrido reais. Agrupados pela sensação que queres, com os pesos que fazem cada um funcionar. ## The short version - Uma boa combinação de Google Fonts dá ao título e ao texto funções claramente diferentes, normalmente contrastando uma fonte de exibição ou com serifa com uma sem serifa simples. - Pares da mesma superfamília, como DM Serif Display com DM Sans ou IBM Plex Sans com IBM Plex Mono, são o ponto de partida mais seguro. - O texto corrido precisa de uma fonte com boa altura de x e formas abertas num peso regular de 400; os títulos podem ter mais personalidade. - As fontes do Google Fonts têm licenças abertas que permitem uso comercial, incluindo em logótipos, produtos e trabalho para clientes. - Carrega só os pesos que usas e acrescenta display=swap para manter as páginas rápidas. As melhores **combinações de Google Fonts** contrastam uma fonte de título com carácter com uma fonte de texto discreta e legível: Fraunces com Inter, Playfair Display com Source Sans 3, Space Grotesk com Inter, ou DM Serif Display com DM Sans. Abaixo ficam 25 combinações agrupadas por ambiente, cada uma com os pesos que a fazem funcionar e o que serve. Todas são gratuitas, todas permitem uso comercial e todas carregam com uma linha de código. Escolhe primeiro um grupo pela sensação, depois um par pela função. ## Como ler estas combinações Cada par tem 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 dar ênfase. Se o raciocínio é novo para ti, [combinar fontes](https://gradiently.design/pt-pt/guide/font-pairing) explica porque o contraste vence a semelhança, e [serifa vs sem serifa](https://gradiently.design/pt-pt/guide/serif-vs-sans-serif) mostra o que cada família traz. Uma publicação vertical de estilo editorial com um grande título de exibição por cima de um texto de apoio mais pequeno e calmo Uma combinação dá à página duas vozes. O título atrai; o texto explica. Nunca devem competir. ## Combinações editoriais: títulos com serifa e texto sem serifa A estrutura clássica. Um título com serifa traz calor e autoridade; um texto sem serifa mantém a leitura longa fácil nos ecrãs. | # | Título | Texto | Serve para | | --- | --- | --- | --- | | 1 | Playfair Display 700 | Source Sans 3 400 | Revistas, restaurantes, casamentos | | 2 | Fraunces 600 | Inter 400 | Comida, marcas artesanais, newsletters | | 3 | DM Serif Display 400 | DM Sans 400 | Agências, portfólios, páginas de aterragem | | 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 | Edição, direito, leituras longas e ponderadas | A Fraunces tem um eixo de tamanho ótico: em tamanhos grandes os pormenores afiam-se. A Cormorant Garamond é delicada nos ecrãs, por isso reserva-a para títulos. ## Combinações modernas sem serifa para tecnologia e produto Para software, startups e tudo o que deva parecer atual. O título leva o carácter pela forma, pela largura ou por detalhes curiosos, enquanto o texto é um cavalo de trabalho. | # | Título | Texto | Serve para | | --- | --- | --- | --- | | 7 | Space Grotesk 700 | Inter 400 | Ferramentas para programadores, fintech, painéis | | 8 | Syne 700 | Manrope 400 | Estúdios criativos, eventos, música | | 9 | Sora 600 | Figtree 400 | Apps, sites SaaS, integração inicial | | 10 | Unbounded 600 | Plus Jakarta Sans 400 | Marcas futuristas, jogos, lançamentos | | 11 | Archivo Black 400 | Archivo 400 | Páginas de produto ousadas, desporto, retalho | A Unbounded e a Syne são largas e ruidosas: mantém os títulos curtos. A Archivo combina consigo própria porque o peso black é um bicho diferente do regular. ## Títulos sem serifa com texto com serifa A estrutura inversa serve a leitura longa: um título sem serifa limpo assinala as secções, e um texto com serifa tem ar de livro e abranda o olhar de forma agradável. | # | Título | Texto | Serve para | | --- | --- | --- | --- | | 12 | Poppins 600 | Lora 400 | Blogues, coaching, sites pessoais | | 13 | Montserrat 700 | Merriweather 400 | Guias, organizações sem fins lucrativos, relatórios | | 14 | Bricolage Grotesque 700 | Newsreader 400 | Ensaios, meios independentes | | 15 | Outfit 600 | Source Serif 4 400 | Documentação, material de cursos | ## Combinações simpáticas e arredondadas | # | Título | Texto | Serve para | | --- | --- | --- | --- | | 16 | Fredoka 600 | Nunito 400 | Marcas infantis, brinquedos, cafés para famílias | | 17 | Quicksand 700 | Mulish 400 | Bem-estar, animais, serviços gentis | | 18 | Rubik 600 | Karla 400 | Apps comunitárias, serviços locais, instituições de caridade | As fontes arredondadas parecem acessíveis mas suaves. A Quicksand parece leve abaixo de 600; usa os pesos mais fortes para tudo o que tenha de se ler. ## Combinações de exibição ousadas para cartazes e redes sociais As fontes de exibição condensadas e pesadas encaixam palavras grandes em enquadramentos pequenos, e é por isso que dominam miniaturas e cartazes. Precisam de um parceiro calmo. [Texto em miniaturas](https://gradiently.design/pt-pt/guide/typography-for-thumbnails) e [fontes para títulos](https://gradiently.design/pt-pt/guide/headline-fonts) vão mais longe. | # | Título | Texto | Serve para | | --- | --- | --- | --- | | 19 | Anton 400 | Roboto 400 | Miniaturas, desporto, publicações ao estilo de notícias | | 20 | Bebas Neue 400 | Montserrat 400 | Ginásios, eventos, ementas ousadas | | 21 | Oswald 600 | Lato 400 | Cartazes, campanhas, saldos | | 22 | Abril Fatface 400 | Poppins 400 | Publicações de moda, bebidas, vida noturna | ## Combinações técnicas e de luxo | # | Título | Texto | Serve para | | --- | --- | --- | --- | | 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Documentação para programadores, dados, investigação | | 24 | Space Grotesk 500 | Space Mono 400 | Software independente, zines, portfólios | | 25 | Bodoni Moda 500 | Jost 400 | Joalharia, perfume, retalho de gama alta | Na 24 a monoespaçada é o texto: serve para notas curtas e etiquetas, não para ensaios. As linhas finas da Bodoni Moda ficam melhor em tamanho grande, acima de cerca de 32 px. ## Erros que estragam uma combinação ### Evita - Duas fontes sem serifa parecidas, que parecem um erro - Duas fontes de exibição a lutar por atenção - Uma serifa de traço finíssimo para texto corrido nos ecrãs - Carregar todos os pesos das duas famílias - Uma terceira fonte para um título especial ### Faz - Contraste claro de estrutura, peso ou largura - Uma fonte ruidosa e uma discreta - Texto a 400 numa fonte com boa altura de x - Só os dois a quatro pesos que usas - Usa antes o peso ou o tamanho das tuas duas fontes ## Como acrescentar uma combinação de Google Fonts ao teu site 1. **Escolhe os pesos** Normalmente um peso para o título e dois para o texto. Cada peso extra é mais um ficheiro a descarregar. 2. **Copia o código de incorporação** Seleciona as famílias no Google Fonts e copia a ligação que ele dá, ou adapta o código abaixo. 3. **Define as funções em CSS** Dá aos títulos e ao texto as suas próprias variáveis de família de fonte, para que uma troca futura seja uma alteração de uma linha. 4. **Testa com texto real** Confirma um parágrafo longo, um título de duas linhas e o nome de produto mais comprido antes de te comprometeres. ```html ``` Combinação 2, Fraunces com Inter, a carregar só três pesos. Troca os nomes das famílias por qualquer par acima. As Google Fonts são gratuitas para uso comercial, mas lê [licenciamento de fontes](https://gradiently.design/pt-pt/guide/font-licensing) antes de modificares uma ou a venderes como parte de um produto. Para a escolha pegar numa marca inteira, transforma-a num [sistema tipográfico](https://gradiently.design/pt-pt/guide/brand-typography-system) com funções nomeadas. Para publicações sociais e apresentações, define o teu par uma só vez num kit de marca do Gradiently (parte do Pro), que guarda uma fonte de título e uma de texto e aceita [ficheiros de fontes carregados](https://gradiently.design/pt-pt/guide/custom-fonts-upload), e o Designer usa-as ao compor um design. ## FAQ ### Quais são as melhores combinações de Google Fonts? Pontos de partida fiá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 bem com Montserrat? Merriweather para o texto dá um contraste clássico de sem serifa e serifa. A Bebas Neue funciona por cima da Montserrat como título de cartaz ousado. ### O que combina bem com Playfair Display? Uma sem serifa simples e aberta para o texto, como Source Sans 3, Lato ou Inter. Evita juntá-la a outra serifa de alto contraste. ### As Google Fonts são gratuitas para uso comercial? Sim. As fontes do Google Fonts usam licenças abertas, sobretudo a SIL Open Font License, que permitem uso comercial, incluindo logótipos, websites, impressão e trabalho para clientes. Lê a licença na página de cada fonte se pretendes modificar ou redistribuir os ficheiros. ### Quantas fontes deve usar um website? Duas chegam para a maioria dos sites: uma para títulos e outra para o texto, só nos pesos de que precisas.