Você sabia que 95% das informações disponíveis na internet são de linguagem escrita? Isso demonstra a importância da tipografia digital. Embora muitos ainda não saibam, escolher fontes web para compor o seu site é uma tarefa primordial para valorizar seu conteúdo. Por isso, vamos ajudar você nessa missão.

O impacto da tipografia digital na experiência do usuário

Muitas vezes experimentamos uma sensação de desconforto ao olharmos um determinado layout e não sabemos explicar o motivo. Já parou para pensar que pode ser a fonte usada? Essa sensação pode ficar ainda mais evidente devido à variedade de tamanho de telas que utilizamos hoje: celulares, tablets, notebooks, desktops, etc.

As fontes web precisam ser legíveis e acessíveis a todos, não importa o meio de acesso. Também é bom ressaltar que não estamos falando só da tipografia digital, mas de toda combinação e harmonia. Isso também envolve as cores, o estilo, o efeito. A otimização das fontes do seu site pode melhorar a legibilidade, a acessibilidade e simplificar o uso. Portanto, é fundamental ter atenção com esse aspecto.

Fontes web: 5 pontos que você deve considerar

A tipografia digital costuma seguir algumas tendências que acompanham a própria evolução do desenvolvimento de sites. Durante muito tempo a web não era responsiva, até porque nem existiam tantos dispositivos móveis. Atualmente ter um site responsivo é fundamental para posicionar melhor o seu negócio na internet. Então, no momento de escolher fontes web vale considerar os aspectos que estão em alta.

Além das tendências outro fator determinante na criação de um site é a identidade visual da sua empresa ou projeto. Ao escolher fontes para web procure manter uma harmonia entre a identidade da sua marca a tipografia digital do site. Isso contribui para unificar a comunicação e fortalecer a imagem junto aos clientes e visitantes.

1. Estilos e usos

Existem duas famílias principais de fontes: as com serifa e as sem serifa. As fontes serifadas recebem pequenas marcações em suas bases, são tracinhos que dão um efeito decorativo. Fontes nesse estilo costumam ser mais elegantes, têm um aspecto clássico e tradicional. Porém, na web as fontes com serifa não têm uma legibilidade tão boa e tendem a exigir mais esforço em leituras mais longas.

Já as fontes que não possuem serifa são normalmente fontes mais “limpas” e com aspecto minimalista. São mais fáceis de ler – principalmente em dispositivos móveis – e altamente recomendadas para blocos de texto. Elas são neutras, mas de certa maneira transmitem modernidade, fluidez e jovialidade.

Outras famílias de fontes são as cursivas, que remetem à escrita manual e as fontes fantasia que são mais decorativas. Também existem as fontes monoespaçadas, muito utilizadas para escrever linguagem de programação e as fontes responsivas, que falaremos a seguir num tópico específico.

2. Tamanhos e cores

É importante ficar atento ao tamanho das fontes utilizadas. Para textos de site, a fonte nunca deve ter menor do que 12px, e os títulos, subtítulos, menus e submenus devem respeitar uma hierarquia, obedecendo a ordem da disposição das coisas mais relevantes. Por mais descontraída que seja a proposta do seu site, tenha cuidado para não usar cores em excesso e fontes em tamanhos inadequados para os padrões da tipografia digital.

A orientação é concentrar-se em paletas de cores, verificando sempre a questão do contraste. Coloque textos sob fundos que permitam a leitura sem dificuldades e obstáculos (como por exemplo: padrões, texturas e background muito enfeitados). Textos claros com fundo preto costumam causar desconforto e devem ser evitados. Pense sempre na harmonia do todo, considere todos os elementos e suas devidas funções na composição final.

3. Fontes responsivas

O desenvolvimento de sites teve que se adaptar aos diversos tamanhos de telas e as fontes web seguiram o mesmo caminho. A procura por fontes web responsivas aumentou muito, afinal todos querem um site com design que funcione perfeitamente em qualquer dispositivo. Durante muito tempo programar essa adaptação de fonte dava um certo trabalho, mas agora ficou mais simples.

Afinal, como funciona na prática? Existem códigos que fazem o dimensionamento automático das fontes web, basta que o desenvolvedor informe na linguagem de programação um tamanho mínimo e máximo para exibição da fonte e ela se adapta conforme o navegador. Outra ferramenta que também faz essa função instantaneamente é o Criador de Sites da HostGator, que ajusta a tipografia digital de forma automática.

4. Google Fonts

Uma ótima alternativa para quem busca fontes na web é o Google Fonts, um banco de fontes gratuitas que é mantido pelo Google. São mais de mil fontes disponíveis para download e uso online. Existem vários filtros de busca, que simplificam a busca por fontes web. Você pode pesquisar por categorias, popularidade, tendências e estilos, entre outras definições.

É importante destacar que as fontes web disponibilizadas pelo Google têm licença comercial gratuita. Ou seja, você pode usá-las com tranquilidade, sem medo de correr riscos legais pelo uso de fontes piratas ou situações semelhantes. Uma funcionalidade que agrada muito aos designers é a possibilidade de customizar as fontes. Só é preciso um pouco de cuidado, porque mudanças muito bruscas podem deixar seu site mais lento.

5. Menos é mais

A máxima do minimalismo pode ajudar a deixar seu site mais interessante e com o conteúdo destacado. Existe uma tendência que vem se destacando na web de sites com poucas opções de fontes (entre duas ou três, no máximo), mais organizados, mais limpos, com áreas de respiro estratégicas, que valorizem cada espaço do layout, e claro, responsivos.

Você pode ter uma identidade visual forte e diferente, mas no site deve priorizar pela acessibilidade e bem estar dos usuários. As fontes informam, também fazem parte da composição do conteúdo e os estilos, tamanhos e cores podem dizer muito sobre a sua proposta. Portanto, procure passar a maior clareza e precisão possíveis, usando menos recursos.

Outros pontos importantes

Para proporcionar uma boa experiência aos visitantes do seu site, você também precisa ir além das fontes web. Veja os outros conceitos para se atentar:

Legibilidade

Você percebe os espaços em branco neste texto? Eles contribuem para a legibilidade do conteúdo, juntamente com o tamanho e a cor da fonte, a hierarquia das informações e o próprio background do site. Se as palavras estivessem todas amontoadas e as frases muito juntas seria muito difícil ler, assim como se o background fosse preto e o texto em escala de cinza. A leitura ficaria difícil né? Portanto, além de escolher boas fontes web, também é fundamental se preocupar com a legibilidade das informações.

Acessibilidade

Quando um site pode ser facilmente acessado por qualquer pessoa dizemos que ele tem acessibilidade. Existem até diretrizes que orientam sobre como criar sites acessíveis, com conteúdo que seja facilmente compreendido em qualquer dispositivo. Existem recursos que permitem fazer o ajuste do tamanho da tipografia diretamente pelo usuário, assim como o alto contraste (muito usado por pessoas com baixa visão).

Usabilidade

Você já testou se o seu site é funcional? Ele é fácil de usar e atende as necessidades básicas de quem o acessa? Existe muito site bonito que não tem usabilidade, o visitante não encontra o que busca, não sabe como navegar e essa experiência ruim costuma afastá-lo.

Independentemente de qual fonte web escolhida, é fundamental realizar testes para visualizar a aplicação no seu site. Uma recomendação interessante é validar o seu site com o público-alvo, para perceber se a navegação flui conforme o esperado e se eles ficam satisfeitos com a disposição das informações e demais elementos.

Resumindo, a tipografia digital vai muito além da simples escolha de uma fonte, envolve cor, disposição, ajuste de tamanho e harmonia entre os elementos do site com marca.

Outro aspecto que você deve ficar atento é o UX design, inclusive temos um post sobre este assunto aqui no blog. Veja se “você conhece as abordagens de UX Design?”.

Agora que aprendeu um pouquinho mais sobre fontes web você considera que o seu site está adequado? Para quem ainda está em fase de construção do site, o momento de aplicar as dicas e avaliar as alternativas é agora. Esperamos que este post tenha contribuído, e se ficou alguma dúvida você pode deixar nos comentários abaixo.

Conteúdo publicado originalmente em 17 de fevereiro de 2016.