Design web e UX

6 dicas para o uso correto da tipografia na web

O bom uso da tipografia na hora de projetar uma web é fundamental.

Capa do artigo: 6 dicas para o uso correto da tipografia na web
Artigo originalmente publicado pelo Sitelicon em 2 de novembro de 2015.

Em poucas palavras

Ideias principais

  • O bom uso da tipografia na hora de projetar uma web é fundamental.
  • Se o conteúdo não é legível ou não se estrutura corretamente, nada serve tudo o resto.
  • Ler texto em um ecrã é normalmente uma tarefa mais tediosa do que ler em papel, por isso é importante cuidar muito deste aspecto.
  • Há uma série de normas que nos podem ajudar a configurar corretamente, fluente e atraente os textos de uma web.

Este conteúdo faz parte do ficheiro histórico do Sitelicon. Conserva as informações disponíveis na data de publicação; as condições, ferramentas e requisitos das plataformas podem ter mudado.

Contexto

O bom uso da tipografia na hora de projetar uma Web é fundamental. Se o conteúdo não é legível ou não for estruturado corretamente, nada serve tudo o resto. Ler texto em um ecrã normalmente é uma tarefa mais tediosa que ler em papel, por isso é importante cuidar muito deste aspecto. Há uma série de normas que nos podem ajudar a configurar de forma correta, fluida e atraente os textos de uma web.

  • Tamanho suficientemente grande

Não ao tamanho de letra minúsculo! Houve uma época em que nos enpeñávamos em mostrar uma quantidade de informação no mínimo espaço possível a toda a costa, especialmente para evitar o desenvolvimento, mas por sorte, isto já não deve ser assim. O tamanho de letra deve ser grande o suficiente para ser legível de forma confortável em qualquer ecrã. Não importa que ocupe muito espaço.

Além disso, é bom estabelecer uma hierarquia bem marcada, usando o tamanho para diferenciar títulos, legendas, parágrafos, etc. Não tenha medo de usar tamanhos de letra grandes.

http://www.contrabase.com/wp-content/uploads/2015/10/tipografia02.jpg

  • Interlineado / espaços em branco

O espaço vertical é quase tão importante ou mais do que o tamanho da letra. Para que a leitura seja confortável, é importante que as linhas não estejam demasiado juntas, mas também não demasiado separadas entre si. Mais ou menos, o tamanho do interlineado de um parágrafo deve ser 120- 160 % do tamanho da letra usado. Tamanhos de letra menores necessitam de um interlineado proporcionalmente maior do que tamanhos de letra maiores.

http://www.contrabase.com/wp-content/uploads/2015/10/tipografia03.jpg

  • Contraste

Um texto com uma cor semelhante ao fundo pode ser difícil de ler. Um texto com demasiado contraste também pode ser desconfortável, especialmente em textos claros sobre fundos escuros. É necessário estabelecer um contraste adequado para facilitar a leitura e evitar problemas de acessibilidade. Na verdade, é melhor ir às recomendações que nos dão as [guias W3C](http://www.w3.org/TR/AERT#color-contrast http://www.w3.org/TR/WCAG20/#visual-audio-contrast)

Existem ferramentas na internet que podem ajudar a confirmar se a escolha de cores que fizemos cumpre os padrões.

  • Melhor Linhas Pequenos

Cerca de 65 caracteres por linha é a medida que se considera ideal para que a leitura de um parágrafo seja confortável. Embora lemos mais rapidamente se as linhas forem mais longas, preferimos linhas curtas. Isto está sujeito à quantidade de texto, ao tipo e tamanho de letra, tamanho do dispositivo, e outras variáveis, mas 65 caracteres é a medida média geralmente aceite para ler confortavelmente em um ecrã de computador. Em móvel, o tamanho das linhas é muito menor, e foi aceito como medida média padrão os 39 caracteres que são usados nas colunas estreitas da imprensa em papel.

http://www.contrabase.com/wp-content/uploads/2015/10/tipografia04.jpg

  • Não utilize qualquer justificação completa nem centrada

A justificação adequada para um parágrafo, salvo exceções, não é a justificação centrada nem completa. Na nossa cultura, o sentido da leitura é de esquerda para direita e o mais confortável é encontrar-nos que cada linha começa sempre no mesmo ponto. O texto centrado, em parágrafos longos, portanto, é inadequado por sua irregularidade. Nos textos com justificação completa, o espaço entre palavras não é consistente, podemos nos encontrar com linhas de palavras muito juntas e outras com as palavras muito separadas, portanto, também não é confortável para leitura. A justificação à esquerda é a mais adequada para os textos na internet.

http://www.contrabase.com/wp-content/uploads/2015/10/tipografia05.jpg

  • Escolha tipográfica

Minimiza o número de tipos de letra diferentes na sua Web. Uma ou duas são suficientes. É aconselhável escolher tipos de letra desenhadas para a Web, actuais e optimizadas para ler no ecrã. Existe uma grande variedade de tipografia, é importante escolher a adequada para cada caso: não é o mesmo um título que o corpo de um artigo. Não abuses das tipografias decorativas. Também é preciso garantir que a tipografia escolhida inclui todos os caracteres que vamos precisar: numerais, símbolos, letra ñ…

http://www.contrabase.com/wp-content/uploads/2015/10/tipografia06.jpg

Conclusão

A tipografia é um elemento que deve ser muito cuidado para fazer designs bonitos e harmoniosos, mas sobretudo, usables, especialmente sabendo que esses desenhos vão ser vistos de ecrãs de dispositivos muito diferentes, de ecrãs de ecrã, até telefones móveis. Com este pequeno guia será mais simples saber se o design dos nossos textos é adequado.

Responsabilidade editorial

Quem é responsável por este conteúdo?

Equipa Sitelicon
Conteúdo criado e mantido pela equipa multidisciplinar da Sitelicon.

Publicação
Última revisão
Rastreabilidade
1 fonte referenciada

Arquivo editorial

Conteúdo recuperado e datado.

Conteúdo recuperado do arquivo editorial da Sitelicon. Última atualização registada em . As funcionalidades e condições das plataformas digitais podem mudar ao longo do tempo.

Contacte a Sitelicon

Falamos da sua estratégia digital?

Diga-nos o que pretende alcançar, que canais utiliza e que contexto devemos conhecer. Responderemos com uma primeira orientação concreta.

Enviar pedido

Comecemos pelo contexto.

Pedimos apenas a informação necessária para compreender e encaminhar corretamente o pedido.

A carregar o formulário seguro…