Conheça tipos de letras e fontes acessíveis para usar em seu projeto digital

A tipografia (como os tipos de letras e fontes se apresentam na escrita) tem um grande impacto na leitura e, por isso, ela é considerada um componente crucial para a acessibilidade visual.

Explicando melhor: o tipo de letra é uma coleção de caracteres tipográficos criados com o mesmo desenho, formato ou atributo, como Arial, Helvetica e Times New Roman. Já o tipo de fonte é um subconjunto do anterior e define a sua aparência, como formatação negrito, tamanho 14, no estilo Arial.

No texto abaixo, adaptado do artigo “Typefaces and Fonts”, do site em inglês WebAIM, você entende mais sobre os tipos de letra e fonte ideais para garantir a acessibilidade do seu projeto digital. Confira!

Legibilidade do estilo de texto

Ao analisar um texto, é comum que as pessoas não observem os caracteres ou leiam cada uma das palavras. O que acontece, na verdade, é um processo subconsciente no qual o olho passa rapidamente pelo conteúdo e analisa padrões e grupos de caracteres (normalmente, de 6 a 9 por vez). Depois, eles são, quase instantaneamente, convertidos em significados pelo cérebro humano. Isso é o que permite a leitura e compreensão do contexto da escrita bem rapidamente, com altos níveis de compreensão.

Apenas quando os caracteres ou palavras são desconhecidos ou criam barreiras para esse processo direto de significado padrão que há a necessidade de examinar com mais calma ou processar caracteres ou palavras. Então, para a legibilidade e compreensão ideais, a recomendação é evitar essas interrupções.

Dicas importantes sobre a legibilidade de um texto:

Utilize fontes simples, conhecidas e de fácil análise.
Evite complexidade de caracteres.
Evite ambiguidade de caracteres.
Use um número limitado de tipos de letras, fontes e variações de fonte.
Considere o espaçamento e a espessura.
Garanta contraste suficiente, mas não demais, entre o texto e o fundo.
Evite tamanhos pequenos de fonte e outros “anti-padrões”.

1. Utilize fontes simples, conhecidas e de fácil análise

Estilos de fontes simples e conhecidas são mais fáceis de se analisar e ler porque a mente já consegue ou pode gerar rapidamente um modelo para os formatos e padrões do texto. Tipos de letras desconhecidos ou complexos exigem tempo extra e orientação, que leva à análise dos caracteres ou palavras (que é lenta e cognitivamente intensa) ao invés de análise de padrão ou bloco (que é rápida e menos estressante).

Não existe o melhor tipo de letra ou fonte

Especialistas discordam sobre quais tipos de letra oferecem a melhor legibilidade. Até existe uma crença antiga de que fontes sem serifa são melhores para visualização em tela e fontes com serifa são melhores para imprimir, mas com os monitores de alta resolução de hoje, isso não é necessariamente verdade.

Independentemente disso, a simplicidade em tipos de letras é fundamental. O estilo de fonte deve ser comum ou de fácil análise, para que, assim, ele se torne conhecido. Muitas fontes comuns ou padrões, disponíveis em sistemas operacionais modernos, atendem a esses requisitos.

Paralelo a isso, não existe um estilo de letra que seja ideal para todas as pessoas com dislexia, por exemplo.

Tipos de letra devem ser escolhidos para se alinhar ao tom, à mensagem e à marca do conteúdo. Uma fonte de desenho animado usada num site de banco, por exemplo, provavelmente prejudicaria o senso de confiança e profissionalismo que as pessoas esperam.

2. Evite complexidade de caracteres

Formatos mais simples e padrões de texto tipográfico são analisados mais rapidamente e cuidadosamente pela mente humana. Tome cuidado com fontes complexas, especialmente em seções longas de texto.

3. Evite ambiguidade de caracteres

Quando o formato do caractere dentro de um tipo de letra é parecido com outro, isso pode gerar ambiguidade, uma certa confusão, que deve ser processada pelo cérebro, impactando a velocidade da leitura e a compreensão.

Isso acontece entre as letras maiúsculas “C” e “O” e as letras minúsculas “e” e “o”, em tipo de letra Arial, que são bem semelhantes devido à abertura bem estreita nas letras. Já no tipo de letra Opens Sans, isso é contrastado com a abertura mais larga e diferenças mais distintas.

De modo similar, a maiúscula “I”, a minúscula “l” e o número “1” são praticamente idênticos em Gill Sans, porém tais caracteres são mais facilmente diferenciados uns dos outros em Verdana. Apesar do tipo de letra Verdana ser um pouco mais complexo, neste caso, sua menor complexidade ajuda a evitar a ambiguidade nos caracteres.

4. Use um número limitado de tipos de letras, fontes, e variações de fonte

Cada vez que a pessoa que está navegando em seu conteúdo encontra um novo tipo de letra, fonte ou variação de fonte, a mente constrói um mapa ou modelo de caracteres e padrões para depois analisar mais rapidamente as palavras e processar seus significados. Isso exige esforço cognitivo e tempo. Se o tipo de fonte já é conhecido, a sobrecarga é reduzida.

Por isso, tenha cuidado ao utilizar múltiplos tipos de fonte em um mesmo documento ou página web. Garanta que os tipos de letra ou de fonte se alinhem a tipos de conteúdo como aquele estilo de letra ou fonte para cabeçalhos ou para outro corpo de texto.

5. Considere o espaçamento e a espessura

Letras adequadas e espaçamento entre palavras podem melhorar a legibilidade por oferecerem maior separação e clareza entre os caracteres e palavras adjacentes. Quando letras e palavras aparecem bem próximas umas das outras, pode ocorrer confusão.

Além disso, a espessura (no sentido da largura) também pode impactar a percepção e a legibilidade.

Espaçamento do texto segundo as WCAG (Diretrizes de Acessibilidade para Conteúdo Web)

A WCAG exige que nenhuma perda de conteúdo ou funcionalidade ocorra quando a pessoa que está acessando seu site ultrapassar os estilos de página, por espaçamento de parágrafo em 200% do tamanho da fonte, espaçamento ou altura da linha do texto em 150% do tamanho da fonte, espaçamento de palavra em 16% do tamanho da fonte, e espaçamento da letra em 12% do tamanho da fonte.

Então, certifique-se de que o texto do seu site possa ser modificado sem ele “desaparecer” ou se sobrepor a outro conteúdo da página.

6. Garanta contraste suficiente, mas não demais, entre o texto e o fundo

Um texto é muito mais fácil de ser lido quando há contraste suficiente ou diferença de brilho entre o texto e o fundo. As Diretrizes de Acessibilidade para Conteúdo Web definem medidas para contraste suficiente de texto. Ferramentas como a Color Contrast Checker, do WebAIM, ajudam a verificar o contraste e garantir que ele esteja acessível.

Texto preto em um fundo branco é o padrão para conteúdo web, mas essa combinação pode parecer rígida e cansativa, especialmente para longas seções de texto. Contraste demais, por exemplo, pode impactar a legibilidade, especialmente para pessoas com epilepsia. O ideal é sempre testar e entender o que fica mais confortável para a leitura.

7. Evite tamanhos pequenos de fonte e outros “anti-padrões”

Além de espaçamento de texto, espessura e contraste, o tamanho do texto tem impacto significativo na legibilidade. Apesar da WCAG não ter exigência de um tamanho mínimo de fonte, isso ainda é uma consideração válida de usabilidade.

Tamanhos relativos de fonte (como percents ou ems) oferecem mais flexibilidade para modificar a apresentação visual se comparados a unidades absolutas (como pixels e points).

O tamanho escolhido para a fonte também influenciará no comprimento de linha – o número de caracteres que aparecem por linha. Tome cuidado com longas seções de texto que estejam totalmente em negrito, em itálico, em letras maiúsculas ou estilizadas de um modo diferente. Essas variações de fonte podem deixar o texto mais difícil de ser lido – e cada nova variação requer uma nova orientação de quem está lendo.

Texto real e texto dentro de imagens

O texto real oferece muitas vantagens em comparação com o texto dentro de imagens. Quando o conteúdo é apresentado como um texto real – o que significa caracteres de texto em uma página da web – ele é muito adaptável. A pessoa pode personalizá-lo para melhor legibilidade, ajustando a linha, a palavra, o espaçamento dos caracteres, mudando o tipo de fonte, mudando as cores do texto, aumentando o tamanho do texto sem perda de fidelidade e traduzindo para outras línguas, por exemplo. O texto ainda pode ser copiado e colado, ele se adapta a vários tamanhos de tela e é mais compatível com ferramentas de busca e velocidades menores de internet.

Já quando o texto faz parte de uma imagem ou arte, ele perde a maior parte dessa adaptabilidade. As WCAGs exigem que, se a mesma apresentação visual pode ser feita usando um texto à parte, uma imagem não deve ser utilizada para apresentar esse conteúdo.

Textos dentro de imagens podem se tornar mais pixelizados, rígidos e difíceis de se ler ao serem ampliados, quando assim necessário para as pessoas com alguma deficiência visual.

Fontes incorporadas

Navegadores da web mais modernos permitem incorporação de fonte, uma técnica feita no CSS, que possibilita ao navegador baixar fontes e, depois, apresentar o texto naqueles tipos de fontes. Embora a maioria das fontes no nível de sistema sejam projetadas para algum nível de legibilidade, muitas das que têm design personalizado não são. Por isso, é necessário tomar cuidado para que sejam utilizados tipos de letras e fontes que mantenham altos níveis de legibilidade. Uma simples alteração no tipo de fonte não tem impacto algum no leitor de tela desde que o texto real seja mantido no formato acessível.

* Este conteúdo contou com o apoio de Luciana Quintão de Moraes, poeta, graduada em Letras e voluntária do Movimento Web para Todos.