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

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 explica porque o contraste vence a semelhança, e serifa vs sem serifa mostra o que cada família traz.

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.

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

Combinações simpáticas e arredondadas

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 e fontes para títulos vão mais longe.

Combinações técnicas e de luxo

Erros que estragam uma combinação

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

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

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

As Google Fonts são gratuitas para uso comercial, mas lê licenciamento de fontes 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 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, e o Designer usa-as ao compor um design.