Técnicas modernas de CSS para melhorar a legibilidade

Podemos ler de muitas maneiras, e existem muitos tipos diferentes de leitores, cada um com suas próprias necessidades, habilidades, linguagem e, acima de tudo, hábitos. Ler um romance em casa é diferente de lê-lo no trem, assim como ler um jornal é diferente de navegar em sua versão online. A leitura, como qualquer outra atividade, requer prática para que alguém se torne rápido e eficiente. Basicamente, lemos melhor as coisas que estamos acostumados a ler.

Quais aspectos devemos levar em consideração ao projetar e desenvolver para a leitura? Como podemos criar experiências acessíveis, confortáveis ​​e inclusivas para todos os leitores, incluindo os mais desafiados e afetados pela dislexia?

Espaços, palavras, frases e parágrafos

Unidades

Em uma página da web, muitas unidades estão disponíveis para ajustarmos o tamanho da fonte do texto. Entender qual unidade usar é essencial para definir a estrutura de uma seção de leitura inteira. A natureza refluível da web exige que consideremos vários aspectos, como o tamanho da janela de visualização e as preferências de leitura do usuário.

Por esta razão, as escolhas mais adequadas são geralmente em e rem, que são unidades específicas da fonte. Por exemplo, definir as margens entre parágrafos usando ems ajuda a preservar o ritmo vertical à medida que o tamanho do texto muda. No entanto, isso pode ser um problema quando uma fonte com serifa é alternada com uma fonte sem serifa dentro de uma seção. Na verdade, com o mesmo tamanho de fonte, as fontes podem parecer opticamente muito diferentes. Tradicionalmente, a altura do caractere “x” minúsculo (o x-height) é a referência para determinar o tamanho aparente de um caractere.

Usando a regra de ajuste de tamanho de fonte, podemos, portanto, renderizar opticamente fontes do mesmo tamanho, porque a propriedade corresponderá às alturas das letras minúsculas. Infelizmente, esta propriedade está atualmente disponível apenas no Firefox e no Chrome e Edge por trás de um sinalizador, mas pode ser usada como aprimoramento progressivo usando a verificação @support:

 @supports (font-size-adjust: 1;) { article { font-size-adjust: 0.5; } }

Também ajuda na troca da fonte de fallback para aquela carregada remotamente (por exemplo, usando o Google Fonts).

Altura ideal da linha

Achamos que a tipografia é preto e branco. A tipografia é branca mesmo [...] É o espaço entre os pretos que realmente a faz.

— Massimo Vignelli, Helvetica, 2007

Como a tipografia é mais uma questão de “brancos” do que de “pretos”, quando aplicamos essa noção ao design de um site ou aplicativo web, devemos levar em consideração características especiais como altura da linha, margens entre parágrafos e quebras de linha.

Definir o tamanho da fonte com base na altura x ajuda a otimizar a altura da linha. A altura da linha padrão nos navegadores é 1,2 (um valor sem unidade é relativo ao tamanho da fonte), que é o valor ideal para Times New Roman, mas não para outras fontes. Devemos também considerar que o espaçamento entre linhas não cresce linearmente com o tamanho da fonte e que depende de vários fatores como o tipo do texto. Ao testar algumas fontes comuns para leitura de formato longo, combinadas com tamanhos de 8 a 14 pontos, pudemos deduzir que, no papel, a razão entre a altura x e o espaçamento ideal entre linhas é de 37,6.

Em comparação com a leitura no papel, a leitura na tela geralmente requer mais espaçamento entre as linhas. Portanto, devemos ajustar a proporção para 32 para ambientes digitais. Em CSS, esse valor empírico pode ser traduzido na seguinte regra:

 p { line-height: calc(1ex / 0.32); }

Nos contextos de leitura corretos, esta regra define uma altura de linha ideal para fontes serif e sans-serif, mesmo quando as ferramentas tipográficas não estão disponíveis ou quando um usuário definiu uma fonte que substitui a escolhida pelo designer.

Defina a escala

Agora que ajustamos o tamanho da fonte e usamos a unidade ex para calcular a altura da linha, precisamos definir a escala tipográfica para definir corretamente o espaçamento entre os parágrafos e dar um bom ritmo à leitura. Como dito anteriormente, o espaçamento entre linhas não cresce linearmente, mas varia de acordo com o tipo de texto. Para títulos com tamanho de fonte grande, por exemplo, devemos considerar uma proporção maior para a altura da linha.

 article h1 { font-size: 2.5em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h2 { font-size: 2em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h3 { font-size: 1.75em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0; } article h4 { font-size: 1.5em; line-height: calc(1ex / 0.37); margin: calc(1ex / 0.37) 0; } article p { font-size: 1em; line-height: calc(1ex / 0.32); margin: calc(1ex / 0.32) 0; }

Espaçamento entre letras e palavras

Ao trabalhar com a legibilidade, devemos considerar também os leitores que são desafiados, como aqueles com dislexia e dificuldades de aprendizagem. A dislexia do desenvolvimento afeta a leitura, e a discussão e a pesquisa sobre as causas ainda estão em andamento. É importante fazer uso de estudos científicos para compreender os efeitos que as variáveis ​​visuais e tipográficas têm na leitura.

Por exemplo, em um estudo que minha empresa acompanhou (“Testing Text Readability of Dyslexia-Friendly Fonts”), havia evidências claras de que as formas de glifo de fontes de alta legibilidade não ajudam na leitura, mas sim um espaçamento mais amplo entre os caracteres (rastreamento) faz. Essa descoberta foi confirmada por outro estudo sobre a eficácia do aumento do espaçamento (“Como os aspectos visuais podem ser cruciais na aquisição da leitura: o caso intrigante de aglomeração e dislexia do desenvolvimento”).

Esses estudos sugerem que devemos explorar o dinamismo e a capacidade de resposta das páginas da web, oferecendo ferramentas mais eficazes, como controles de manuseio de espaçamento. Uma técnica comum ao aumentar o tamanho dos caracteres é ajustar o espaçamento entre letras e palavras por meio de propriedades CSS, como letter-spacing e word-spacing .

O problema com isso é que letter-spacing atua incondicionalmente e quebra o rastreamento da fonte, levando a página a renderizar espaços não ideais.

Alternativamente, podemos usar fontes variáveis ​​para obter mais controle sobre a renderização da fonte. Os designers de fontes podem parametrizar o espaçamento de maneira variável e não linear e podem determinar como o peso e a forma de um glifo podem se adaptar melhor aos hábitos do leitor. No exemplo a seguir, usando a fonte Amstelvar, podemos aumentar o tamanho óptico, bem como o espaçamento e o contraste, conforme pretendido pelo designer.

O artigo do Web.dev “Introdução às fontes variáveis ​​na Web” tem mais detalhes sobre o que são fontes variáveis ​​e como usá-las. E confira a ferramenta Fontes Variáveis ​​para ver como elas funcionam.

Largura e Alinhamento

Para otimizar o fluxo de leitura, também temos que trabalhar a largura do parágrafo, que é o número de caracteres e espaços em uma linha. Durante a leitura, nosso olho se concentra em cerca de oito letras em uma foveatio (ou seja, a operação que é ativada quando olhamos para um objeto), e é capaz de lidar com apenas algumas repetições consecutivas . Por isso, as quebras de linha são cruciais: O momento de passar o foco do final de uma linha para o início da próxima é uma das operações mais complexas da leitura e deve ser facilitada mantendo o número correto de caracteres por tipo de texto. Para um parágrafo básico, um comprimento comum é de cerca de 60 a 70 caracteres por linha. Este valor pode ser facilmente definido com a unidade ch, atribuindo uma largura ao parágrafo:

 p { width: 60ch; max-width: 100%; }

A justificação também desempenha um papel importante na leitura através das linhas. O suporte à hifenização para idiomas nem sempre é ideal nos vários navegadores; portanto, deve ser verificado. De qualquer forma, evite texto justificado na ausência de hifenização , pois o espaçamento horizontal que seria criado seria um obstáculo à leitura.

 /* The browser correctly supports hyphenation */ p[lang="en"] { text-align: justify; hyphens: auto; } /* The browser does NOT correctly support hyphenation */ p[lang="it"] { text-align: left; hyphens: none; }

A hifenização manual pode ser usada para idiomas que não têm suporte nativo. Existem vários algoritmos (tanto do lado do servidor como do lado do cliente) que podem injetar o ‐ entidade em palavras, para instruir os navegadores onde o token pode ser quebrado. Esse caractere seria invisível, a menos que estivesse localizado no final da linha, após o que seria renderizado como um hífen. Para ativar esse comportamento, precisamos definir os hyphens: manual CSS .

Contraste de primeiro plano

O contraste de caracteres e palavras com o fundo é fundamental para a legibilidade. O WCAG definiu diretrizes e restrições para diferentes padrões (A, AA, AAA) que regem o contraste entre texto e plano de fundo. O contraste pode ser calculado com diferentes ferramentas, tanto para ambientes de design quanto de desenvolvimento. Tenha em mente que os validadores automatizados são ferramentas de suporte e não garantem a mesma qualidade de um teste real.

Usando variáveis ​​CSS e uma instrução calc , podemos calcular dinamicamente a cor que oferece o melhor contraste com o plano de fundo. Desta forma, podemos oferecer ao usuário diferentes tipos de contraste (sépia, cinza claro, modo noturno, etc.), convertendo todo o tema de acordo com a cor de fundo.

 article { --red: 230; --green: 230; --blue: 230; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000); --aa-color: calc((var(--aa-brightness) - 128) * -1000); background: rgb(var(--red), var(--green), var(--blue)); color: rgb(var(--aa-color), var(--aa-color), var(--aa-color)); } 

Além disso, com a introdução e suporte entre navegadores da consulta de mídia prefer-color-scheme , fica ainda mais fácil gerenciar a mudança de tema claro para escuro, de acordo com a preferência do usuário.

 @media (prefers-color-scheme: dark) { article { --red: 30; --green: 30; --blue: 30; } }

Daqui para frente

Projetar e desenvolver para uma leitura ideal exige muito conhecimento e o trabalho de muitos profissionais. Quanto mais esse conhecimento for espalhado pela equipe, melhores serão os usuários. Abaixo estão alguns pontos que nos levam a bons resultados.

Para designers

• Considere a estrutura semântica como parte do projeto, ao invés de um detalhe técnico;
• Layout do documento e métricas de fonte, especialmente os porquês e comos de suas escolhas. Eles ajudarão os desenvolvedores a implementar corretamente o design;
• Reduza ao máximo as variáveis ​​tipográficas (menos famílias, estilos e variantes).

Para desenvolvedores

• Aprender os princípios da tipografia para entender as decisões de design tomadas e como implementá-las;
• Use unidades relativas ao tamanho da fonte para implementar layouts responsivos (preenchimentos, margens, lacunas) que se adaptam às preferências do usuário;
• Evite a manipulação desenfreada de métricas de fonte. A legibilidade pode ser prejudicada quando as restrições de fonte não são respeitadas.

Para equipes

• Ler e compreender os princípios das WCAG;
• Considere a inclusão e a acessibilidade como parte do projeto (em vez de questões separadas).

Ler é uma atividade complexa. Apesar dos muitos recursos sobre tipografia na web e dos trabalhos acadêmicos que identificam áreas para melhorias, não existe uma receita mágica para alcançar uma boa legibilidade. O número de variáveis ​​a serem consideradas pode parecer esmagador, mas muitas delas são gerenciáveis.

Podemos definir a altura ideal da linha de um parágrafo usando a unidade ex , bem como definir a largura de um parágrafo usando a unidade ch , a fim de respeitar as configurações de navegador preferidas do usuário para tamanho de fonte e família. Podemos usar fontes variáveis ​​para ajustar o espaçamento entre letras e palavras, e podemos manipular o traço dos glifos para aumentar o contraste, ajudando leitores com deficiência visual e dislexia. Podemos até ajustar automaticamente o contraste do texto usando variáveis ​​CSS, dando ao usuário seu tema preferido.

Tudo isso nos ajuda a construir uma página web dinâmica cuja legibilidade é otimizada de acordo com as necessidades e preferências do usuário. Por fim, dado que cada pequena implementação ou detalhe tecnológico pode fazer uma enorme diferença, ainda é essencial testar o desempenho de leitura dos usuários usando o artefato final.

Recursos Relacionados

• “Teste de legibilidade de texto de fontes compatíveis com dislexia”, Galliussi, Perondi, Chia, Gerbino, Bernardis (2020)
• “Como os aspectos visuais podem ser cruciais na aquisição da leitura: o intrigante caso de aglomeração e dislexia do desenvolvimento”, Gori, Facoetti (2015)