Guia de tipografia para a Web

Guia definitivo de tipografia para sítios Web: design para facilitar a leitura

Selecionar um tipo de letra é fácil: só tem de abrir o menu pendente e clicar num nome. Escolher o tipo de letra correto, por outro lado, não é assim tão simples. Envolve uma longa lista de considerações e é uma das decisões mais importantes que irá tomar durante o processo de conceção do seu sítio Web.

Os designers profissionais aprendem normalmente as noções básicas de tipografia como parte dos seus estudos. No entanto, à medida que cada vez mais pessoas estão a aprender sobre Construtor de sítios Web ou ferramentas semelhantes estão envolvidas na criação de sítios Web, compreender a tipografia de um sítio Web está a tornar-se cada vez mais importante, mesmo para quem não é designer. Por conseguinte, para aperfeiçoar as noções básicas de tipografia de sítios Web, este artigo fornece dicas que pode utilizar ao escolher um tipo de letra para o seu sítio Web, a fim de garantir a melhor experiência de leitura para o seu público.

O que é a tipografia de um sítio Web?

Todos os sítios Web têm texto e, onde há texto, há tipografia. De um modo geral, a tipografia de um sítio Web define o aspeto do texto no sítio Web. Trata-se da forma como as palavras aparecem na página, tanto o estilo (o tipo de letra, o tamanho, o espaçamento) como a forma como o texto aparece na página.

A combinação de todos estes elementos deve ter como objetivo garantir que o texto seja fácil de ler. Além disso, a tipografia do sítio Web deve também ter em conta os seguintes aspectos:

• Menor tempo de atenção, especialmente em linha;
• Acessibilidade, porque as pessoas interagem com os textos em linha de formas diferentes;
• A facilidade de leitura, uma vez que muitas vezes as pessoas não têm tempo para ler todo o texto;
• Diferentes tamanhos de ecrã, uma vez que os utilizadores navegam nos sítios Web em diferentes dispositivos.

A coisa mais importante a saber sobre tipografia é esta: Se funcionar, não vai dar por ela. Se não funcionar, o utilizador provavelmente não ficará no site tempo suficiente.

Termos de tipografia Web

Para compreender melhor a tipografia para Web e introduzi-la no seu sítio Web, vamos começar por abordar alguns termos básicos de tipografia e compreender como podem ser aplicados à tipografia para Web.

1. fontes

Um tipo de letra é um aspeto específico e um conjunto de caraterísticas aplicadas a um grupo de elementos alfabéticos, numéricos e de pontuação. Se a sua primeira pergunta foi "Não são estes os tipos de letra?", não está sozinho: trata-se de um equívoco comum.

O tipo de letra é uma instância específica de um tipo de letra; são partes do tipo de letra. Distinguem-se depois pelo seu peso (bold ou light), pelo seu tamanho (14px ou 24px) ou por outras estilizações (itálico, sublinhado, etc.). Para dar um exemplo, Helvetica Bold (16px) e Helvetica Regular Italic (24px) são tipos de letra e fazem parte do tipo de letra Helvetica. Muitas vezes, os tipos de letra também são designados por famílias de tipos de letra, uma vez que são um termo abrangente para tipos de letra com caraterísticas semelhantes.

Muitos tipos de letra correspondem apenas a dois tipos de letra: serif e sans-serif. As fontes serifadas contêm normalmente pequenas decorações no final, as fontes sans-serif não. Aqui está uma forma fácil de as distinguir: "Sans" significa sem em francês.

Para além destes dois tipos de letra, estão também disponíveis outros tipos de letra, um dos quais é o script. No entanto, estes tipos são utilizados com menos frequência na Web, uma vez que são mais difíceis de ler nos ecrãs.

2. subcotação

O kerning é o espaço horizontal entre os dois caracteres de uma palavra. Diferentes tipos de letra têm kerning diferente para melhorar a legibilidade e evitar espaços estranhos nas palavras. O kerning também pode diferir entre caracteres diferentes da mesma palavra com os mesmos objectivos.

No segundo caso, o kerning é adicionado entre os Ts repetidos para melhorar a legibilidade.

3. rastreio

Tal como o kerning, o tracking é também a distância entre letras. No entanto, em vez do espaço entre dois caracteres individuais, o tracking é o espaço entre todas as letras de uma palavra ou linha. E, tal como o kerning, também é ajustado para melhorar a legibilidade, realçar uma palavra ou cumprir outros objectivos.

4. espaçamento entre linhas

O espaçamento entre linhas ou altura da linha é o termo utilizado para designar o espaçamento entre linhas na tipografia e desempenha um papel essencial para tornar legível o texto do seu sítio Web. Ao aumentar o espaçamento entre linhas, está a aumentar o espaço entre as linhas, o que geralmente melhora a legibilidade. Para uma boa legibilidade, o espaçamento entre linhas deve ser geralmente cerca de 30 % maior do que o tamanho da letra. Por exemplo, se o tamanho da letra for 20 pixéis, recomenda-se um espaçamento entre linhas de 26 pixéis.

A utilização correta dos espaços em branco no texto deverá melhorar a compreensão do mesmo, uma vez que separa visualmente o conteúdo em partes digeríveis e não sobrecarrega a página.

5. hierarquia

A hierarquia é a ordem do texto no seu sítio Web. A maioria dos sítios Web, especialmente os que têm muito texto (como as publicações de blogues), tenta dividir o texto em secções mais pequenas para o tornar mais digerível e gerível. Estas secções são designadas por títulos.

A hierarquia do texto permite que os leitores passem ao lado do texto e vejam as secções que são mais importantes ou que estão à procura. Também permite destacar as partes do texto que são críticas, enquanto outras são informações secundárias.

Nos sítios Web, a hierarquia do texto pode ser realçada por diferentes tipos de letra, tamanhos de letra, cores ou outras caraterísticas. Por exemplo, neste artigo, os termos de tipografia web são um título 2 (H2,) enquanto os termos mencionados são um título 3 (H3). Estas secções H3 tornam-se cada vez mais específicas e o seu aspeto indica que são uma subsecção de um tópico mais geral. O título do blogue é normalmente o título 1 (H1). Eis um exemplo da hierarquia de texto apresentada no nosso editor de texto.

Seleção do melhor tipo de letra para leitura no ecrã

O design digital está a evoluir rapidamente. Enquanto há alguns anos havia apenas uma mão-cheia de tipos de letra por onde escolher, atualmente a escolha é de milhares. Estes tipos de letra foram criados para o ecrã e têm nuances e detalhes que os tornam legíveis em diferentes dispositivos.

Dito isto, há alguns aspectos a ter em conta ao escolher um tipo de letra para o seu sítio Web. Estes factores tornarão a experiência de leitura no seu sítio Web muito mais agradável e proporcionarão uma melhor experiência ao cliente.

1. limitar ao mínimo o número de tipos de letra utilizados

Uma boa regra é limitar-se a uma ou duas famílias de tipos de letra. Se exceder este número, o seu texto e sítio Web parecerão desestruturados, pouco profissionais e, por vezes, até confusos. O mesmo se aplica aos tamanhos de letra: Demasiados tamanhos, especialmente quando misturados, podem criar uma experiência de visualização bastante caótica.

Depois de ter escolhido as famílias de tipos de letra, mantenha-as em todo o sítio Web. Se escolher duas famílias de tipos de letra, é importante garantir que se complementam ou, pelo menos, se harmonizam entre si.

Veja os seguintes exemplos de combinações de tipos de letra. Embora as fontes na primeira imagem pertençam a famílias de fontes diferentes e pareçam ser bastante diferentes, nenhuma das fontes se sobrepõe à outra. Os dois tipos de letra estão bem equilibrados e criam uma combinação harmoniosa.

Vejamos agora outro emparelhamento de tipos de letra. Neste exemplo da combinação Baskerville + Impact, o Impact supera de longe o Baskerville. Chama a atenção para si próprio e cria a possibilidade de a primeira parte do texto ser ignorada.

2. tentar utilizar tipos de letra padrão

Existem milhares de tipos de letra disponíveis em plataformas como o Google Fonts, o que lhe dá excelentes oportunidades para experimentar algo novo e excitante. No entanto, há uma coisa que pode correr mal: Os tipos de letra demasiado complicados podem distrair os visitantes do seu sítio Web. Para evitar isto, tente manter-se fiel às fontes padrão, a menos que haja uma ocasião realmente especial que exija fontes personalizadas. Experimentar tipos de letra é divertido, mas é importante lembrar que o objetivo de uma boa tipografia é fazer com que as pessoas leiam o conteúdo.

3. utilizar um tipo de letra que tenha bom aspeto em diferentes dispositivos

As pessoas acedem ao seu sítio Web a partir de diferentes dispositivos, desde smartphones e tablets a PCs. Para garantir que o seu sítio Web permanece acessível aos leitores, opte por tipos de letra que tenham bom aspeto e sejam legíveis em diferentes ecrãs. Comece por utilizar um tipo de letra que tenha bom aspeto em diferentes tamanhos. Um exemplo é o tipo de letra Roboto apresentado na imagem abaixo.

Evite tipos de letra em itálico ou ornamentados. Têm um aspeto muito bonito, mas com a diminuição do tamanho tornam-se cada vez menos legíveis, como acontece com o tipo de letra Comforter Brush abaixo.

Emparelhamento de tipos de letra para o seu sítio Web

Vejamos agora alguns pares de tipos de letra bonitos que pode utilizar no seu sítio Web para obter um visual equilibrado e bonito.

1º Lora & Merriweather

2. Roboto & Archivo Black

3º Bebas Novo & Velho Standard TT

Conclusão

Com estas dicas e conhecimentos sobre tipografia de sítios Web, já tem conhecimentos suficientes para começar a fazer experiências. Experimente a tipografia do seu sítio Web para encontrar combinações de tipos de letra e estilos que tenham bom aspeto e garantam aos seus visitantes uma óptima experiência. Se tiver os recursos necessários, organize um teste de utilizador para ver como as pessoas reagem às suas escolhas tipográficas. Ou peça simplesmente a opinião de alguns amigos. Isto dar-lhe-á uma ideia da legibilidade dos seus textos e se estes atingem o objetivo desejado.