· 8 min de leitura

Fontes: letras que toda a gente consegue ler

Começando pela Atkinson Hyperlegible, uma fonte feita para quem vê mal e que ajuda toda a gente. O que torna uma letra fácil de ler, como usar e combinar fontes, e as que uso nos meus projetos.

Os caracteres Il1 O0 numa fonte comum, onde parecem iguais, e na Atkinson Hyperlegible, onde cada um tem uma forma diferente.

Uma fonte é a voz do texto. A mesma frase escrita em letras diferentes pode soar séria, divertida, antiga ou moderna. Mas, antes de tudo isso, uma fonte tem um trabalho mais simples e mais importante: deixar-se ler, sem esforço, por toda a gente.

Nos posts sobre contraste e sobre cor falei de como as cores ajudam ou atrapalham a leitura. Agora é a vez das próprias letras. E quero começar por uma fonte que foi desenhada exatamente com esse objetivo.

A letra que foi feita para toda a gente

A Atkinson Hyperlegible foi criada pelo Braille Institute, uma instituição americana que trabalha com pessoas cegas e com baixa visão, e lançada em 2019. O nome é uma homenagem ao fundador, J. Robert Atkinson, e o «Hyperlegible» diz tudo: o objetivo era uma letra que se reconhecesse mesmo quando a vista não ajuda. É gratuita e está no Google Fonts, por isso qualquer pessoa a pode usar num site.

Os caracteres Il1 O0 duas vezes. Numa fonte comum, o I maiúsculo e o l minúsculo são iguais e o zero parece um O. Na Atkinson Hyperlegible, cada um tem uma forma diferente.
Os mesmos cinco caracteres. Numa fonte comum, três deles parecem iguais.

O que a torna diferente

Na maior parte das fontes, há letras e números que são quase gémeos. Para quem vê bem, o contexto resolve: percebemos pela palavra. Mas num código, numa palavra-passe ou num número de telefone não há contexto que salve. A Atkinson resolve isso desenhando cada caractere para ser diferente dos outros:

  • I, l e 1: o I maiúsculo tem barras em cima e em baixo, o l minúsculo tem uma cauda curva e o 1 tem um bico bem marcado.
  • O e 0: o zero é atravessado por uma barra.
  • Letras espelhadas: o q tem uma cauda que o distingue do p, para não serem só o mesmo desenho virado ao contrário.
  • Aberturas grandes: os espaços dentro e à volta das letras, como no a, no e ou no c, são generosos, para a letra não «fechar» quando a imagem fica desfocada.
Tabela de pares que se confundem, em Arial e em Atkinson Hyperlegible: I, l e 1; O e zero; r+n e m; c+l e d; e as letras espelhadas b, d, p e q.
Na Arial, o I maiúsculo e o l minúsculo são exatamente iguais. Na Atkinson, nenhum par se confunde.

A melhor forma de perceber a diferença é desfocar o texto, como acontece a quem tem baixa visão ou se esqueceu dos óculos:

A frase «Código: Il10O» em Arial e em Atkinson Hyperlegible, nítida e desfocada. Desfocada, na Arial os caracteres misturam-se; na Atkinson continuam a distinguir-se.
Desfocado, o código em Arial vira uma mancha. Na Atkinson, ainda se percebe cada caractere.

Em 2025 saiu a Atkinson Hyperlegible Next, uma versão nova com mais pesos, do muito fino ao muito grosso, e muitas mais línguas. É essa que uso.

Feita para quem vê mal, boa para todos

Há um nome para isto: efeito rampa. As rampas nos passeios foram pensadas para cadeiras de rodas, mas quem mais as usa são pais com carrinhos de bebé, pessoas com malas de viagem e estafetas. Com a Atkinson é igual: foi desenhada para baixa visão, mas ajuda quem lê no telemóvel ao sol, quem está cansado ao fim do dia ou quem só quer copiar um código sem enganos.

Se uma coisa funciona para quem tem mais dificuldades, funciona melhor para toda a gente.

Usei-a no projeto Plantas Medicinais, em todo o texto, e deixei uma fonte mais forte, a Poppins, só para os títulos grandes.

O que torna uma fonte fácil de ler

A Atkinson é um exemplo extremo, mas as mesmas ideias servem para avaliar qualquer fonte. Primeiro, convém conhecer as partes de uma letra:

A palavra Hxeg com linhas a marcar a altura das maiúsculas, a altura-x, a linha de base e a descendente, e um círculo a mostrar a abertura do e.
As partes de uma letra que mais pesam na leitura.
  • Linha de base: a linha invisível onde as letras «se sentam».
  • Altura-x: a altura das minúsculas sem hastes, como o x, o a ou o e. É das medidas mais importantes.
  • Descendente: a parte que desce abaixo da linha, como no g ou no p.
  • Abertura: o espaço aberto dentro da letra, como a «boca» do e ou do c.

A altura-x engana o tamanho

Duas fontes com o mesmo tamanho podem parecer muito diferentes. Isto acontece porque o tamanho de uma fonte não mede as letras em si, mede a «caixa» onde elas vivem. O que os olhos sentem como tamanho é sobretudo a altura-x, porque a maior parte do texto são minúsculas.

A frase «Hoje vou ler um livro» em Times New Roman, Atkinson Hyperlegible e Verdana, todas com 72 píxeis. A altura-x é 44%, 50% e 54% do tamanho, e a frase parece cada vez maior.
As três têm 72 px. A Verdana parece bem maior que a Times porque as minúsculas dela são mais altas.

Para ecrãs, sobretudo em tamanhos pequenos, prefiro fontes com altura-x generosa e aberturas largas. Leem-se melhor e parecem maiores sem ocuparem mais espaço.

Com serifa ou sem serifa?

As serifas são os pequenos «pés» no fim dos traços, como na Times. Durante muito tempo dizia-se que eram melhores para ler e, depois, que eram piores no ecrã. Hoje, com ecrãs nítidos, o que a investigação mostra é que não há um vencedor claro: um bom tamanho, boa altura-x e bom espaçamento pesam muito mais. Nas interfaces, as fontes sem serifa continuam a ser a escolha mais comum porque se mantêm limpas em tamanhos pequenos. As serifadas brilham em títulos e textos longos com personalidade.

Tamanho, linhas e espaço

Uma fonte ótima pode ser estragada pela forma como é usada. Estas são as regras que sigo:

  • Texto corrido com pelo menos 16 px. Neste blog, o texto dos posts tem cerca de 18 px.
  • Linhas com 60 a 75 caracteres. Linhas muito longas fazem o olho perder-se ao voltar ao início; muito curtas obrigam a saltar de linha a toda a hora.
  • Entrelinha de 1,5 ou mais. Neste blog uso 1,8. As regras de acessibilidade pedem que o texto continue a funcionar com pelo menos 1,5.
  • Alinhar à esquerda. O olho encontra sempre o início da linha seguinte no mesmo sítio.
O mesmo texto duas vezes: em linhas muito longas e apertadas, marcado como cansativo, e em linhas curtas com mais espaço entre elas, marcado como confortável.
A mesma fonte, o mesmo tamanho. Só mudou o comprimento das linhas e o espaço entre elas.

Três coisas a evitar em textos longos

Três exemplos do mesmo parágrafo: tudo em maiúsculas, todo em itálico e justificado numa coluna estreita, com grandes espaços entre as palavras.
Funcionam numa palavra ou numa linha. Num parágrafo inteiro, cansam.
  • Tudo em maiúsculas: lemos muito pela forma das palavras, com as letras que sobem e descem. Em maiúsculas, todas as palavras viram retângulos parecidos.
  • Itálico em blocos: ótimo para destacar uma palavra, cansativo num parágrafo inteiro.
  • Texto justificado: para encostar o texto aos dois lados, o computador estica os espaços entre palavras e abre «rios» brancos. Para pessoas com dislexia, isto torna a leitura mais difícil.

Hierarquia: uma fonte pode chegar

Para mostrar o que é título e o que é texto, não preciso de muitas fontes. Basta variar o tamanho e o peso, que é a grossura da letra. Neste site uso uma única família, a Plus Jakarta Sans, em cinco pesos: do 400, normal, para o texto, até ao 800, muito grosso, para os títulos grandes.

Cinco níveis de texto em Plus Jakarta Sans: título principal com 64 px e peso 800, título de secção com 44 px e peso 700, subtítulo com 30 px, texto corrido com 22 px e peso 400, e etiqueta com 16 px em maiúsculas.
Do título à etiqueta, sempre a mesma fonte. A hierarquia vem do tamanho e do peso.

Uma só família também tem uma vantagem técnica: o site carrega menos ficheiros e abre mais depressa.

Combinar fontes

Quando uso duas fontes, sigo duas regras: nunca mais de duas e cada uma com um trabalho diferente. Uma com personalidade para os títulos ou para a marca, outra calma e legível para o texto. Duas fontes parecidas a fazer o mesmo trabalho só criam confusão, como duas pessoas a falar ao mesmo tempo.

As fontes dos meus projetos: Plus Jakarta Sans no Portfolio Pessoal e no Painel Pessoal; Poppins e Atkinson Hyperlegible Next nas Plantas Medicinais; Montserrat no RENATU; Space 3Dmania e Open Sans na 3Dmania; e Fraunces, em estudo, no Barquinha Parque.
As fontes dos meus projetos, cada uma escrita na própria fonte.
  • Plantas Medicinais: Poppins, forte e geométrica, nos títulos grandes; Atkinson Hyperlegible Next em todo o resto.
  • 3Dmania: a Space 3Dmania, uma fonte própria, só no logótipo e na marca; Open Sans no texto, porque se lê bem em tamanhos pequenos.
  • RENATU: só Montserrat, em vários pesos, tal como a marca já usava.
  • Barquinha Parque: ainda em estudo, com a Fraunces, uma serifada com caráter, como hipótese para os títulos.

E a dislexia?

Existem fontes criadas especialmente para pessoas com dislexia, com letras mais pesadas em baixo. A ideia é boa, mas os estudos feitos até agora não mostram que ajudem mais do que uma boa fonte sem serifa bem espaçada. O que ajuda mesmo é o que já vimos: tamanho confortável, linhas curtas, entrelinha generosa, alinhar à esquerda e fugir de blocos em maiúsculas ou itálico. Aqui, a Atkinson volta a ser uma boa escolha.

Há ainda uma regra que não depende da fonte: deixar as pessoas aumentarem o texto. As regras de acessibilidade pedem que o texto possa crescer até ao dobro sem a página se partir. Por isso, no código, os tamanhos ficam em unidades que acompanham as definições do browser, e o zoom nunca é bloqueado.

Como escolho uma fonte

  1. Começo pelo texto, não pelo título. Escrevo um parágrafo real e leio-o no telemóvel.
  2. Testo os caracteres traiçoeiros: Il1, O0, rn e m. Se se confundem, penso duas vezes.
  3. Vejo a altura-x e as aberturas em tamanhos pequenos.
  4. Confirmo os pesos e as línguas: se tem todos os pesos de que preciso e os acentos do português (ã, õ, ç).
  5. Só depois escolho a fonte dos títulos, se for mesmo precisa uma segunda.
  6. Testo em contexto: com conteúdo real, nos dois modos de cor e com o zoom a 200%.

Em resumo

  • Uma fonte, antes de ser bonita, tem de se deixar ler.
  • A Atkinson Hyperlegible foi feita para baixa visão e ajuda toda a gente: cada caractere é diferente dos outros.
  • A altura-x e as aberturas largas pesam mais do que ter ou não serifa.
  • Pelo menos 16 px, linhas de 60 a 75 caracteres, entrelinha de 1,5 ou mais, alinhado à esquerda.
  • Nada de parágrafos em maiúsculas, em itálico ou justificados.
  • Uma família pode chegar; duas, no máximo, cada uma com o seu trabalho.
  • Deixa sempre as pessoas aumentarem o texto.

A melhor fonte é aquela em que ninguém repara. As pessoas leem, percebem e seguem em frente, sem nunca pensar nas letras.

Diogo Baraoo

Designer multidisciplinar · Sobre mim

Vamos trabalhar juntos

Tens uma vaga, um projeto
ou uma ideia?

Estou disponível para emprego a tempo inteiro e projetos freelance.