Um bom par de fontes é uma fonte de título e uma fonte de texto diferentes o bastante para trabalhar em equipe, mas com o mesmo clima. Um ponto de partida seguro é um título com serifa e um texto sem serifa limpo, como Playfair Display + Source Sans 3. Abaixo estão seis pares do Google Fonts, um para cada estilo, e um jeito grátis de testá-los no seu site antes de mexer no código.
O que faz duas fontes formarem um bom par
Pense numa banda. A cantora é a sua fonte de título e os músicos atrás dela são a sua fonte de texto, a dos parágrafos. Se todo mundo grita ao mesmo tempo, ninguém entende a letra. Um bom par tem uma voz que se destaca e outra que a apoia. Três regras simples já te levam longe:
- Contraste, não choque. Escolha duas fontes claramente diferentes, como uma com serifa (letras com pezinhos nas pontas, como num livro impresso) ao lado de uma sem serifa (letras sem eles). Duas fontes quase iguais só parecem um erro.
- Um só estilo. Uma fonte divertida e arredondada ao lado de uma dura e formal passa sinais confusos. Escolha fontes que se sentiriam em casa na mesma sala.
- Duas fontes, nada mais. Uma para títulos e outra para texto. Dê variedade com tamanho e peso (o quanto as letras são finas ou grossas), não com uma terceira fonte.
Clássico: Playfair Display + Source Sans 3
A Playfair Display é uma serifa de traços afiados e muito contraste, que lembra um pouco a primeira página de um jornal. A Source Sans 3 é uma sem serifa calma e fácil de ler, que não faz questão de aparecer. Combina com blogs, revistas, portfólios e tudo que quer passar confiança.
Elegante: Cormorant Garamond + Montserrat
A Cormorant Garamond é uma serifa leve e graciosa, com linhas longas e delicadas. A Montserrat é uma sem serifa larga e geométrica, que dá a ela um chão moderno para pisar. Pense em moda, beleza, casamentos e restaurantes. Uma dica: a Cormorant fica fininha quando é pequena, então reserve-a para títulos grandes.
Moderno: DM Serif Display + DM Sans
A DM Serif Display é uma serifa robusta feita para manchetes grandes. A DM Sans é uma sem serifa limpa e simpática, com um jeito suave parecido, então as duas se misturam bem. Boa escolha para startups, agências e páginas de destino que querem parecer frescas, mas não frias.
Marcante: Oswald + Open Sans
A Oswald é alta e estreita, então cabem muitas palavras numa linha e ainda assim elas gritam. A Open Sans é larga, aberta e muito fácil de ler, o que equilibra. Útil para notícias, esportes, eventos e qualquer lugar em que o título precise chamar atenção.
Técnico: Space Grotesk + Inter
A Space Grotesk tem um visual geométrico meio peculiar, que diz “nós construímos coisas”. A Inter foi desenhada para telas e continua legível em tamanhos pequenos, então ela carrega os parágrafos. Um encaixe natural para software, painéis e ferramentas para desenvolvedores.
Amigável: Quicksand + Nunito
A Quicksand e a Nunito têm pontas suavemente arredondadas, então parecem feitas uma para a outra. O resultado é acolhedor e próximo. Combina com educação, crianças, apps, comida e sites de comunidade.
Como testar um par de fontes no seu próprio site
Ler sobre um par não é o mesmo que vê-lo nas suas próprias páginas, com as suas próprias palavras. O FontMee é uma extensão grátis do Chrome, um pequeno complemento que dá ao navegador uma função nova, e deixa você testar fontes num site de verdade, só na sua tela. Ele já traz pares prontos: 32 combinações de título e texto escolhidas a dedo, incluindo as seis acima. O vídeo mostra o painel em ação.
- Instale o FontMee. Adicione pela Chrome Web Store. É grátis e não pede conta. Clique no ícone de quebra-cabeça do Chrome e fixe a extensão, assim ela fica sempre a um clique.
- Abra o seu site e clique no ícone do FontMee. O painel abre ao lado da página. Você também pode apertar Alt + Shift + F. As páginas do próprio Chrome (Nova guia, a Web Store, páginas chrome://) não podem ser alteradas.
- Clique no botão Pares de fontes. Você vê uma lista de pares, cada um mostrado nas fontes de verdade, com uma etiqueta de estilo como Clássico, Marcante ou Técnico.
- Aperte Usar este par. A fonte de título e a fonte de texto mudam na hora na página. Se você já tinha escolhido uma fonte, o FontMee sugere primeiro parceiras para ela, em Para e o nome da fonte.
- Compare e ajuste. Alterne entre Fonte original e Prévia do FontMee (ou aperte Alt + Shift + O) e use Ajustar para tamanho, peso, altura da linha e espaçamento das letras. Teste dois ou três pares, porque o que vence no cartão de exemplo nem sempre vence na sua página. Manter no site guarda a sua escolha em cada visita, e Redefinir tudo deixa a página como estava.
Quatro coisas para conferir antes de decidir
- Use as suas próprias palavras. Um par que fica ótimo num slogan curto pode ficar diferente com os nomes reais dos seus produtos ou num parágrafo longo.
- Olhe o texto pequeno, e no celular. O texto dos parágrafos é lido bem mais que os títulos, então precisa ser confortável em tamanho pequeno.
- Confira as letras de que você precisa. Acentos como ç, ã e ş, e letras cirílicas ou vietnamitas, não existem em todas as fontes. O FontMee tem um filtro de Escrita que mostra só as fontes com as letras que você precisa.
- Confira a licença. O Google Fonts é código aberto e grátis para uso comercial, mas outras fontes podem não ser.
É o seu próprio site? Então testar um par é só metade do trabalho. Quando gostar de um, aperte Copiar CSS e cole as regras na folha de estilos do seu site, o arquivo que controla a aparência dele (no WordPress fica em Aparência, Personalizar, CSS adicional). O FontMee também mostra a licença de cada fonte e pode baixar um ZIP com as fontes para você hospedar, assim os navegadores dos seus visitantes carregam as fontes do seu próprio servidor e não do Google. Um site também precisa de uma casa para morar, e um construtor é o jeito mais rápido de ter uma sem código.
Pegue a extensão
O FontMee é grátis, com mais de 1.900 fontes, 32 pares prontos, Copiar CSS e o envio das suas próprias fontes. Sem conta, sem assinatura. Adicione pela Chrome Web Store ou leia primeiro a página do FontMee.
Bom saber antes de começar
- Um par é um ponto de partida, não uma regra. Gosto é pessoal, então use como escolhas seguras e confie nos seus olhos.
- Uma prévia muda só a sua tela. Os outros visitantes veem as fontes normais, e o site em si nunca é tocado.
- As fontes são buscadas no Google Fonts e no Fontshare enquanto você faz a prévia. Por isso você precisa de conexão com a internet.
- Texto dentro de imagens não muda. Só muda texto de verdade, que dá para selecionar.
- Fazer a prévia de uma fonte não é uma licença. Os seis pares acima estão todos no Google Fonts, que é código aberto. Com qualquer outra fonte, confira a licença primeiro.
Perguntas frequentes
Uma fonte de título e uma fonte de texto escolhidas para ficarem bem juntas. Uma serve para os títulos, a outra para os parágrafos.
Um título com serifa e um texto sem serifa limpo, por exemplo Playfair Display com Source Sans 3. As duas são claramente diferentes, mas ficam calmas juntas, o que faz dele um ponto de partida confiável.
Duas bastam para a maioria dos sites: uma para títulos e uma para texto. Varie o tamanho e o peso em vez de acrescentar mais. Com três ou mais, costuma começar a ficar bagunçado.
Sim. O Google Fonts é código aberto e grátis para uso pessoal e comercial. O FontMee mostra a licença de cada fonte quando você copia o CSS, para você conferir antes de publicar.
Sim. O FontMee mostra um par nas suas próprias páginas, só na sua tela, então nada é publicado e ninguém mais vê. Recarregue a página e ele some, a menos que você ative Manter no site.
Sim. As mais de 1.900 fontes, os 32 pares prontos, todas as camadas, Copiar CSS e o envio das suas próprias fontes são grátis, sem conta e sem limites.
FontMee — Grátis, mais de 1900 fontes
Feito pela GetPlugzz. Grátis, sem conta e sem rastreamento.
Guia em PDF grátis: teste qualquer fonte em qualquer site como um profissional
Cada botão do FontMee explicado em 10 páginas curtas: as 4 camadas, a biblioteca de fontes, o ajuste, os pares, antes / depois, Copiar CSS e guardar o que você gosta. Digite seu e-mail e o download começa na hora.
Adicionamos seu e-mail à newsletter do GetPlugzz (novos posts, ferramentas e extensões). Sem spam, e você pode cancelar quando quiser. Privacidade
