Ramon Victor

Legibilidade na web

| 11 Comments

Quando falamos em design de interfaces para web não podemos esquecer de abordar as regras básicas de legibilidade. E qual seria o propósito da legibilidade? Esta ligada diretamente com a qualidade tipográfica do texto, envolve detalhes que vão desde o melhor contraste até a utilização correta dos espaçamentos.

Se a legibilidade do site não for bem aplicada, a usabilidade pode ser comprometida. Já afirmava Nielsen “Todo o resto – design, velocidade, conteúdo – falha quando os usuários não conseguem ler o texto”. Por isso devemos estar atentos, ao menos, aos preceitos básicos da legibilidade na web.

  • Contraste: Devemos utilizar cores que possuam um bom contraste entre o texto e fundo, ou seja, se a tonalidade do texto for claro o fundo deverá ser escuro e vice-versa.
    Os grandes portais na web costumam não utilizar o preto puro sobre o fundo branco, optam por um tom de cinza escuro o que proporcionar mais suavidade tornando a leitura menos cansativa.
    O mesmo ocorre em sites com fundo preto, onde o designer costuma optar por um tom de cinza claro ao invés de 100% branco.
  • Serifas: Os detalhes das tipografias serifadas (Times new Roman, Georgia) não conseguem ser bem definidos pelos monitores, prejudicando a legibilidade, principalmente em tipografias pequenas e textos longos. Por isso é recomendável que elas sejam usadas em casos específicos como, chamadas curtas e títulos.
    Os tipos sem serifa (Arial, Verdana, Tahoma) são os mais recomendados para web, tanto é que são utilizados em grandes portais de notícias como, globo.com e UOL.  Nielsen ao falar de legibilidade ressalta: “Devido à baixa resolução das atuais telas de computador, o texto pequeno é mais legível em tipos sem serifa”.
  • Tamanho e Entrelinhamento: Uma das principais preocupações para que o texto seja legível é o seu tamanho, por isso devemos estar atentos a ele.
    Para parágrafos o recomendável é que sejam usados tamanhos entre 12-14px. Dentro dessa escala o texto fica com um tamanho bom para a leitura sem comprometer a estética do layout como todo.
    O entrelinhamento deve variar entre 120-200%. Assim para textos de tamanho 12px costumo usar espaçamento entre linhas de 18px.
  • Alinhamento: O alinhamento justificado tende a ser mais usado (por designers gráficos principalmente) porque proporciona uma organização mais definida dos parágrafos. Porém quando alinhamos o texto justificado os espaçamentos entre as palavras aumentam, muitas vezes desproporcionalmente, o que dificulta a legibilidade.
    Já no alinhamento à esquerda temos um ponto de partida constante com espaçamentos padrões e quebras desreguladas que servem como guia para seguir até a próxima linha, o que faz a leitura fluir de maneira bem menos cansativa.
    Em casos mais específicos os alinhamentos a direita, centralizado e justificado podem ser usados de maneira inteligente sem comprometer a leitura.
  • Devemos evitar: PARÁGRAFOS TODO EM CAIXA ALTA. Segundo Nielsen, os usuários lêem textos todo em maiúsculo cerca de 10% mais devagar do que quando lêem textos comuns (com letras minúsculas e maiúsculas).

Para trazer os conceitos mostrados ao sentido prático, decidi fazer um estilo básico de CSS para parágrafos:

p {
font-size: 12px;
font-family: Arial, Helvetica, Sans-serif;
color: #333; // tom de cinza para fundo branco
line-height: 150%; // espaçamento entre linhas
text-align: left;
}

Portanto, para a interface atender as diretrizes básicas de legibilidade deve-se utilizar de um bom contraste, fontes sem serifas, tamanho de 12px para textos, espaçamento entre linhas variando de 120-200%, alinhamento a esquerda e evitar usar o texto todo em caixa alta.

Referências

11 Comments

  1. Ótimo post Ramon, ta tomando gosto pela coisa né?
    continue assim

    valeu!

  2. e aí, vai engatar um mestrado não? tá parecendo que sim

  3. Olá….

    A legibilidade é uma qualidade que determina a facilidade de leitura de alguma coisa.
    Na tipografia, a legibilidade é a qualidade tipográfica de um texto (ou fonte tipográfica) que determina a sua facilidade de leitura seja para qualquer fim, web, impressos, veículo de comunicação etc.

    Cada tipo de font, identidade da tipografia, ao ser usada em qualquer projeto grafico deve estar em perfeita harmonia, pois basta apenas a tipografia em si e apenas por ela transparecer todo o conceito do projeto. Uma identidade.

  4. Valeu Billy!

    Augusto, no momento estou vendo as possibilidades de uma especialização na área de Design. Mestrado quem sabe mais pra frente? hehehe

    Agradeço a colaboração de todos.

  5. Só acho que deveria ter comentando sobre tamanho relativos, para as fontes…

    Mas o artigo está muito bom!

  6. Olá Ramon. Sou estudante de design gráfico e gostaria de parabenizá-lo pelo artigo. Pouquíssimos webdesigners atentam para a necessidade de compreender fatores de legibilidade e, mais profundamente, sobre cores e tipografia – para mim, a base de tudo em se tratando de design. Atento, entretanto, para suas referências: embora Nielsen seja uma sumidade em interfaces e, desta forma, apto para tratar de legibilidade, o assunto que você discorre é quase que totalmente sobre tipografia, e assim sendo, seria interessante ler especialistas do assunto. Certamente mudaria sua opinião sobre Helvetica entre as possibilidades no CSS, e saberia explicar melhor sobre entrelinha e a respeito de caixa-baixa vs caixa-alta. Forte abraço e bons caminhos pelo mudo do design. :)

  7. @Júlio,

    Muito bom receber comentários que vem para acrescentar como o seu. O objetivo dos meus posts esta longe de tentar ser opnião absoluta sobre o assunto abordado, na verdade, tento justamente estimular a discussão para o somatório do conhecimento. Acho que esse post está conseguindo atender esse objetivo. :)

    Obrigado pelo comentário!

    Abraços

  8. + sobre legibilidade na web: #usability #webdesign

  9. RT @SoniaBertocchi: + sobre legibilidade na web: #usability #webdesign

  10. + sobre legibilidade na web: #usability #webdesign

  11. RT @SoniaBertocchi: + sobre legibilidade na web: #usability #webdesign

Deixe uma resposta