Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.

Caso pretenda saber mais, consulte a nossa política de privacidade.

Conteúdo e Navegação

Tipografia

A tipografia é uma parte fundamental da interface do utilizador, já que a maior parte do tempo que o utilizador passa online está a ler conteúdos. Um princípio muito utilizado online é o de não fazer o utilizador pensar, e este pode e deve também ser aplicado na tipografia, complementado com o não se deve fazer o utilizador forçar a vista. 

Uma página de internet deve ser simples de usar e para isso acontecer, o conteúdo deve ser de leitura fácil e por isso é que é fundamental ter noções básicas sobre tipografia.

 

Tamanho do Texto

Uma das principais questões de usabilidade e acessibilidade numa página de internet é o tamanho do texto.
 
Os textos muito pequenos causam dificuldades óbvias de leitura pela maioria do público-alvo em questão.
 
Tamanhos de letra inferiores a 12 pixéis dificultam a leitura dos conteúdos tornando-a mais lenta. 
 
Se o nosso público-alvo incluir pessoas com idade superior a 65 anos, convém usar pelo menos o tamanho de 14 pixéis.
 
Estes são os valores os recomendados para os conteúdos de um site. 
 
Em casos específicos, também podem ser usados tamanhos de texto mais pequenos em informações secundárias como notas e rodapés. Nestes casos, 9 pixéis é o limite mínimo recomendável.

Espaçamento entre linhas

O espaçamento mínimo entre as linhas dos blocos de texto dos conteúdos deve ser de 1.4.

O intuito de um espaçamento maior entre linhas de texto é o de facilitar a sua leitura, reduzindo a sensação de cansaço visual até ao fim.

Contraste entre o texto e a cor de fundo

O contraste entre a cor dos textos e a de fundo deve assegurar uma boa leitura.

Para muitos leitores, os textos podem tornar-se ilegíveis se tiverem um mau contraste entre as duas cores, mesmo para os que não têm problemas de visão.

sem contraste

 

No que diz respeito aos valores de contraste, as recomendações de acessibilidade indicam valores diferentes para textos em que o tamanho é inferior a 18 pixéis e para os que têm mais de 18 pixéis (ou textos a negrito com mais de 14 pixéis).

Para passar no teste mínimo de acessibilidade (AA), tem que haver um rácio de contraste de pelo menos 4.5:1, e em textos maiores do que 18 pixéis esse valor deve ser de pelo menos 3:1.

rácio de contraste cinza

 

Podem usar-se sistemas que calculam automaticamente o contraste entre duas cores e que indicam se passa ou não no teste de acessibilidade:

Colour Contrast Check  - por Jonathan Snook

Contrast Ratio  - por Lea Verou

 

Evitar o uso de texto justificado

O texto pode ser justificado tanto à esquerda como à direita criando a sensação que está mais organizado.

Por vezes isto pode criar espaços irregulares entre as palavras de uma frase de modo a que o texto fique alinhado de ambos os lados.

A existência destes espaços irregulares dificulta a leitura dos conteúdos tornando-a mais lenta e cansativa.

Por esta razão convém evitar este alinhamento nos textos e optar por um alinhamento normal à esquerda.

texto justificado

 

Aproveitar os espaços em branco para criar separação entre os conteúdos

Quando procuramos uma informação específica num site, queremos que o caminho até ela seja o mais simples e intuitivo possível.

Se os conteúdos estiverem mal-organizados ou amontoados torna-se difícil chegar à informação que procuramos.

Os conteúdos das páginas devem estar espaçados para que seja claramente visível a localização gráfica de cada item e opções.

As zonas em branco servem para ajudar a distinguir visualmente as diferentes áreas da página os conteúdos.

 

Estabelecer uma hierarquia visual

A informação apresentada em cada página deve ser organizada consoante o seu nível de importância e para isso é fundamental que a ordem de importância de cada título seja facilmente percetível. Como num índice, o “1” deve ter mais destaque que o “1.1” que por sua vez terá mais destaque que o “1.1.1” e assim sucessivamente.

Os utilizadores devem ser auxiliados pelo layout (organização do espaço) das páginas com vista a encontrarem a informação relevante de forma rápida e direta.

No topo da página deve estar a informação mais relevante com o intuito de ser identificada rapidamente, devendo apresentar-se na ordem que seja mais conveniente para os utilizadores.

Por norma, as pessoas preferem a informação numa forma hierárquica, ou seja, dividida por títulos e subtítulos para que a sua atenção se foque num nível de cada vez.

Desta forma, pode adotar-se uma estratégia de arrumação da informação que resulte num menor esforço mental quando se está a ler uma página.

 É mais fácil de implementar esta hierarquia se os cabeçalhos forem usados corretamente para separar os conteúdos no texto (utilizando <h1>, <h2>, etc.), possibilitando manter a semântica do HTML e ainda facilita a apresentação dos conteúdos visualmente na página.

Pode-se dar mais destaque aos títulos e subtítulos e dividir os conteúdos em blocos de informação hierárquicos por intermédio da linguagem CSS.

 

Utilizar títulos descritivos

O título descritivo é mostrado na janela do navegador e é determinado no início do HTML através do tag (etiqueta) “ <title> ”.

Os motores de busca assumem os títulos para identificar as páginas.

Além disso, o título da página de ser coerente com os conteúdos que nela existem.

 

Alinhamento

No ocidente, a direção natural de leitura é feita do canto superior esquerdo para a direita e por isso é que o alinhamento dos textos à esquerda, ou justificados, são mais fáceis de ler. Os textos alinhados à direita e centralizados são mais difíceis de ler são porque os pontos de partida são irregulares. No caso dos últimos, são muito usados para destacar blocos de texto mais pequenos de informação como títulos e citações.

Nos textos justificados a questão é mais complexa, isto porque na internet a hifenização é inexistente, o que provoca lacunas entre as palavras, criando ruído na leitura. Apenas os textos pequenos devem ser justificados.

 

Tipos de letra

Genericamente falando, de acordo como W3C, no âmbito da tipografia para internet esta está dividida em cinco tipos genéricos de fontes:

- Serifa (Serif)

Este tipo de letra carateriza-se por conter pequenos traços, ornamentos e/ou prolongamentos no fim das hastes das letras.

Exemplos: Times New Roman, Baskerville, Bookman, Century, Georgia, Garamond e Rockwell.

 

- Sem Serifa (Sans-serif)

Tipo de letra com hastes simples e sem ornamentos.

Exemplos: Helvetica, Arial, Futura, Gill Sans, Univers e Frutiger.

 

- Cursiva (Script ou Brush)

Tipo de letra com caracteres inclinados e ligados, como na escrita à mão.

Exemplos: Comic Sans MS, Blackadder ITC, Lucida Handwriting e Brush Script.

 

- Fantasy

Tipos de letra decorativas e por norma com fraca legibilidade.

Exemplos: Papyrus, Impact, Haettenschweiler e Copperplate.

 

- Monoespaçada (Monospace)

Este tipo de letra tem sempre a mesma largura fixa e é frequentemente utilizado para códigos de programação.

Exemplos: Courier, Prestige Elite, Fixedsys e Monaco.

 

Escolher um tipo de letra

Devido à maior facilidade de leitura, os tipos de letra mais utilizados nas páginas de internet são as Serifa e Sem-Serifa. As fantasy e as cursivas são menos usadas, sobretudo em grandes blocos de texto.

 

Tamanho

Num navegador, o tamanho padrão do texto é 16px. Esta medida é a que garante melhor a leitura de um texto num monitor, tendo em conta a distância existente entre este e o utilizador.

 

Unidades de medida: Pixel vs. EM

As unidades de medida mais usadas para o tamanho da letra em internet são a EM e o pixel.

A EM é uma medida relativa e corresponde ao tamanho do corpo quadrado da letra M de uma fonte enquanto que o pixel é uma medida absoluta que corresponde ao menor ponto possível num ecrã.

 

Utilização de EM

É verdade que existem poucos utilizadores que alteram o tamanho da letra no navegador, mas existem e são, por norma, pessoas com algum tipo de deficiência visual. Utilizar a EM como unidade de medida do tamanho da letra, em vez do pixel, é a melhor forma de evitar que o zoom danifique o aspeto do layout.

 

Design responsivo

Outra vantagem do uso de EM é o seu design responsivo pois este adapta-se a vários formatos de ecrã (desktop, dispositivos móveis, outros), mantendo uma boa legibilidade.

 

Largura

O tamanho das linhas também vai interferir com o processo de leitura. Para garantir uma maior facilidade de leitura ao utilizador, o número máximo de caracteres por linha ronda os 65, incluindo o espaçamento. 

 

Peso

Esta é a medida usada para a espessura dos caracteres. A letra pode ser normal, negrito, mais negrito e mais fino. Existem também fontes que permitem escolher o valor da espessura de um intervalo entre 100 e 900.

- 100 – Fino

- 200 – Extra Light (Ultra Light)

- 300 – Light

- 400 – Normal

- 500 – Médio

- 600 – Semi negrito

- 700 – Negrito

- 800 – Extra Negrito

- 900 – Negro

 

Contraste

O processo de leitura num monitor é muito mais cansativo do que em papel, devido à iluminação dos ecrãs. Uma boa forma para minimizar este facto é a utilização correta do contraste das cores do texto.

 

Ritmo Vertical

Também para facilitar o processo de leitura, o equilíbrio do texto é um fator importante.

Uma das melhores formas para manter o ritmo equilibrado passa por utilizar uma grelha horizontal, o que simplifica a visualização da hierarquia de tamanho da fonte, distâncias de margens, espaçamento e entrelinhas.