Tipografia e leitura na tela: o que a pesquisa mede

Ninguém lê a página do jeito que o designer imagina. O acervo do NN/g sobre leitura (em inglês) passou décadas medindo o que as pessoas fazem de fato com o texto na tela. E o que ele achou é bem mais limitado do que as receitas que surgiram a partir disso. O índice de tema de design visual (em inglês) reúne as peças por trás deste post.

O que a pesquisa consegue medir em leitura

A pesquisa tipográfica mede bem duas coisas: a velocidade com que alguém lê um trecho conhecido e onde o olho pousa na página. Velocidade se conta. Posição se registra. Já a compreensão, que é o que importa, não se mede com a mesma precisão.

A atenção define o teto. A revisão de 2008 sobre comportamento de leitura (em inglês) mostrou que quem visita uma página média tem tempo para, no máximo, 28% das palavras, e 20% é o caso mais provável. A base é um estudo de navegador instrumentado de Weinreich e colegas, com 25 pessoas, coletado em 2005 e reduzido a 45.237 visualizações de página.

A conta gira em torno de 25 segundos fixos mais 4,4 segundos a cada 100 palavras, então metade da informação só cabe em uma página de 111 palavras ou menos. Os autores declaram os limites: não há rastreamento ocular, então não se sabe como o tempo foi gasto, e o dado é de 2005 (NN/g (em inglês)).

A medição tem um segundo teto, e o estudo de 2022 deixa isso claro. Ele mediu leitura linear com perguntas depois, e não o escaneamento real. O próprio autor chama o resultado de decepcionante, porque ele não leva a nenhuma regra simples.

Legibilidade contra compreensão

Um texto de 2015 (em inglês) separa três barreiras que o time de conteúdo e o de design costumam misturar. Legibilidade é enxergar o caractere e distingui-lo dos vizinhos. Readability é a dificuldade das palavras e das frases, medida em anos de escolaridade. Compreensão é entender a mensagem e chegar à conclusão certa.

A última é o objetivo. As duas primeiras são caminhos até ele.

A legibilidade se testa. Meça a velocidade de leitura contra um desenho de referência e trate uma queda clara como problema. Para o texto, mire a oitava série para um público amplo e a décima segunda para um público técnico. Para a compreensão, escreva na linguagem de quem lê, lidere pela pirâmide invertida, baixe a carga cognitiva e encurte o texto no celular.

Fonte, tamanho e entrelinha

A escolha da fonte importa, mas de um jeito curioso. No estudo de 2022, para a mesma pessoa, a fonte mais rápida superou a mais lenta em 35%, com 314 palavras por minuto contra 232 (a melhor fonte para leitura online (em inglês)). A Garamond teve a melhor média, 312 palavras por minuto. A Franklin Gothic levou o maior número de primeiros lugares, 59% das vezes, com média pior, 271. Essa divisão sugere que a fonte ajuda mais quem lê devagar.

Gosto pessoal é um mau guia. As pessoas leram 14% mais rápido na fonte mais rápida do que na fonte preferida, então perguntar de que elas gostam erra o alvo. A velocidade também cai com a idade, cerca de 1,5 palavra por minuto por ano, perto de 11% mais tempo a cada 20 anos. A compreensão quase não se moveu entre as dezesseis fontes e não separou nenhuma (NN/g (em inglês)).

Tamanho e espaçamento pesam mais que o nome da família. O estudo do MIT AgeLab de 2017 (em inglês) testou palavras isoladas. Achou que a maior venceu a menor, a largura regular venceu a condensada e a caixa alta venceu a baixa, todas com significância estatística. A caixa baixa custou 26% mais tempo que a alta, e a condensada custou 11,2% mais que a regular. O efeito ruim da caixa baixa piorou conforme o tamanho diminuiu.

O próprio estudo traz a ressalva. Ele usou palavras isoladas, e o próprio autor registra que em um trecho longo a caixa alta atrapalha a leitura.

O glossário de 2024 (em inglês) fornece o vocabulário disso tudo: abertura, altura de x, entrelinha, kerning, órfã, ponto, família e peso. Uma abertura grande tende a facilitar a leitura. Texto alinhado à esquerda é o padrão mais seguro. Uma órfã deixa um fragmento sozinho e torna o trecho desconfortável de ler.

Sobre serifada contra sem serifa o glossário é direto. Antes do digital a serifada tinha a fama. Na tela de hoje a sem serifa empata e às vezes faz melhor, em parte porque a serifa nem sempre renderiza bem em tela de baixa resolução.

O padrão em F e o que ele decide

O padrão em F (em inglês) descreve um escaneamento, não uma leitura. O olho cruza o topo, desce num segundo movimento mais curto e depois corre pela borda esquerda. As primeiras linhas recebem mais atenção, e as primeiras palavras de cada linha recebem mais fixação. Ele vale na área de conteúdo, não na barra de navegação, e aparece no celular e espelhado em idioma da direita para a esquerda.

Quem escreve pode tirar proveito disso. Coloque o ponto-chave nos dois primeiros parágrafos. Escreva um título e um subtítulo que digam algo. Comece o título pela palavra que informa. Agrupe itens relacionados, use negrito na palavra informativa, nomeie o destino dentro do link, mantenha a lista curta e corte o que não carrega peso.

O escaneamento é ainda mais apertado em páginas de produto com dado denso, onde os números conduzem a mensagem. O mesmo princípio vale para microcopy de produto, onde poucas palavras precisam entregar a instrução.

O tamanho sob controle de quem lê

Uma nota de 2018 sobre fonte variável (em inglês) é um caso, não um teste com usuário. Ela reporta analytics do próprio site: 77% das sessões usam uma janela maior que 1100 pixels, 16% ficam abaixo de 500 e 7% ficam no meio. O suporte dos navegadores a fonte variável subiu de 2% para 70% em dois anos, e 80% das sessões do site poderiam usar a fonte.

O artigo propõe um jeito de pesar a mudança. Quando uma melhoria atende mais ou menos 80% do público, ela pode valer a pena. Se a mesma mudança prejudica com gravidade os outros 20%, segure. A tela não está totalmente nas mãos de quem desenha, então a decisão precisa respeitar as bordas (NN/g (em inglês)).

A hierarquia visual antes do tamanho

A hierarquia visual (em inglês) é a ordem em que o olho consome os elementos, e ela começa antes de alguém apelar para uma fonte maior. Três ferramentas fazem o serviço: cor e contraste, escala e agrupamento.

A hierarquia nasce do contraste de valor e saturação contra o contexto, e não da cor sozinha. O agrupamento nasce da proximidade com espaço em branco e de uma região comum com cercamento. O teste de semicerrar os olhos, ou um desfoque em etapas, revela a hierarquia que existe de verdade e denuncia uma que ninguém planejou. O mesmo equilíbrio de tamanho, contraste e espaço guia a tipografia de material.

Onde a medição não decide

Vários dos números acima carregam uma data de validade ou um escopo do qual não escapam. Quatro deles apontam para lados diferentes, e vale a pena manter essa tensão à vista.

Caixa alta: o estudo de relance (em inglês) mediu a maiúscula 26% mais rápida que a minúscula em uma palavra isolada. O glossário (em inglês) e o próprio autor avisam que a caixa alta atrapalha em um trecho longo. A unidade de texto é a diferença, e o contexto decide.
O efeito da idade: o estudo de leitura de 2022 achou cerca de 11% mais tempo a cada 20 anos. Um estudo anterior do próprio NN/g registrou 16%. O autor levanta duas explicações, uma mudança real ao longo do tempo ou uma métrica diferente, e deixa a questão aberta.
A escolha de fonte contra o quanto se lê: um artigo (em inglês) trata a fonte como decisão de risco alto, enquanto outro (em inglês) mostra que se lê de 20% a 28% das palavras. Eles medem posturas diferentes, leitura linear contra escaneamento, então não se anulam.
A idade do dado: os números de 28% e 20% vêm de dado coletado em 2005 e são reusados como se fossem atuais. Diga o ano sempre que citá-los (quanto as pessoas leem (em inglês)).

As decisões de fonte e tipografia giram em torno de uma pergunta: quanto deste texto alguém vai de fato consumir. As medições acima limitam a resposta sem fechá-la.