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.
- Advertisement -
Por que usar as fontes do Google?
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.
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.
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.
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.
Em seguida, copie o código na seção Especificar em CSS e cole-o no documento CSS da folha de estilo do site.
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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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.
