Ler um texto na tela do computador é desconfortável e cansativo. A não ser que você tenha uma cadeira super-confortável e ergonômica, a coluna e joelhos uma hora doem. Daí os olhos ardem e a concentração diminue.
Por isso é muito importante tornar os textos do website rápidos de ler ou, se forem longos, que a leitura seja fluída. Podemos chamar isso de legibilidade. Um texto fácil de ler e bem formatado facilita a retenção da informação. Seja um anúncio ou artigo é importante que o leitor lembre do que leu posteriormente. Pois é isso o que você quer.
Quase todo o conteúdo de um website é texto. Esteja ele em um anúncio ou reportagem. Apesar disso, a atenção despendida neste aspecto do design seguidamente é subestimada. Aprende-se a fazer efeitos para o background, imagens e textos. Mas o texto sem si, torna-se apenas um detalhe.
Neste artigo vou abordar aspectos que devem ser observados na formatação dos textos na página. Vamos começar com as medidas.
O Tamanho Da Fonte
Com a popularização de monitores com tela maior, utilizar fontes grandes tornou-se moda. E quando eu digo isso, me refiro a textos enormes, não simplesmente grandes. Enquanto outros web designer, principalmente desenvolvedores Flash, colocam o tamanho da fonte em 10px!
Deixando os extremos, a maioria dos web designers concorda que um tamanho bom para o texto é de 12 ou 13 pixels. Já o título, não tem padrão. Vai do espaço disponível e da criatividade de cada um.
Quanto às medidas utilizadas para definir o tamanho da fonte, existem as absolutas, que são pontos e pixels, e as relativas, que são porcentagem e em.
Utilizar pontos e porcentagem para visualização na tela esta fora de cogitação. A escolha fica entre pixel e em. A balança já pesou para os dois lados e atualmente não existem pontos decisivos a favor de um ou de outro. Definir qual é o melhor não cabe neste artigo. Utilizar em é um pouco mais complicado já que envolve efeito cascata, mesmo assim é o que eu uso.
E se você quiser usar também de uma maneira bem fácil faça o seguinte.
body{
font-size:62.5%;
}
p{
font-size:1.2em; // equivale a 12px
}
Disponibilizar na página a opção de aumentar o diminuir a fonte é uma boa idéia. Principalmente para textos longos e com publico diversificado, como websites de notícia.
Definir o tamanho da fonte de forma consistente entre as diversas categorias de texto também é importante. Todo título precisa ser grande assim como o corpo do texto precisa ser do mesmo tamanho. Isso é obvio? Certo. Mas tem gente que não faz o obvio. Como resultado na página existe texto de quatro tamanhos diferentes.
Isso confunde o visitante. Pois não cria unidade e devido a esta inconsistência ele fica confuso e abandona a página. Crie uma hierarquia para o texto que sirva de guia na leitura.
Espaçamento E Margem
A tendência da maioria das pessoas é ocupar o espaço disponível. Sejam com textos, fotos ou mobiliário. E não é diferente em uma página web.
Alguns chamam de ritmo vertical o correto espaçamento entre as linhas e parágrafos do texto. A idéia é fazer com que a leitura seja fluída. Pois mesmo quem não conhece design, vai notar a diferença entre um texto amontoado e um devidamente exposto. E como conseguir esta fluidez?
A primeira medida é definir o espaçamento entre as linhas. Para o tamanho da fonte padrão de 12 pixels, o aconselhável é um espaçamento (line-height) de 15px. Que também pode ser usado para definir a distância entre os parágrafos.
Outra medida é distanciar o conteúdo das margens e bordas. O espaço criado com este distanciamento não será perdido e sim ajudará a focar no conteúdo. O mesmo vale em relação a imagens.
O espaço em branco também pode ser usado para criar separação entre os blocos de texto. Desta maneira você evita usar bordas e separadores ao mesmo tempo em que consegue criar um design limpo e objetivo.
Contraste
Faz tempo já que não vejo um website com o fundo verde-limão e as letras em vermelho-sangue. Mas é sempre bom falar sobre o assunto. Pois os desenvolvedores também não estão mais se contentando em apenas colocar o texto preto sobre um fundo branco para garantir uma boa leitura.
Ganha espaço a combinação de fundo preto com letras cinza claro. Ainda mais que é possível configurar o tamanho da fonte maior já que os monitores também estão maiores. As outras variantes sempre apostam acertadamente em fundos claros com a cor da fonte escura.
Enfatizar trechos do texto para facilitar uma leitura rápida é extremamente aconselhável para artigos extensos. O texto torna-se escaneável e a somatória dos trechos em destaque acaba formando um resumo importante que convida a uma leitura mais aprofundada.
Você pode colocar o trecho em negrito, itálico, cor diferente ou em caixa alta. Só não some estas estilizações ou você criará um monstro que apenas vai atrapalhar a leitura. Como dica fica a utilização do itálico que é sutil e suficiente para criar o contraste necessário.
Comprimento e Alinhamento
Um mal comum tanto em textos curtos quanto longos são linhas de texto longas de mais. Ao final da leitura até parece que você terminou uma corrida. O inverso, com textos de quatro palavras, também não é muito raro.
Existe um cálculo simples para saber a largura ideal de um bloco de texto. Basta multiplicar o tamanho da fonte por 30. Se a fonte tiver o tamanho de 12px, a largura do bloco não precisa passar de 360 pixels. Ou em uma variante, deve ter no máximo 80 caracteres contando os espaços em branco. Cuide para não deixar uma linha com menos de 40 caracteres.
Outro mal que ainda acontece é ver websites com textos justificados. E em textos curtos, que eu já vi! Aposto que você já conseguiu imaginar os rios e valas entre as palavras…
Sendo assim, o texto deve ser alinhado à esquerda. Então tá tranqüilo. Nem tanto. Após formatar o alinhamento, digamos à esquerda, observe se o bloco não ficou muito acidentado à direita. Por exemplo, a linha de cima vai até o limite e a de baixo acaba uma palavra antes. E assim sucessivamente. O melhor nestes casos é ajustar manualmente o bloco.
Quando tiver que utilizar aspas e listas com marcadores, mantenha o alinhamento com o bloco do texto. De outra forma, a leitura perde um pouco do ritmo e o visual também é afetado.
Conclusão
Para fixar melhor os pontos expostos no artigo, você pode criar uma lista de checagem. Depois de algumas vezes que você proceder com a revisão dos itens já terá se acostumado.
