Um simples truque tipográfico para aumentar a legibilidade do texto em até 30%
Em seu coração, a tipografia é sobre duas coisas: legibilidade, que se refere a como letras, palavras e frases são distinguíveis; e legibilidade que lida com o quão fácil é para o cérebro converter esses elementos em uma mensagem coerente.
Você já se viu lendo uma única linha de texto duas vezes, como se fossem duas linhas, especialmente quando seus olhos estão cansados? Isso ocorre porque o olho se perde em sua jornada da direita para a esquerda (ou da esquerda para a direita, dependendo da sua língua) do final de uma linha até o início da próxima. É a razão pela qual as crianças traçam linhas com o dedo quando são ensinadas a ler.
Existem algumas coisas que os tipógrafos podem fazer para evitar o problema e são especialmente importantes em grandes quantidades de texto, como notícias ou blogs: em primeiro lugar, certifique-se de que seus caracteres por linha não sejam muito altos. Além disso, o olho tem que viajar quanto maior a chance de se perder; em segundo lugar, considerar uma fonte serifada, a maior impressão horizontal cria maior distinção visual entre as linhas de texto e espaço em branco, servindo ao mesmo papel que o dedo da criança acima mencionado; Por último, preste muita atenção ao seu maior espaçamento entre linhas, criando canais mais claros para o seu olho seguir.
Além desse conselho tradicional, uma nova técnica foi descoberta. Leitor BeeLine é um fascinante novo plugin para o Chrome que demonstra como funciona.
O BeeLine Reader adiciona um gradiente de cor a linhas de texto, tornando a transição do final de uma linha para o início da próxima mais fácil para o olho. A Universidade de Stanford realizou um teste usando o plugin e concluiu que o BeeLine Reader resultou em um aumento médio de velocidade de leitura de 10%; o próprio site do plugin afirma que um leitor experiente experimentará um aumento de 25 a 30%.
Você deve conseguir ler o texto à direita muito mais rapidamente do que o texto à esquerda.
Embora eu não possa dizer que aprovo o plugin forçando o texto em uma única coluna, ou das cores que eles usaram (feio para a maioria e inútil para qualquer pessoa com daltonismo protânico), o princípio é o som. Há um exemplo em escala de cinza no site do BeeLine Reader que melhora a legibilidade, mas não infringe a marca de ninguém. Um rápido teste do seu teste de leitura, mostrou que melhorei em 22% usando a versão cinza.
Embora não haja uma maneira fácil de implementar esse tipo de design em CSS simples, é possível codificar como o plugin demonstra.
Se você estiver projetando grandes quantidades de texto em execução - especialmente se outras contraints forçarem você a usar colunas muito largas ou que a altura da linha é muito pequena - considere aplicar essa técnica para compensar.
O que você acha da técnica BeeLine Reader? Como você se saiu no teste de leitura? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem codificada por cores via Shutterstock