20 melhores fontes do google gratuitas e como usa las designe
em ,

AMEIAMEI

20 Melhores Fontes do Google e Como Usá-las

Você planeja usar o Google Fonts em seu site? Em seguida, este guia ajudará você a escolher não apenas a fonte certa para o seu design, mas também aprenderá como instalá-las em seu site.

Nesta postagem, apresentamos algumas das Fontes do Google mais criativas que oferecem a melhor experiência do usuário em termos de legibilidade. Também daremos algumas dicas sobre como usar o Google Fonts.

Você nunca deve usar uma fonte apenas porque algumas pesquisas ou estatísticas mostram que ela é popular. Ao escolher uma fonte, pense primeiro em seus usuários, sua marca e seu público-alvo.

Em vez de examinar as contagens de downloads e pesquisas aleatórias, vamos aprender a encontrar uma ótima fonte que se adapte ao design do seu site.

Por que usar as fontes do Google?

google-fonts

Quando se trata de fontes da Web, o Google Fonts é um recurso que os designers da Web não podem viver. Permite adicionar tipos de letra personalizados a todos os tipos de sites e aplicativos da Web com bastante facilidade.

Com uma coleção de mais de 900 fontes que suportam mais de 135 idiomas diferentes, o Google Fonts oferece acesso a uma grande biblioteca de fontes da Web, totalmente gratuita.

Além de hospedar e atualizar regularmente as fontes, o Google Fonts também permite o uso gratuito das fontes em projetos pessoais e comerciais, sem a necessidade de adicionar atribuição.

Dadas as complicações de preço e licenciamento que acompanham a maioria das fontes premium, o Google Fonts é um recurso que você simplesmente não pode pagar.

4 dicas para usar as fontes do Google de maneira mais eficaz

A biblioteca de fontes do Google inclui vários designs de fontes bonitos. À primeira vista, você provavelmente desejará usar todos eles de uma vez. Siga estas dicas para evitar cometer esses erros.

# 1 não use mais de duas fontes

Use uma fonte para títulos e outra fonte para o corpo do texto ou parágrafos. Essa é uma regra muito comum que todos os designers, designers da Web e gráficos, seguem ao criar todos os tipos de projetos.

O uso de mais de duas fontes pode interferir na experiência do usuário e até quebrar a consistência do design. Também afetará o tempo de carregamento do site.

Isso coloca mais pressão sobre você ao escolher fontes, mas felizmente você pode testar diferentes combinações de fontes usando o Google Fonts para encontrar o par certo gratuitamente.

# 2 Use menos pesos de fonte

O uso de muitos pesos de fonte também pode afetar o desempenho do site ou do aplicativo. Como o site precisa extrair muitos tipos de fontes dos servidores do Google cada vez que uma página é carregada, isso pode tornar o site mais lento.

Dependendo do tipo de site ou aplicativo que você está criando, use apenas 2 a 3 pesos de fonte. Um para texto normal e outro para texto em negrito, bem como a versão em itálico.

# 3 Considere o tamanho do ponto

Tamanho em pontos é o tamanho da fonte que você usa nos designs. Por exemplo, 16pt a 24pt é um tamanho comum usado para o corpo do texto em designs de sites e blogs. Ao escolher uma fonte da Web, lembre-se de levar em consideração o tamanho do ponto.

Dependendo de como você usa a fonte da Web, o tamanho do ponto determinará a aparência do texto em seu design. Algumas fontes ficam melhores em títulos grandes e outras funcionam melhor no texto do parágrafo.

O suporte multilíngue nº 4 é importante

De acordo com as Estatísticas mundiais da Internet , apenas 25% dos usuários da Internet usam o idioma inglês. Existem bilhões de pessoas que usam outros idiomas.

Mesmo que seu site seja escrito em inglês, o Google agora permite que os usuários traduzam facilmente o texto do site em diferentes idiomas. No entanto, ele só funcionará se a fonte usada for compatível com o idioma do usuário. Portanto, escolha uma fonte que suporte os idiomas do seu público-alvo.

Como criar pares de fontes do Google

Um par de fontes são as duas (ou mais) fontes que você escolhe nas coleções do Google Fonts para usar em seu design. A plataforma facilita a escolha das fontes que você deseja enquanto navega na coleção e também o gerenciamento fácil dos pesos das fontes.

google-fontes-selecione

Para escolher um par de fontes, basta clicar no ícone de adição (+) ao lado de uma fonte e ela será automaticamente adicionada como uma seleção. Em seguida, você pode clicar no painel flutuante no lado direito para remover fontes da seleção, copiar o código de incorporação para instalar a fonte em seu site e escolher os pesos para as fontes.

google-fontes-emparelhamento-sugestões

Quando você seleciona uma fonte, o Google Fonts sugere fontes correspondentes para parear com a fonte selecionada. Isso facilita a criação de um par de fontes. Você também pode usar ferramentas como FontPair e Fontjoy para encontrar facilmente ótimos pares de fontes com apenas alguns cliques.

Como instalar as fontes do Google no seu site

Depois de escolher uma fonte e seus pesos nas fontes do Google, você pode instalá-la no seu site usando o código de incorporação.

google-fontes-embed-1

Copie o código na seção Incorporar fonte e cole-o na seção principal do seu site. Inclua-o logo após a tag <head> para obter o melhor desempenho.

google-fontes-embed-2

Em seguida, copie o código na seção Especificar em CSS e cole-o no documento CSS da folha de estilo do site.

google-fontes-css-embed

Por exemplo, se você deseja que o texto do seu corpo e os títulos H1 usem fontes diferentes, será necessário especificar cada fonte separadamente no arquivo CSS.

Como usar as fontes do Google no WordPress

Enquanto a maioria dos temas premium do WordPress inclui suporte interno para fontes personalizadas do Google, alguns temas têm seleções limitadas de fontes. Se você deseja usar o Google Fonts no WordPress, ainda pode seguir o método descrito acima. Mas, a maneira mais fácil é instalar um plugin.

Instalando o plug-in gratuito O Easy Google Fonts permitirá que você acesse a biblioteca do Google Fonts acessando Appearance >> Customize e depois no menu Typography .

Melhores fontes do Google para sites e aplicativos da Web

1. Roboto

google-fontes-roboto
  • Tipo de fonte: Sans-Serif
  • Melhor para: Texto do corpo

Roboto é uma das fontes da Web mais populares na biblioteca do Google Fonts, usada por mais de 26 milhões de sites. Possui um design sem serifa suave que a torna uma ótima opção para parágrafos longos e outros textos do corpo.

2. Montserrat

google-fontes-montserrat
  • Tipo de fonte: Sans-Serif
  • Melhor para: Texto e títulos do corpo

Montserrat é uma fonte exclusiva que pode ser usada para títulos e texto do corpo. Ele vem em vários estilos, variando de pesos finos a extra-ousados ​​e pretos. A fonte também combina bem com o Roboto.

3. Exposição do Playfair

google-fontes-playfair-display
  • Tipo de fonte: Serif
  • Melhor para: Cabeçalhos

O Playfair Display é uma fonte serif elegante usada por mais de 5 milhões de sites na Internet. A fonte é mais adequada para criar títulos e títulos grandes. Está disponível em 3 pesos diferentes.

4. Lora

google-fontes-lora
  • Tipo de fonte: Serif
  • Melhor para: Texto do corpo

Lora é uma das melhores fontes da web com serifa disponíveis no Google Fonts. É uma ótima opção para o texto do corpo de sites de notícias e sites corporativos. Embora a fonte inclua apenas 2 pesos e itálico.

5. Karla

karla-fontes-google
  • Tipo de fonte: Sans-Serif
  • Melhor para: Texto do corpo

Karla também apresenta um design sem serifa com uma vibração grotesca. O design de caracteres minimalista da fonte melhorará a redabilidade do site quando usado para o texto do corpo. Ele também vem em pesos regulares e em negrito, bem como em itálico.

6. Merriweather

google-fonts-merriwether
  • Tipo de fonte: Serif
  • Melhor para: Texto e títulos do corpo

Merriweather é outra fonte serif elegante comumente usada emparelhada com a fonte Lora. Essa fonte é perfeita para os títulos e o corpo do texto, especialmente para sites profissionais e comerciais.

7. Ubuntu

google-fontes-ubuntu
  • Tipo de fonte: Sans-Serif
  • Melhor para: Cabeçalhos

Ubuntu é a fonte padrão usada no popular sistema operacional Linux com o mesmo nome. Essa fonte é uma ótima opção para títulos e títulos, especialmente para blogs e revistas. Mas não é uma boa opção para o corpo do texto.

8. Rubik

google-fontes-rubik
  • Tipo de fonte: Sans-Serif
  • Melhor para: Cabeçalhos

Rubik apresenta um conjunto de caracteres com bordas arredondadas elegantes. Essa fonte é ideal para títulos e títulos em seu site. Está disponível em 5 pesos e 5 estilos.

9. Source Sans Pro

google-fontes-fonte-sans
  • Tipo de fonte: Sans-Serif
  • Melhor para: Texto do corpo

O Source Sans Pro é uma família de fontes profissionais projetada e lançada pela Adobe com uma licença de código aberto. Em termos de design, essa fonte é simplesmente perfeita e fica ótima no texto do corpo.

10. Archivo

google-fontes-arquivo
  • Tipo de fonte: Sans-Serif
  • Melhor para: Cabeçalhos

O Archivo é uma fonte sem serifa, com um design inspirado nas fontes americanas do século XIX. Ele vem em 4 pesos diferentes e itálico. A fonte é mais adequada para títulos e títulos.

11. O mais cedo possível

google-fontes-o mais cedo possível
  • Tipo de fonte: Sans-Serif
  • Melhor para: Texto e títulos do corpo

O Asap é uma fonte projetada por um par de designers profissionais e tem um design criativo sem serifa com design de personagens ligeiramente arredondado. Essa fonte vem em 4 estilos e é adequada para títulos e texto do corpo.

12. Domine

google-fontes-domine
  • Tipo de fonte: Serif
  • Melhor para: Cabeçalhos

Domine é uma das poucas fontes serif elegantes disponíveis no Google Fonts. A fonte possui apenas pesos regulares e em negrito; portanto, é melhor usada apenas em títulos e designs de títulos. A fonte também combina com Montserrat.

13. Space Mono

google-fontes-espaço-mono
  • Tipo de fonte: Serif
  • Melhor para: Cabeçalhos

Space Mono é o tipo de fonte que você normalmente vê nos sites de inicialização e programação de tecnologia. O design é inspirado nas fontes usadas na década de 1960. É mais adequado para títulos e títulos.

14. Poppins

google-fontes-poppins
  • Tipo de fonte: Sans-Serif
  • Melhor para: Texto e títulos do corpo

Poppins é uma fonte geométrica sem serifa que apresenta um design monolinear elegante. O design geométrico preciso de seus caracteres o torna adequado para os cabeçalhos e para o texto do corpo. A fonte também está disponível em 9 pesos diferentes.

15. Work Sans

google-fontes-trabalho-sans
  • Tipo de fonte: Sans-Serif
  • Melhor para: Cabeçalhos

Work Sans é uma fonte sem serifa que funciona melhor como fonte de títulos. Seus pesos em negrito e extra-negrito são os tipos de letra mais bonitos da família de fontes. A única desvantagem de usar essa fonte é que ela não inclui tipos de letra em estilo itálico.

16. Nunito

Google-fontes-nunito
  • Tipo de fonte: Sans-Serif
  • Melhor para: Texto e títulos do corpo

O Nunito é a fonte da Web perfeita para projetos criativos, pois possui um design de personagem arredondado exclusivo. A fonte inclui 7 pesos diferentes e emparelha bem como o texto do corpo e os títulos.

17. Arvo

google-fontes-arvo
  • Tipo de fonte: Serif
  • Melhor para: Texto e títulos do corpo

Arvo é uma fonte com serifa que pode ser usada em designs de sites profissionais. A fonte vem em 2 estilos e funciona tanto para o texto do corpo quanto para os títulos. A fonte também combina melhor com o Open Sans.

18. Oswald

google-fontes-oswald
  • Tipo de fonte: Sans-Serif
  • Melhor para: Cabeçalhos

Oswald possui um design estreito (ou condensado) e vem em 6 pesos diferentes. É melhor para criar títulos e títulos para sites modernos.

19. Oxyen

google-fontes-oxigênio
  • Tipo de fonte: Sans-Serif
  • Melhor para: Cabeçalhos

O oxigênio é uma fonte sem serifa que apresenta um conjunto de caracteres exclusivos. Essa fonte não inclui caracteres em itálico, o que a torna uma opção melhor para títulos e títulos.

20. Open Sans

google-fontes-aberto-sans
  • Tipo de fonte: Sans-Serif
  • Melhor para: Texto do corpo

Open Sans é outra fonte popular usada por mais de 25 milhões de sites. Seu estilo genérico de design de personagem pode não ajudar a destacar seus designs, mas é um dos melhores quando se trata de oferecer melhor experiência ao usuário e melhorar a legibilidade.

Em conclusão

Muitas decisões estão envolvidas na escolha de um par de fontes para um design web. Portanto, reserve um tempo e teste fontes diferentes para encontrar a fonte certa para o seu site ou aplicativo. Felizmente, nossa lista ajudará você a restringir sua pesquisa e acelerar esse processo.

Relatório

O que você acha?

Comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Carregando…

0
exemplos de design cyberpunk designe

8 exemplos ousados ​​de design Cyberpunk

o que e um blog thumb designe

O que é um blog? Guia para iniciantes de blogs