InícioFerramentas de DesignCombinação de Fontes

Combinação de Fontes

A ferramenta de combinação de fontes mostra 12 combinações selecionadas de Google Fonts para títulos e texto, permite que você misture fontes por conta própria e copia o @import de CSS correspondente.

The Art of Good Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Sobre esta ferramenta

A ferramenta de combinação de fontes mostra 12 combinações selecionadas de Google Fonts para títulos e texto, permite que você misture fontes por conta própria e copia o @import de CSS correspondente.

Como usar

  1. Escolha uma das combinações selecionadas ou defina você mesmo uma fonte para títulos e outra para o texto.
  2. Use Combinação aleatória para explorar opções.
  3. Veja a prévia ao vivo do título e do parágrafo.
  4. Clique em Copiar @import de CSS para carregar as fontes no seu site.

Bom saber

  • Uma combinação clássica contrasta uma fonte serifada com uma sem serifa, como Playfair Display com Source Sans 3.
  • As combinações incluem Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter e DM Serif Display + DM Sans.
  • Limitar um site a duas famílias de fontes deixa as páginas consistentes e reduz o tamanho do download.
  • A prévia carrega as fontes escolhidas do Google Fonts nos pesos 400 e 700.
  • Adicionar display=swap à URL da fonte exibe um texto alternativo enquanto a fonte web carrega.

Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.

Perguntas frequentes

Quais fontes combinam bem?

Fontes com estilos contrastantes, mas proporções parecidas, costumam combinar bem, como um título serifado de alto contraste com um texto sem serifa limpo. As combinações selecionadas aqui são testadas e aprovadas.

Quantas fontes um site deve usar?

Duas famílias — uma para títulos e outra para o texto — bastam para a maioria dos sites. Uma terceira raramente é necessária.

As Google Fonts são grátis para uso comercial?

Sim. As fontes da biblioteca do Google Fonts são publicadas sob licenças abertas, como a SIL Open Font License, e podem ser usadas comercialmente.

Como adiciono as fontes ao meu site?

Cole o @import copiado no início do seu CSS, ou converta-o em uma tag link no head do HTML, e depois defina font-family nos títulos e no body.