Combinações de Google Fonts: 25 duplas que funcionam

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 explica por que o contraste vence a semelhança, e serifada versus sem serifa trata do que cada família oferece.

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.

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í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.

Combinações amigáveis e arredondadas

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 e fontes para títulos vão além.

Combinações técnicas e de luxo

Erros que quebram uma combinação

Como acrescentar uma combinação de Google Fonts ao seu site

1. 1

   Escolha os pesos

   Em geral, um peso de título e dois de texto. Cada peso extra é mais um arquivo para baixar.

2. 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. 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. 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.

<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:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  :root {
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
  }
  h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
  body { font-family: var(--font-body); font-weight: 400; }
</style>

O Google Fonts é gratuito para uso comercial, mas leia licenciamento de fontes 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 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, e o Designer as usa ao montar um design.