Como melhorar a legibilidade de textos na Web

Aprenda a como melhorar a legibilidade de textos na Web e aprimorar a usabilidade e qualidade geral de seus projetos.

Ir para o artigo

Aprender como apresentar texto longo na Web, como postagens de blog, é uma habilidade de design valiosa para aprender. A boa notícia é que o CSS atual já fornece todas as ferramentas necessárias para melhorar a legibilidade de textos na Web.

Tornar um artigo legível — especialmente um que seja longo, técnico — não é muito fácil. Aprender o básico sobre como melhorar a legibilidade do texto na Web certamente trará um grande impacto positivo na experiência do leitor de seus conteúdos.

Pré-requisitos

Para este tutorial, você precisará de 2 arquivos:

  • index.html
  • global.css

Crie-os em uma pasta em sua máquina ou use este modelo de projeto no CodePen.

HTML-base e conteúdo

Preview in new tab

O HTML para este projeto é bastante autoexplicativo — é um artigo com conteúdo, com vários elementos HTML — então, primeiro, pegue todo o seguinte trecho de HTML e cole em seu arquivo index.html:

Ao abrir a página em um navegador, ela deve aparecer assim:

Uma página em HTML puro: ponto de partida para demonstrar como melhorar a legibilidade de textos na Web.
O bom e velho HTML puro. :)

O CSS

Usando alguns princípios do CUBE CSS, a ideia é fazer o máximo possível para melhorar a legibilidade do texto. O objetivo é escrever CSS de baixa especificidade que faça o máximo possível do trabalho.

No arquivo global.css, coloque o seguinte:

Foi definido um bloco com variáveis CSS no root com a escala tipográfica que será usada. Em seguida, alguns estilos básicos básicos gerais.

A escala tipográfica — baseada na lendária ferramenta Modularscale — é um grupo de tamanhos que aumenta em etapas de tamanhos específicos, com base em uma proporção escolhida.

Usando escala modular no texto para melhorar a legibilidade do texto.
Usando escala de quarta proporção que fornece passos bastante generosos entre os tamanhos.

Usa-se este tipo de escala no texto para criar ritmo na página. Se o texto e o espaçamento seguem uma proporção matemática, então, visualmente, ele flui bem, facilitando a leitura.

Estilo-base do HTML

Primeiramente, foco em alguns elementos HTML principais. O quanto se estiliza neste ponto em qualquer outro projeto dependerá muito do contexto geral de cada projeto.

Se não há muitos componentes complexos no site, provavelmente, não será adicionado muito estilo neste ponto, mas, como o atual contexto-exemplo é de um blog, é interessante trabalhar com esse CSS.

Adicione isso no global.css:

Isso afeta diretamente o estilo de links para que eles tenham a mesma cor do conteúdo da página. Felizmente, existe a palavra-chave currentColor em CSS, que é o valor computado, herdado para color.

Isso significa que se a cor de <body> for definida como color: #ff00ff, todo o conteúdo, incluindo os links, será rosa brilhante.

Estilos de hover foram adicionados para elementos que têm um atributo href. Isso significa que, se por algum motivo houvesse um <a> sem href, ele não seria afetado por esses estilos.

Claro, em teoria, não deveria haver esse tipo de elemento, mas você já viu editores WYSIWYG?! Eles fazem algumas… Coisas imprevisíveis. Quase sempre é melhor ser pragmático e com visão de futuro com essas coisas.

Continuando, acrescente no arquivo CSS:

Foi usada a system font stack para manter as coisas simples. Também, peso 900 para os títulos. Com isso em mente, tem-se tanto h1, quanto h2, configurados para usá-la. Também, uma altura de linha bastante estreita para os títulos — com uma redução na escala de tamanho para títulos de h1 a h3.

Mais coisas para o arquivo CSS:

A maioria das regras é auto explicativa — evidentemente, adapte ao projeto em que você se encontra.

A única coisa mais curiosa é o rgba com um alfa de 0.99. O motivo é porque Chromium e WebKit renderizam os fundos de seleção como parcialmente transparentes quando se usa uma cor sólida. Este pequeno hack impede que isso aconteça.

A legibilidade de textos no artigo-exemplo já está melhor. Mas ainda há um bom espaço para melhorias e refinamentos.

Resultado parcial de melhora de legibilidade no texto.

O utilitário de flow

Controlar o espaço entre os elementos é uma parte importante para fazer as coisas serem bem lidas e aprimorar a legibilidade de texto.

E existe uma maneira bem legalzinha de conseguir isso:

O que isso faz é selecionar irmãos próximos usando o famoso seletor-coruja (lobotomised owl selector). Isso significa que apenas os elementos que precisam de espaço têm espaço.

Por padrão, o espaço do flow é 1em, que é o tamanho da fonte calculado do elemento que tem margem adicionada a ele. Isso significa que seu elemento p terá ~16px de margem e seu h2 terá ~28px de margem.

Como essa escala modular está sendo usada, muito do trabalho árduo já é feito meio que automaticamente. O utilitário de flow dá um pouco de flexibilidade para que seja possível ser mais específico, honrando a variável CSS --flow-space, se estiver definida também.

Ao olhar novamente, é possível observar que essa corujinha causou um baita impacto no resultado final!

Resultado parcial depois de aplicada o controle de fluxo (seletor-coruja) para aprimorar a legibilidade do texto do artigo.
🦉

Comprimentos de linha

As próximas linhas de CSS irão transformar qualquer site em que você trabalhar. Adicione o seguinte ao CSS:

Limitar o comprimento das linhas tem um grande impacto na legibilidade de qualquer texto. A regra tende a ser que uma linha deve ter entre 65 a 75 caracteres. Se os comprimentos de linha forem muito longos, o conteúdo ficará realmente difícil de ler.

O segredo é a unidade ch, que é a largura do caractere 0 da sua fonte no tamanho renderizado. 60 deles em um longo parágrafo é bom, mas se você tem um título grande e volumoso, geralmente, é interessante que seja menor que isso.

Resultado parcial depois de aplicada restrição ao comprimento de linha para aprimorar a legibilidade dos textos.

Estilizando o post

Agora, a criação de um Bloco (CUBE CSS) que estiliza os elementos HTML que se encontram especificamente em artigos de formato longo.

Adicione o seguinte ao CSS:

A primeira coisa que pode chamar a atenção é a definição da regra --flow-space. É prática comum para muitos devs trabalhar com espaço entre os elementos em conteúdos longos. Isso ajuda a separar partes de conteúdo relacionadas cognitivamente, então, ir direto para o topo da escala tipográfica é uma boa maneira de garantir isso.

Em seguida, implementa-se um wrapper com clamp — aliás, também temos um artigo/vídeo sobre textos responsivos com clamp() –, que faz com que qualquer wrapper centralizado faz, mas, com clamp(), ajuda a manter os comprimentos de linha em um nível adequado ao contexto, independentemente do tamanho da viewport.

Adicionando mais algumas regras de espaçamento:

Por último, bastante espaço entre as figuras e o resto do conteúdo para permitir que o leitor se concentre no conteúdo da figura, que consiste principalmente em imagens. É sutil, mas causa um grande impacto.

Resultado parcial com distância entre texto e figuras para aprimorar a legibilidade dos textos.

Otimizando para viewports maiores

Para finalizar, adicione o seguinte CSS para otimizar para viewports maiores:

Usando uma media query, aumenta-se o tamanho da fonte para viewports maiores. Seria possível usar tipografia fluida, mas, neste caso, optou-se por ficar assim mesmo.

Para cada tamanho de fonte definido anteriormente, eleva-se 1 ou 2 níveis na escala modular.

Resultando, por fim, em algo como:

Resultado final do aprimoramento de legibilidade dos textos web.

Conclusão

Você pode conferir um demo online do resultado final do melhoramento da legibilidade de textos usando as técnicas abordadas no artigo — e/ou baixar os códigos para estudos.

Como citado no início, é importantíssimo aprender o básico sobre como melhorar a legibilidade do texto na Web para trazer um impacto positivo na experiência dos leitores de seus conteúdos.

Dentre as muitas — quase infinitas! — possibilidades de fazer esse aprimoramento da legibilidade, neste artigo foi mostrado como aplicar diversas técnicas CSS e conceitos de UX para que, a partir de agora, a leitura e legibilidade sejam aprimoradas em seus projetos Web.

E-book que explica os 3 conceitos fundamentais de CSS para você entender de uma vez por todas e parar de brigar com CSS!

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.