.certificate-info:before { content: "\E086"; font-family: Glyphicons Halflings; }

Blog do BOWWE

Conselhos práticos sobre criação de sites, marketing on-line e desenvolvimento de negócios

Texto traduzido automaticamente

Para fornecer a você o acesso mais rápido aos nossos artigos, traduzimos este texto automaticamente. Como resultado, pode conter erros em alguns lugares. Vamos melhorar em breve!

Como escolher a fonte ideal para seu site? Step by step guide + Examples!

Como escolher a fonte para o site

Você atualiza ou cria um site ou loja online do zero? Portanto, você deve escolher as fontes que usará em seu site. É uma escolha crucial. Porque? O layout e a aparência dos textos afetam significativamente a estética do site e sua funcionalidade e legibilidade. As páginas com fontes apropriadas são muito mais fáceis de usar. E isso se traduz em uma conversão maior!

Escolher a melhor fonte para um site não é fácil. Porém, basta seguir o guia elaborado por nós, e com certeza escolherá a melhor fonte!

Neste artigo, você aprenderá:

  • Qual é a diferença entre uma fonte e uma fonte?
  • Como escolher a fonte perfeita para um site
  • Quais truques usar para combinar fontes de forma eficaz
  • E muito mais!

Como escolher as melhores fontes para um site?

Aqui estão as 7 etapas principais que você deve seguir!

Escolhendo as fontes perfeitas para o seu site:

  1. Defina o caráter de sua marca
  2. Defina os objetivos dos textos em seu site
  3. Certifique-se de que a fonte tenha os caracteres corretos!
  4. Verifique a licença da fonte!
  5. Escolha primário e secundário
  6. Fontes Combine as fontes com habilidade e obtenha ainda mais delas!
  7. Foco na legibilidade
Vamos dar uma olhada em como fazer cada um deles na prática.

Etapa I
Defina a natureza da sua marca

 website modelo de restaurante
O Restaurante Lounge é um exemplo de template dedicado a restaurantes, enfatizando a longa tradição e habilidade dos pratos preparados. As fontes serif usadas aqui, sobre as quais você pode ler neste artigo, são ideais para isso.
Você já ouviu falar que uma imagem expressa mais do que mil palavras?
É semelhante à tipografia. Portanto, você precisa ter certeza de que as fontes refletem adequadamente o caráter de sua marca .

Como fazer isso? Primeiro, você precisa definir a natureza da sua marca.

Para fazer isso, use as perguntas de suporte que preparamos para você abaixo!

Como determinar a natureza da sua marca ao escolher uma fonte?

  • É uma empresa técnica ou é uma empresa de produtos e serviços estéticos?
  • Pessoas de que idade e sexo são dirigidas as suas ofertas?
  • Os serviços ou produtos destinam-se a um público amplo ou restrito?
  • É uma "marca para todos"? Ou a meta é exata, por exemplo, mulheres educadas com idades entre 25-35 anos de grandes cidades?
  • Quais são os valores de uma determinada empresa e o que ela deseja comunicar aos destinatários?
  • A marca é elegante ou talvez engraçada?
Escreva as respostas para essas perguntas! Eles o ajudarão com as próximas etapas na seleção de fontes, que explicaremos neste artigo!

Etapa II
Defina os objetivos dos textos em seu site

projetando site de fontes

Depois de identificar as características da sua marca, você precisa conhecer os tipos e recursos das fontes na web.

Esse conhecimento permitirá que você não apenas combine perfeitamente a fonte com o caráter da sua marca.

Você também aprenderá em quais situações é melhor usar cada um deles. Lembre-se de que a fonte escolhida deve atender ao propósito do texto que está sendo salvo.
Em outras palavras, você usará uma fonte diferente para descrever seu produto ou serviço e outra diferente para criar, por exemplo, um CTA (call to action) ou cabeçalhos em seu site.
Portanto, conheça a divisão de fontes e os objetivos que funcionarão para elas!

Classificação de fontes

As fontes são divididas principalmente em:

  • Fontes serif
  • Fontes sem serifa
  • Fontes de script
  • Decorativas (fontes de exibição)

Quando usar os diferentes tipos?

Você encontrará a resposta abaixo:

Fontes Serif

leitor de notícias de fonte

Leitor de notícias - um exemplo importante de uma fonte serif

Essas são fontes que têm terminações transversais ou diagonais (as chamadas serifas) decorando o script.
O uso de serifas confere aos textos um caráter tradicional e mais elegante. Essas fontes têm sido usadas há muito tempo em publicações em papel longo (principalmente em livros), pois as serifas ajudam o leitor a seguir a linha do texto, tornando-a mais fácil de ler.

Devido ao seu caráter decorativo, as fontes serif também ficam bem em sites ... mas, acima de tudo, quando são usadas como elementos de conteúdo adicionais, por exemplo:

  • títulos,
  • citações,
  • legendas,
  • logotipos, eles
  • slogan
Não deve ser usado para escrever o conteúdo principal da página.
Eles podem ser usados ​​por empresas que desejam enfatizar seus muitos anos de experiência, referir-se à tradição e sinalizar certeza e estabilidade .
Fontes serif populares: Times New Roman, Georgia, Palatino, Bookman Old Style, Garamond, Courier, Lucida, Century, Arno Pro, MS Serif.

Fontes sem serifa

fonte de verão

Lato - um exemplo de uma fonte sans serif

Como o nome sugere, as fontes sem serifa são desprovidas de serifas. Por isso, possuem um caráter mais moderno e minimalista .
Seu uso na Internet se tornou comum porque as telas não exibiam corretamente as fontes serifadas no passado. Além disso, as fontes sem serifa exibidas na tela não cansam a visão.
Devem ser utilizados por empresas inovadoras ou que queiram ser vistas como modernas e dinâmicas. Apresentam acessibilidade e simplicidade, pelo que serão uma boa escolha para uma empresa que dirige os seus serviços à geração jovem.

Fontes sem serifa populares: Arial, Open Sans, Montserrat, Helvetica, Futura, Verdana, Trebuchet MS, Univers .

Fontes de script

fonte sofia
Eles são fontes que imitam a escrita à mão.
Eles são elegantes e formais, mas também um pouco engraçados. Entre eles, você pode encontrar fontes muito (MUITO) ornamentais e bastante simples.
Sua vantagem é a alta expressividade. Eles carregam uma enorme carga emocional que você pode usar para evocar uma reação específica nos destinatários. Além disso, as fontes de script chamam a atenção e permitem que você comunique conteúdo sério ou humorístico (dependendo do tipo de fonte).
Fontes de script elegantes são perfeitas para convites de casamento e cartões comemorativos. Em sites, eles funcionam quando você os usa para escrever pequenos elementos de texto - por exemplo, títulos ou citações.
Ao usar essas fontes, você deve prestar atenção à sua legibilidade. Quanto mais decorativa e "complicada" for a fonte - maior será a chance de ela ser ilegível para o destinatário.

Fontes populares de script: Great Vibes, Lobster, Grand Hotel, Sofia, Arizonia, Black Jack, Cookie, Germanica, Miama, Pacifico, Tangerine .

Fontes decorativas (fontes de exibição)

É um grande grupo de fontes muito diversas, que se distinguem por uma forma elaborada e alta ornamentação .
Sua forma pode estar relacionada a emoções específicas (por exemplo, medo - com fontes decorativas góticas que o título de filmes de terror às vezes é escrito) ou um tempo, lugar ou objeto histórico específico. As fontes decorativas também costumam se referir a fenômenos culturais, por exemplo, graffiti. Às vezes, a forma lembra imagens.
São fontes muito expressivas e originais. Portanto, você deve ter cuidado com seu uso - eles podem rapidamente ficar fora de moda porque muitas vezes refletem as tendências de design de certas épocas.
Outro problema pode ser a seleção de uma fonte decorativa adequada no site - ela deve corresponder ao caráter da marca / empresa e, ao mesmo tempo, permanecer legível. Portanto, você deve usá-lo com cuidado e principalmente para escrever pequenos elementos - por exemplo, cabeçalhos. No entanto, se você escolher a fonte decorativa certa, a página se destacará.

Dica:

Você já definiu a natureza da sua marca. Você conhece os tipos de fontes e suas características.

Agora tente encontrar fontes que expressem as mesmas características e valores de sua empresa .

Para encontrar ideias de fontes rapidamente, pode consultar a nossa lista de As melhores fontes para o seu site!


Etapa III
Verifique se a fonte possui os caracteres corretos!

Cuidado com Lorem ipsum e geradores de legenda!

Você começou a considerar a escolha de várias fontes? Bom!
Antes de decidir, no entanto, certifique-se de que a fonte escolhida tenha todos os caracteres necessários .

O que está acontecendo?

Não ter todos os sinais é uma armadilha comum. É fácil cair nisso quando usamos geradores de texto e verificamos a aparência da fonte não com nosso conteúdo de destino, mas com, por exemplo, Lorem ipsum.

Como este texto é escrito inteiramente em latim, podemos não notar a falta de sinais vitais, incluindo os sinais diacríticos da linguagem .

A falta de diacríticos de linguagem não é a única armadilha que você pode encontrar. Acontece também que as fontes populares (pagas e gratuitas) têm problemas com certos caracteres ... ou nem os têm.

Lembre-se das versões de idioma!

Seu site tem versões em vários idiomas? Lembre-se de que a maioria dos idiomas possui diacríticos específicos. Ainda mais, você deve verificar cuidadosamente se uma determinada fonte tem todas elas - antes de escolhê-la.
Se a fonte que você escolheu não existir, a fonte padrão será usada todas as vezes para o caractere ausente. Isso pode parecer feio em muitas situações.
Você pode resolver esse problema de duas maneiras:
  • mudando a fonte para outra
  • codificação da página de tal forma que o CSS correto podmieniał a marca em um visualmente semelhante para diferentes versões de idioma
Se você estiver usando o BOWWE , não precisa se preocupar com isso - qualquer trabalho que requeira codificação, faremos por você!

Etapa IV
Verifique a licença da fonte!

O que também é crucial na escolha de uma fonte é a licença de utilitário.
Você precisa verificar se a licença pela qual você possui a fonte permite que você a use em geral em sites.

Tenha cuidado, especialmente com as fontes instaladas com o pacote Adobe ou o sistema operacional. Muitas vezes, sua licença permite que sejam usados ​​apenas em materiais impressos, não em sites. Portanto, nem todo tipo de letra pode ser convertido em uma fonte digital e colocado na página.

Se você quiser ter certeza de que pode usar uma determinada fonte na web, use a do fontes Google biblioteca de .

Etapa V
Escolha primário e secundário

Fontes Você gosta de algumas fontes, mas tem dificuldade em tomar a decisão final?

Lembre-se de que você não pode usar muitos deles. 2-3 fontes em um site são o número ideal.

O uso de muitas fontes introduz o caos no site. Isso torna difícil a leitura do texto - então você não alcançará clientes em potencial.

A maioria dos sites profissionais inclui:

  • Fonte Primária
  • Fonte Secundária
  • Fonte de acento (opcional)

Fonte, cada uma dessas fontes, tem uma função diferente e é usada para outro conteúdo. Para dar ao seu site uma aparência profissional e facilitar a escolha das melhores fontes, observe como cada um desses grupos difere um do outro:

Fonte primária

O mais visível no seu site. Usado em slogans, títulos e cabeçalhos . Embora não seja o mais utilizado, os clientes devem identificar sua marca com ele. Vale a pena fazer a correspondência com a fonte presente em seu logotipo (desde que contenha texto).

Fonte secundária

Será aquele que preencherá os blocos de texto: parágrafos, descrições de produtos ou entradas de blog .

Esta é a fonte mais comumente usada em todos os sites ou lojas online.
Embora a fonte primária possa ser original, o objetivo principal de uma fonte secundária é a legibilidade . É muito importante - os clientes devem ler seu conteúdo facilmente .
A fonte secundária visa destacar as qualidades da fonte primária (consulte a próxima seção para obter mais informações sobre a combinação de fontes).

Fonte acentuada (opcional)

Não é uma fonte obrigatória, mas você deve considerar selecioná-la.

Você pode usá-lo, por exemplo, em botões CTA (Call To Action), que têm como objetivo atrair a atenção e gerar cliques. A fonte acentuada também pode ser usada para enfatizar as partes essenciais do texto ou destacar citações.
Esse tipo de fonte deve ser diferente das demais para atrair a atenção do público de maneira eficaz.

Dica

Como posso reconhecer uma fonte que foi usada em outro site?

Gostou da fonte que encontrou em um site? Gostaria de usá-lo no design do seu site?
Instale o plugin para Chrome FontFace Ninja . Com sua ajuda, você pode verificar o nome de cada fonte usada em um determinado site. Basta clicar no ícone do plugin instalado e usar o cursor do mouse para selecionar a fonte cujo nome deseja saber.

Etapa VI
Combine as fontes com habilidade e obtenha ainda mais delas!

aluguel de máquinas e site de vendas
Professional Machines é um template dedicado à venda e aluguel de máquinas. A combinação da enorme fonte Oswald (fonte básica) e da minimalista Nunito (fonte complementar) reflete bem a natureza da indústria e cria confiança na empresa entre os visitantes.
Agora é a hora de aprender como você pode dominar a arte de combiná-los.
Agora é a hora de aprender como você pode dominar a arte de combiná-los.
A melhor maneira de fazer isso é seguindo estes truques:

8 truques para uma melhor combinação de fontes

1. Serif com sans serif

As fontes serif e sans serif correspondentes são uma combinação segura - principalmente quando as usamos em tamanhos diferentes. Essas fontes são tão diferentes que, em muitos casos, parecem atraentes.

2. Tamanho contrastante

Fontes com serifa e sem serifa são uma combinação segura - principalmente quando as usamos em tamanhos diferentes. Essas fontes são tão diferentes que, em muitos casos, parecem atraentes.

3. Peso de contraste

Vale a pena escrever o título em uma fonte mais espessa e o conteúdo mais fino. Assim, o texto ficará mais legível.

4. Usando fontes de uma família de fontes

O uso de fontes da mesma família pode rapidamente atingir a espessura mencionada acima (por exemplo, Open Sans e Open Sans Semibold). Muitas fontes têm muitas variantes - considere combinar duas delas em seu site. Por exemplo, em nossa página do construtor de páginas BOWWE, você encontrará diferentes versões de fontes Roboto: fonte Roboto, Roboto Condensed e Roboto Slab.

5. Evitando fontes muito semelhantes

Esta regra também se aplica ao contraste. Suponha que a diferença entre as fontes seja muito pequena (as fontes são muito semelhantes entre si). Nesse caso, a conexão não parecerá boa - mesmo se uma for fontes Serif e a segunda - sem serifa.

6. Expressão emocional semelhante

Existem fontes que são portadoras de emoção. Por exemplo, eles devem ser sofisticados, profundos, dinâmicos ou divertidos. Seria melhor não combinar fontes de grupos tão diferentes, porque assim introduziremos a comunicação e o caos visual.

7. Fontes expressivas com neutras

Se você usar uma fonte de script (semelhante à escrita à mão) em seu cabeçalho, use uma fonte neutra para escrever o corpo do texto. Além disso, o uso de duas fontes expressivas, novamente, próximas uma da outra, distrairá o leitor e dificultará a leitura.

8. Prevenção de conflitos

Se duas fontes tiverem proporções totalmente diferentes (por exemplo, uma terá letras muito distorcidas e a outra condensada), elas podem parecer horríveis. Vale a pena verificar se a altura das letras minúsculas é a mesma - então, é mais provável que as fontes coincidam.

Dica:

Maneiras fáceis e inteligentes de combinar fontes

As dicas de seleção acima podem ser úteis, mas é difícil seguir regras secas. Abaixo você encontrará links para ferramentas valiosas para ajudá-lo a combinar fontes com precisão.

Par de fontes

Esta página apresenta pares de fontes que combinam bem. Você pode baixar pares preparados de fontes imediatamente, e todas as fontes estão disponíveis no Google Fonts.

Combinações de fontes Canva

Ferramenta simples e prática. Primeiro, você escolhe um nome de fonte na lista. Em seguida, o mecanismo de pesquisa sugere uma fonte diferente para ele. A seguir, ele apresenta um exemplo de como é essa combinação de fontes.

Typ.io ​​​

Essa página mostra várias declarações de fontes com exemplos. Você deve prestar atenção especial às listas de fontes usadas nos sites.

Etapa VII
Procure legibilidade

Se você concluir que uma fonte manuscrita se adapta melhor à sua marca, então ... você não deve usá-la como a fonte principal em seu site. Fontes decorativas adicionam estilo, mas são difíceis de ler, e você deve desejar que os usuários passem o máximo de tempo possível no seu site e leiam o conteúdo que você publica.

Na verdade, grandes títulos ou frases de chamariz podem ser salvos em uma fonte gráfica mais complexa. Mas, no caso do corpo do texto, é muito melhor usar fontes simples e legíveis.

Você deve se perguntar:

Qual fonte do meu site será a melhor para ler? O que afeta a legibilidade do texto
Dê uma olhada na lista abaixo

Fatores que afetam a legibilidade do texto na página:

Luzes entre letras

A maioria das fontes é bem projetada neste aspecto. Como fonte primária, você deve escolher a variante universal (não - por exemplo -narrow).

Conduzindo

Um avanço muito pequeno tornará a leitura difícil. Idealmente, o espaçamento entre linhas deve ser de pelo menos 120% das letras maiúsculas (150% geralmente é considerado ideal).

Espaço Entre Parágrafos

Ainda mais legibilidade excelente, use espaçamento ligeiramente maior entre os parágrafos.

Alinhamento de texto

Muito texto em uma linha e também margens pequenas podem efetivamente desencorajar a leitura. A Regra de Ouro fala de 50-60 caracteres em verso como um ideal.

Contraste

A cor da fonte deve ser tal que se destaque contra o fundo no qual é apresentada. O contraste muito baixo ou muito alto dificultará a leitura.

Tamanho

O tamanho da fonte indica a importância de um determinado elemento e permite dividir o texto em seções legíveis. Tamanhos de fonte ideais para elementos individuais:
  • Títulos: 30 - 70,
  • Subtítulos: 22 - 30,
  • Texto simples: 16-20

Itálico, negrito e sublinhado.

É melhor usar esses efeitos com moderação. O sublinhado raramente é usado em páginas da web. Bold enfatiza a importância dos itens, aumentando sua visibilidade. Itálico é ótimo para expressões e citações em idiomas estrangeiros.


Quando os elementos mencionados acima não são correspondidos corretamente, a leitura do conteúdo do seu site cansa o usuário. Aí ele vai deixá-la muito rápido, sem nem mesmo saber da oferta!

Conclusão

Deixe-nos lembrar o que - passo a passo - deve ser feito ao escolher uma fonte para um site:

 

  1. Defina a natureza da sua marca. A fonte deve expressar a personalidade da sua marca e combinar com o estilo do seu público.
  2. Defina a finalidade dos textos em seu site.
  3. Verifique se a fonte possui todos os caracteres necessários.
  4. Verifique se a fonte está devidamente licenciada.
  5. Escolha a fonte primária, secundária e (se necessário) a fonte acentuada. Não use mais de três fontes diferentes em um site.
  6. Escolha habilmente as fontes em seu site.
  7. Não se esqueça da legibilidade.
Suponha que você faça sua escolha de acordo com o processo descrito neste artigo. Nesse caso, ficará realmente satisfeito e rapidamente notará as melhores estatísticas alcançadas pelo seu site!
Share:

Pronto para construir seu próprio site?

Não se preocupe, nós ajudaremos você! Nós também podemos fazer isso por você!

iniciar
banner image

Pronto para construir seu próprio site?

iniciar
1