10 Fantásticas combinações de fontes do Google Tendência em 2021

Uma lista de fontes da moda escolhidas a dedo a partir de fontes do Google que combinam bem e como instalá-las no seu website.

• Artigo de Jason Beever
• Actualizado: 2 de janeiro de 2020
• Tags: tipografia, web design

Tipografia do site costumava ser uma prática de design mais mistificante do que é hoje. O complicado processo de decorar uma página web com fontes personalizadas uma vez exigiu a conversão e incorporação de arquivos de fontes a serem hospedados no servidor do usuário, e a escolha das fontes disponíveis foi limitada à própria coleção do usuário ou ao conhecimento de tipografia fora do sistema padrão de fontes. Como resultado, a maioria dos sites parecia quase idêntica em sua formatação de conteúdo, que dependia de muitas fontes superutilizadas e mundanas seguras para a web.

Que tudo mudou em 2010 com o lançamento do Google Fonts, um projeto de código aberto que permite a implementação muito mais fácil de fontes personalizadas em sites. A instalação dessas fontes em seu próprio site é, felizmente, um processo rápido e fácil, mas você deve estar ciente de que nem toda combinação de fontes na biblioteca do Google é uma receita para o sucesso tipográfico. Com os pares de fontes certos e considerações de uso, no entanto, sua marca on-line pode exalar profissionalismo, beleza e facilidade de leitura sem a necessidade de fontes caras e personalizadas. Neste artigo, vou mostrar-lhe como realizar tudo isto.

Uma Lista de 10 Combinações de Tendências de Fontes do Google

Vamos ao que interessa! Em nenhuma ordem em particular, aqui estão 10 das melhores combinações de fontes do Google actualmente com tendência:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Aqui está uma combinação fácil que funciona maravilhosamente para quase qualquer uso aplicável. Open Sans é uma das fontes mais versáteis de toda a coleção de fontes do Google. É extremamente fácil de ler em grandes blocos de texto, ao mesmo tempo em que ainda é impressionante o suficiente para manchetes.

Simples. Sofisticado. Familiar. Você não pode errar!

Uso Mundo Real

Não posso prever nenhum cenário onde Open Sans seria uma má escolha. A menos que você esteja procurando especificamente por uma fonte serif, acho que esta servirá perfeitamente para qualquer negócio, blog, página de destino ou aplicação web.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald é uma ótima fonte para manchetes, não importa o peso da fonte ou o uso de bonés. A sua natureza condensada ajuda-o a captar a atenção e a pop, mas também faz um texto agradavelmente único como a fonte principal do seu corpo.

EB Garamond é uma actualização elegante da fonte clássica Garamond. Instantaneamente reconhecível e intemporal na aparência, esta fonte exala um profissionalismo distinto em sua tipografia.

Real-World Use

Este par funciona bem para profissionais que lidam com clientes de alto nível, tais como advogados, agências imobiliárias, ou mesmo boutiques de luxo. A versatilidade de Oswald e o visual clássico de EB Garamond fazem com que o texto de descrição do produto seja excelente, onde é importante destacar um item de qualidade premium.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat é um favorito entre os designers pela sua versatilidade e simplicidade, e os pares Merriweather maravilhosamente com o seu estilo contrastante e de fácil leitura. Sinta-se à vontade para trocá-los como manchetes ou texto de parágrafo – ambos funcionam muito bem como!

Real-World Use

Esta combinação particular é um bom equilíbrio entre o design moderno e clássico. Como tal, a sua variedade de usos poderia suportar muitos tipos de negócios. Pessoalmente, sinto que estas fontes se sairiam bem para qualquer tipo de fonte de notícias online ou agência editorial.

4. Roboto Fino + Roboto Regular

• Roboto Fino
• Roboto Regular

A família de fontes Roboto é uma das favoritas e é também uma das que usamos aqui no How To Get Online. Extremamente versátil com uma grande variedade de pesos de fontes, não há praticamente nenhuma limitação para o que a fonte poderia ser usada. Moderno e geométrico, mas de alguma forma permanecendo amigável e confiável, o Roboto é uma maravilha de forma e função.

Uso Mundo Real

Aqui está outro par para o qual seria difícil encontrar um mau uso. Enquanto Roboto trabalha para quase tudo, eu acho que é particularmente bom para start-ups de tecnologia, pequenas empresas modernas, ou qualquer tipo de marca com um olho no futuro.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

É o nosso amigo Roboto novamente! Desta vez, porém, estamos olhando para a variação serifa, a laje de Roboto. É uma fonte que é tão versátil quanto seu primo, mas um pouco mais clássica em estilo. Quando emparelhado com o distinto e ousado Raleway, temos uma combinação incrível de tipografia limpa e refinada.

Real-World Use

Raleway é uma daquelas fontes que grita sofisticação. Quando usada como manchete de todas as tampas, acho que funciona lindamente para artigos de luxo como jóias, roupas de grife, ou produtos de comércio eletrônico de alto nível. Roboto Slab suporta-o bem com texto descritivo simples e acessível.

Ambos também funcionam de forma intercambiável. Experimente variações de peso diferentes para as duas fontes nos cabeçalhos e no texto do corpo e veja qual par captura a melhor marca.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

De acordo com seu designer, Playfair Display foi inspirado nas formas de letra do século 18 durante a transição de penas para canetas com ponta de aço. Não é surpresa então que esta fonte exalte charme do velho mundo, mas com uma rotação moderna.

Source Sans Pro empurra as coisas um pouco mais para o futuro, criando uma combinação intrigante que é ornamentada enquanto ainda é utilitária.

Real-World Use

Playfair Display adiciona um toque pessoal a algo como uma tagline ou descrição do produto. Se você tiver a chance de usar seus símbolos de ampersand ou moeda, você verá imediatamente porque ele é a escolha perfeita para um produto ou serviço centrado em luxo e aparência. Source Sans Pro mantém o texto fundamentado em uma apresentação moderna e limpa.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One pode não ser a mais versátil das fontes, mas uma coisa que faz extremamente bem é criar manchetes que exigem atenção. Pequenas ou grandes, minúsculas ou todas as letras maiúsculas, essas letras são hipnóticas não importa o que você faça com elas.

Noto Sans pretende ser uma fonte verdadeiramente universal onde, não importa o idioma, ela pode ser exibida sem erros de formatação para usuários em todo o mundo. Apropriadamente, a estética da fonte é tão versátil quanto a sua utilidade.

Utilização no mundo real

Blogs ou páginas de destino seriam ótimos para este par – ou realmente qualquer coisa com longos corpos de texto que requerem subtítulos perceptíveis para quebrar o conteúdo. A adaptabilidade universal do Noto Sans também o torna uma boa escolha onde alcançar uma audiência internacional é uma prioridade.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya tem um certo apelo que me parece muito “terroso” e amigável. Não há nenhuma pretensão sobre sua personalidade; o que você vê é o que você recebe.

Lato poderia dar Open Sans uma corrida por seu dinheiro como o campeão de fontes para todos os fins na biblioteca do Google.

Todos juntos eles fazem uma combinação que é divertida, fácil de ler e pragmática.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

Outro moderno assume um estilo do Velho Mundo, PT Sans e seus irmãos, PT Sans Narrow, fazem uma declaração imediata e inconfundível quando emparelhados.

Uso Mundo Real

A fonte funciona igualmente bem como uma manchete ou texto corporal; o par particular que você escolher dependerá da natureza de suas palavras – embora eu tenha a tendência de preferir PT Sans Narrow em rajadas mais curtas.

Intendido como uma “ferramenta muito importante para as comunicações digitais modernas”, parece mais adequado para – embora certamente não limitado a – usar essas fontes para startups tecnológicos, aplicativos de software ou outros negócios digitais.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Okay, esta é definitivamente mais do lado leve. Obviamente esta combinação não vai funcionar para todos, mas a natureza caprichosa de ambos, Amatic SC e Josefin Sans, criam algo que com certeza vai se sobressair – desde que você tenha cuidado!

Real-World Use

Se você é um artista, ator, músico ou animador divertido, então esta fonte pode ser essencial para capturar sua personalidade única. Dependendo do tom e do assunto, esta combinação também poderia funcionar para um blog de nicho.

Uma palavra de conselho: Não use Amatic SC como seu corpo principal de texto. Você vai deixar seus leitores loucos.

Bonus: 5 de nossas fontes premium favoritas

Sabemos que este artigo é sobre as melhores fontes do Google, mas também queremos mencionar algumas de nossas fontes premium favoritas como um bônus. As fontes Premium, claro, não são grátis – mas dão ao seu site um design mais único e personalizado. Essas fontes não são populares ou com tendências e são, na verdade, o oposto daquelas que listamos acima. Entretanto, elas são ótimas para aqueles que querem um design personalizado e personalizado para sua marca e combinam bem quando usadas para logotipos ou mesmo cabeçalhos criativos:

Bonus 1: The Mega Craft Bundle X

Bonus 2: The Valentine’s Bundle

Bonus 3: The Cool Font Bundle

Bonus 4: The Little Graphics Bundle

Bonus 5: Ciúmes

Por que deve usar as fontes do Google?

Bem-vindo ao que muitos web designers consideram o seu melhor amigo. Falando por experiência, eu posso dizer que eu raramente incorporo mais arquivos de fontes personalizadas em websites. O Google Fonts é agora quase exclusivamente o primeiro e último lugar a que recorro para a tipografia de um site. Aqui está porque:

• É completamente gratuito. Não importa quantas fontes você escolha ou em quantos sites você as usa. Você nunca pagará um centavo.
• A partir de março de 2018, há mais de 850 fontes na biblioteca. É provável que você encontre o estilo certo para combinar com sua marca.
• É rápido. Como as fontes estão hospedadas nos servidores do Google, os arquivos são inteligentemente compactados e projetados para carregar rapidamente.
• É fácil. Uma simples cópia e cola em um arquivo HTML e você está pronto.
• É organizado. Todas as fontes são categorizadas e pesquisáveis dentro de uma base de dados. Chega de percorrer subpastas confusas no seu computador para encontrar aquela fonte perfeita.
• Did I mention it’s free? É grátis!

Como instalar fontes do Google

Não é necessário ter dores de cabeça aqui. Basta ir ao Google Fonts e encontrar a(s) fonte(s) que você precisa.

Como você seleciona suas fontes elas são cumulativamente adicionadas a uma coleção no final da página. Quando terminar sua busca, clique na aba inferior e uma janela com instruções de incorporação aparecerá.

Adding Styles

Daqui você pode escolher incluir estilos adicionais como itálico, negrito, bold-italic e assim por diante. Basta clicar na aba CUSTOMIZE e selecionar os estilos que você acha que vai precisar.

Por exemplo, aqui está como eu selecionaria tanto o texto normal como o negrito para a fonte Khula.

Incluindo o Standard ou @Import?

Você vai notar que você tem duas opções para incorporar as fontes no seu site: usando um padrão <link href> para ser usado no arquivo HTML do seu site, ou um @import url para ser incluído no arquivo CSS do seu site. Então qual você deve usar?

Geralmente a melhor opção é copiar e colar a linha <link href> no seu arquivo HTML. Suas fontes normalmente serão carregadas mais rápido desta forma ao invés de esperar o arquivo CSS carregar, e este método também tem um pouco melhor suporte para navegadores (muito) antigos.

Onde colocar o código

Você vai copiar e colar a linha de código que o Google lhe dá na seção <head> do seu arquivo HTML. Então usando a fonte Khula que eu escolhi acima, ela ficará assim:

Usando a fonte na sua folha de estilo

Agora você simplesmente chama a fonte como de costume dentro do seu código CSS. Para fins de demonstração, o seu cabeçalho principal e o texto do parágrafo poderiam ser assim:

Advice On Pairing Your Fonts

Decidir quais fontes agrupar às vezes pode ser um difícil equilíbrio artístico a atingir. Por um lado, sua seleção de fontes será mais eficaz quando houver contraste suficiente nos estilos; cada fonte em seu site deve se destacar das outras e ganhar uma justificativa para o seu uso. Por outro lado, você não quer que suas fontes se afastem muito umas das outras estilisticamente, o que poderia dar a impressão de que foram escolhidas aleatoriamente.

Serif e Sans-Serif

Um método experimentado e verdadeiro é emparelhar uma fonte serif com uma fonte sans-serif. Seus estilos tendem a contrastar bem juntos, oferecendo uma distinção fácil entre manchetes e parágrafos.

Experimentação é chave

Quando estou escolhendo fontes para um novo site, gosto de baixar todas as opções possíveis de fontes do Google para o meu computador e jogar com elas em um documento de processamento de texto. A combinação de tamanhos e pesos diferentes e a comparação das combinações lado a lado é uma forma eficaz de determinar o melhor emparelhamento possível. Ao tomar tempo para experimentar, você pode até descobrir que usar uma fina variação de uma determinada fonte faz com que o texto do cabeçalho seja melhor do que se você usasse uma fonte totalmente separada. (A solução mais simples é muitas vezes a melhor.)

Conclusion

Google Fonts é um recurso poderoso para os DIYers que não querem pagar por fontes personalizadas caras no seu website. Mas com grande poder vem grande responsabilidade: a tipografia requer uma cuidadosa reflexão para que seja bem feita, e nem todas as fontes por aí são vencedoras. Esperamos que este guia ajude a orientá-lo na direção certa, inspirando-o a encontrar aquele par de fontes perfeito para capturar a personalidade da sua marca.