A importância da tipografia na web

Isso já aconteceu com você? Olhando bem de perto da tela porque a fonte é muito pequena? Muitas vezes me pego ampliando as páginas da web porque não consigo ler o texto. É extremamente irritante.

A legibilidade do texto em seu site ou comunicação on-line é fundamental para afetar a maneira como as pessoas o leem. Não é apenas a sua escolha de palavras – uma fonte padrão adequada também tem um papel importante a desempenhar nisso. O tamanho da fonte, o comprimento da linha e o espaçamento entre linhas também afetam a legibilidade do seu texto.

A tipografia online e impressa não são as mesmas

Quando mudei do impresso para o online, devo admitir que levei algum tempo para me acostumar com o fato de que tudo na web pode ser um pouco maior. Comecei no mundo dos jornais, onde um tamanho de fonte de 9 ou 10 px é bastante normal para o corpo principal do texto. Ainda me lembro da minha primeira publicação online: um tamanho de fonte enorme para o cabeçalhos e uma fonte minúscula para o corpo principal do texto. Essa foi a ideia completamente errada. O corpo do texto principal deveria ter o dobro do tamanho, pelo menos 16 px. E, claro, os títulos também podem ser mais sutis. Inicialmente, achei estranho, mas agora me acostumei totalmente.

Existe uma lógica por trás disso porque as proporções são muito diferentes na web. Pense nisso: muitas vezes você se senta mais longe da tela do que de um jornal, folhetoou revista. Em uma publicação na web, você precisa, portanto, de um tamanho de fonte maior, porque a distância faz com que a fonte pareça menor. Mas isso não é tudo. O comprimento da linha também é importante, assim como o espaçamento entre linhas. Mas como você decide qual é o tamanho ideal da fonte, comprimento da linha e espaçamento? Eu acho que isso varia de acordo com a fonte porque elas diferem bastante em termos de dimensões. Não tenho certeza se há algum ideal orientações, mas depois de fazer algumas pesquisas, criei a seguinte lista

Diretrizes de tipografia

Tamanho da fonte: 16px ou maior
Comprimento da linha: 45 a 75 caracteres
Espaçamento entre linhas: 1.4 vezes o tamanho da fonte

Os tamanhos acima são médios, mas se sua fonte for pequena ou estreita, sinta-se à vontade para optar por um pixel maior.

Fluência de processamento: atraente ou legível?

Hora de um pouco de ciência. Nossos cérebros são sensíveis a mudanças dentro de uma mensagem. Você pode pensar que estou me referindo à sua escolha de vocabulário, mas a fonte escolhida também desempenha um papel importante. Se você deseja encorajar seu leitor a continuar lendo, certifique-se de usar a fonte correta. A fluência de processamento, ou seja, a facilidade com que nosso cérebro processa informações, é extremamente importante nisso. Escolher uma boa fonte para o seu trabalho online pode parecer uma trivialidade, mas na verdade afeta a forma como agimos, mesmo que não tenhamos consciência disso.

Uma fonte influencia a legibilidade do texto. Por exemplo, fontes fáceis de ler como Helvetica e Verdana podem ser processadas em uma fração de segundo. O mesmo não pode ser dito para fontes mais criativas (como os estilos manuscritos) que são mais difíceis de ler.

Mas escolher uma fonte criativa e manuscrita tem outro impacto positivo na legibilidade de um texto. Parece mais pessoal e torna o significado da mensagem mais credível. Então você deve optar por atraente ou legível? Escolha o melhor dos dois mundos – em outras palavras, uma fonte clara e legível como Arial, Helvetica ou Verdana e intercale-a com fontes criativas, de forma citar, por exemplo.

“Uma citação pode fornecer um lugar para descansar dentro do texto.”

Mas isso nem começa a explorar todas as fontes diferentes que você pode usar! O surgimento de ferramentas como Typekit e Google Fonts agora significa que inúmeras novas fontes da web começaram a aparecer ao lado das fontes clássicas. Eles tendem a ser um pouco mais atualizados do que as fontes clássicas, dando à sua publicação ou site uma aparência um pouco mais leve.

A instalação da ferramenta Skyfonts para Windows ou Mac OSX possibilita o download de fontes da web do Google Fonts com um clique do mouse. É fácil adicionar fontes clicando no sinal de mais e elas serão armazenadas de maneira organizada na ferramenta. A vantagem final do Skyfonts é que, depois de instalá-los, você pode usar as fontes imediatamente nos projetos em que estiver trabalhando. Você provavelmente conhece o problema: se você instalar uma nova fonte separadamente, terá que começar procurando por ela em downloads antes de abri-la em sua biblioteca de fontes e salvá-la. Há também o problema de ter que salvar todas as versões regulares, negrito e itálico separadamente, enquanto com Skyfonts, você pode salvar famílias de fontes completas que funcionam imediatamente. O que poderia ser melhor? Há a vantagem adicional de que os sites Fonts.com, Linotype, Monotype e My Fonts são todos afiliados ao Skyfonts, permitindo que você também adicione fontes pagas.

Cuidado com as palavras!

Finalmente, sua escolha de palavras é importante. Provavelmente não precisamos te dizer isso, mas nem todo mundo garante que os textos que escrevem sejam realmente adequados ao leitor-alvo. Você deve adotar um estilo mais leve para os leitores mais jovens, mas ser mais elaborado ao abordar os leitores mais velhos que exigem maior profundidade. Lembre-se do seu público-alvo, porque essas são as pessoas que você deseja atrair. Se você for bem-sucedido, o leitor provavelmente voltará para mais.

Leve em consideração seu design responsivo

Sem dúvida, você notou que está ocorrendo uma mudança no design da web, como resultado, quase todas as produções, sites e outras coisas na web se tornaram responsivo. Isso significa que todo o conteúdo de uma página se redimensiona, permitindo que ela também seja visualizada igualmente bem em seu tablet ou smartphone. Isso tem repercussões na tipografia em um web design e significa que você deve levar em consideração cores, fontes e tamanhos de fonte. Criar um design responsivo é importante, mas leva tempo para ser alcançado.

Com a ferramenta Foleon, fica fácil aplicá-la em sua publicação online. Como é possível adaptar as cores, tipos de fonte e tamanhos de fonte para dispositivos móveis no estilo geral do tema, bem como o estilo da página e o estilo do item no nível da página, você pode definir suas páginas como responsivas rapidamente.

Você pode também gosta:

• Inbound Marketing Tipos de conteúdo que você deve criar
• Dicas de marketing por e-mail para promover seu e-book
• Dicas de marketing do white paper
• Como promover uma revista digital

Biografia do autor

Ritesh é gerente de marketing digital com anos de experiência em impulsionar o crescimento. Atualmente é diretor de inbound marketing em Foléon. Você pode encontrar mais sobre ele em seu Perfil do linkedIn.