Explorador de combinações de fontes

O que é Explorador de combinações de fontes?

O Explorador de Combinações de Fontes é uma ferramenta gratuita no navegador para web designers, desenvolvedores e criadores de conteúdo que buscam uma combinação bem-acabada de título e corpo sem vasculhar bibliotecas de fontes. Dois seletores independentes e pesquisáveis permitem filtrar 48 Google Fonts selecionadas por serifada, sem serifa, display ou mono e escolher uma fonte para cada função, enquanto controles por função definem o peso, o tamanho, a entrelinha e o espaçamento. Uma pré-visualização ao vivo mostra o seu título e o seu parágrafo nas fontes reais, e um botão de embaralhar propõe combinações aleatórias quando você precisa de inspiração. Quando gostar, copie o CSS gerado no formato preferido — uma regra @import, uma tag HTML link ou importações no estilo Fontsource — e leve-o para uma página de destino, tema de blog, apresentação ou sistema de design.

Como usar Explorador de combinações de fontes

1. No seletor de título, filtre por serifada, sem serifa, display ou mono, digite para pesquisar e clique em uma fonte para selecioná-la.
2. Faça o mesmo no seletor de corpo para escolher uma fonte complementar para o texto de parágrafo.
3. Abra as configurações para definir o peso, o tamanho, a entrelinha e o espaçamento de cada função.
4. Digite o seu próprio título e frase no campo de amostra, ou deixe em branco para o texto padrão; pressione Embaralhar para ideias de combinação aleatórias.
5. Escolha o formato de saída — @import, <link> ou Fontsource — e copie o CSS gerado para a sua folha de estilos ou projeto.

Exemplos

Título: Playfair Display 700 · Corpo: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Formato: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

Perguntas frequentes

Como escolho as duas fontes?

Cada função tem o seu próprio seletor. Filtre o catálogo por serifada, sem serifa, display ou mono, digite parte do nome de uma família para pesquisar e clique em um resultado para selecioná-lo. O título e o corpo são escolhidos de forma independente, e o botão Embaralhar escolhe um par aleatório para você.

Posso controlar peso, tamanho, entrelinha e espaçamento?

Sim. Abra as configurações para definir o peso, o tamanho em pixels, a entrelinha e o espaçamento (em em) separadamente para o título e o corpo. Cada alteração aparece tanto na pré-visualização ao vivo quanto no CSS copiado.

Quais formatos de saída posso copiar?

Três: uma regra CSS @import, uma tag HTML <link> com dicas de preconnect e importações npm no estilo Fontsource (npm i @fontsource/… mais linhas de importação por peso). Os três incluem as mesmas regras de font-family, peso, tamanho, entrelinha e espaçamento para h1–h3 e body.

De onde vêm as fontes e o meu texto é privado?

Quando você escolhe uma combinação, o seu navegador carrega apenas essas duas famílias diretamente da API pública do Google Fonts CSS em fonts.googleapis.com — uma requisição de terceiros feita a partir do seu navegador, não pelos nossos servidores. O seu texto de amostra e as suas configurações permanecem inteiramente no seu dispositivo.

Quais fontes estão incluídas?

Um conjunto selecionado de 48 Google Fonts populares entre serifadas, sem serifa, display e monoespaçadas — incluindo Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono e mais.