Para começar, entenda, por ‘leiturabilidade’, a agradabilidade de se ler um texto. Com isso em mente, vamos lá.

Primeiramente, a tipografia pode parecer um campo inerentemente tedioso – lidar com fontes e tamanhos, colocando isso em negrito e aquilo em itálico, pode parecer arbitrário ou difícil: por onde começar?

Definição e Propósito   

Definições evitam confusões, e propósitos nos dão uma luz no fim do túnel. Simplificando, tipografia é a arte de criar e configurar uma fonte com o propósito de honrar o texto a que pertence.

Você vai tomar uma decisão “tipográfica” ao selecionar uma fonte adequada para qualquer projeto que tem em mente. O próximo passo é lidar com  títulos, subtítulos, parágrafos, listas, tabelas, trechos, citações e todos seus outros irmãos (os micro) ao tomar decisões sobre como eles serão organizados na página (os macros: grades, colunas e margens). Então podemos analisar como eles se relacionam (§ Highlight relationships and provide navigation).

A tipografia existe em qualquer lugar em que uma fonte é configurada (p.e. movable type): ela pertence a relatórios financeiros, ao jornal local, aos desenhos de cereais, aos romances nos nossos criados-mudos, a escrituras religiosas e, por extensão, a “fontes movéis” na web.

Cada um de nós provavelmente tem uma boa idéia do que consideramos ser uma boa tipografia. Considerando o jornal local, ou os desenhos dos cereais ou os livros na nossa estante, você provavelmente será capaz de listar uma gama de propriedades que fazem a tipografia ser “boa”.

Os mérito das nossas escolhas de tipografia são imediatamente aparentes, e dois dos mais importantes deles são a legibilidade e a leiturabilidade.

Legibilidade

A legibilidade se refere ao reconhecimento de glifos individuais (as marcas individuais que significam os caracteres semânticos). Uma gama de fatores influencia na legibilidade de um glifo: contorno, largura, ângulo (do contorno) estilo (roman, maiúsculas), inclinação (de todo o estilo), cor (cor real e cor da tipografia, p.e. contraste da forma da letra com seu plano de fundo), cor do plano de fundo, entre outros.

Leiturabilidade

Legibilidade é diferente de leiturabilidade. Leiturabilidade se refere ao reconhecimento de palavras inteiras, sentenças, parágrafos, tabelas, ou qualquer coisa que constitua o texto. Uma gama de fatores macro afeta a leiturabilidade: a medida (comprimento da linha), o leading (altura ou espaçamento da linha), a justificação ou alinhamento, o estilo do caractere, o kerning e o tracking, o tamanho da fonte, entre outros.

É claro, os dois estão interrelacionados; mudanças no tamanho dos pontos irão impactar a legibilidade dos glifos individuais de ambos, e as palavras que os compõe. 

Destaque relacionamentos e garanta navegação

Assim como as guidelines de acessibilidade do WCAG (WCAG 2.0, § 2.4), sobre como garantir que os hyperlinks sejam compreendidos fora do contexto, a hierarquia tipográfica dá ao texto uma certa “skimmability”.  Uma boa hierarquia tipográfica garante que o texto como um todo tenha boa navegabilidade, de modo que os leitores podem encontrar seu lugar novamente, ou pular introduções com informações supérfluas e ir direto onde interessa.

Uma boa hierarquia tipográfica vai fornecer dicas aos leitores: títulos têm estilos e tamanhos que garantem que eles sejam imediatamente identificados como títulos; parágrafos têm um estilo uniforme, e seus inícios e fins são bem marcados; citações são reconhecíveis, separadas dos parágrafos onde elas estão, e assim por diante.

Tais hierarquias também enaltecem relacionamentos inerentes entre os elementos da página: rótulos são colocados próximos a gráficos e a tabelas, e essa proximidade faz com que eles sejam identificados como notações descritivas.

Como outro exemplo, imagine um design mais complexo de duas cores. Uma tabela contendo os números dos lucros trimestrais poderia ter um background azul claro, enquanto a tabela vizinha que detalha a perda trimestral poderia ter um background vermelho claro, e a soma das duas, sobrepostas uma sobre a outra em um gráfico de linha, teria a linha do lucro em azul escuro, e a linha das perdas em vermelho escuro. Notações de gráficos deveriam fornecer uma legenda, mas cores também podem ser usadas para mostrar o relacionamento.

Cor, estilo da fonte, espaçamento, posição, chanfradura, e uma gama de outras variações de estilo podem ser utilizadas para demonstrar um relacionamento entre elementos da página ou em páginas subseqüentes – e até no website como um todo.

Qualidades merecidas e não merecidas

Como dito anteriormente, nós conscientemente (e inconscientemente) julgamos a tipografia dos textos. Olhe para o jornal, ou pegue um livro da estante, e descreva como o texto é. O do jornal deve estar em negrito e parecendo “barato”, enquanto um livro sobre psicologia social deve estar limpo e organizado, contando com notas de rodapé e referências fáceis de achar. 

A tipografia imbui configurar um texto com qualidades, ou pelo menos com um certo interesse. Um texto pode parecer convidativo, gracioso, sereno, desenhado, espertalhão, sem equilíbrio, e/ou tedioso, e o mais importante é que essas qualidades podem ser conquistadas e perdidas. Um bom tipógrafo vai humildemente honrar o texto que está configurando, em honra ao sentido desse texto. Uma má tipografia ou a falta de importância com a mesma pode desencorajar os leitores com um senso de tédio, inacessibilidade, ou de algo “barato”.

Induzindo um estado de interesse

Finalmente, uma boa tipografia pode induzir interesse entre leitores em potencial. Simplesmente garanta ao texto o respeito que ele merece; se o texto é bom, e tem o intuito de ser lido e compreendido, dê a ele o respeito tipográfico a que ele tem direito. Ao fazer isso, você irá induzir um estado de interesse em leitores visitantes.

Alcançando boa legibilidade & leiturabilidade

Vamos focar agora em alcançar dois dos principais objetivos de uma boa tipografia: legibilidade e leiturabilidade. Seus princípios básicos são bem compreendidos, uma vez que a tipografia tem mais de 400 anos de história no mundo impresso, mas em um meio digital existem algumas considerações a mais a serem feitas.

Fontes

Como já colocado anteriormente, as fontes têm um impacto significativo na virtude do texto em que são aplicadas. Selecionar uma fonte boa e aplicável que honra a cópia e atende suas necessidades (por exemplo, se você sabe que vai estar configurando símbolos matemáticos, garanta que a fonte tenha glifos) é fundamental.

A grande chance é que você esteja configurando grandes blocos de texto. Você vai querer escolher uma boa fonte de texto: fontes que são designadas para blocos de textos de maior comprimento. A melhor maneira de testar uma fonte é determinar um parágrafo de Lorem Ipsum em roman, no tamanho básico de 12px a 14px com um leading de 1 a 1.5  (veja § Leading, abaixo) e ver como ele lê. Fontes de texto também podem ser serif, como a Georgia, ou sanserif, como a Arial.

Lorem Ipsum é ótimo para guardar o texto enquanto você testa atributos de estilo. Para testar a leiturabilidade real, me foi dito que você deve selecionar um texto que tenha significado e desejo de ser lido. Preso em achar algo para usar? Pegue um artigo da Wikipedia ou do Project Gutenberg. Obrigado a David Owens por essa sugestão.

Fontes são declaradas no CSS com a  propriedade font-family e aceitam valores descritivos, seja uma família genérica ou uma específica família de fontes, como por exemplo, uma transitional serif :

p {
    font-family:
        Baskerville,
        Times
        'Times New Roman'
        serif;
    }

Tamanho

Ao determinar a fonte, selecione um tamanho confortável: 14 pixels para a maioria das fontes de texto para tela é uma boa regra. Poucos de nós têm uma visão 20-20 e é melhor que ela seja grande do que pequena.

Nota: Widgets de tamanho de texto do Javascript  é diferente de acessabilidade.

Não defina o tamanho do texto arbitrariamente; tente colocá-lo dentro de uma escala:

A “escala clássica”

Outra escala

 
Uma escala baseada na sequência Fibonacci.

O tamanho do texto é melhor definido utilizando ems. Um em é a distância horizonte equivalente ao tamanho da fonte em pontos (p.e. 1em de uma fonte de 12pt é 12pt; 1em de uma fonte de 16pt é 16pt). Podemos fazer isso no CSS usando a propriedade font-family.

p { font-size: 1.2em; }

Lembre que os tamanhos das fontes são herdados dentro do DOM dos pais –>  filhos. Isso pode deixar os cálculos de tamanhos utilizando em para elementos aninhados difíceis. Uma boa ideia é determinar todos os tamanhos em pixels, primeiro, e então os converter para ems. Pixels são fáceis de se trabalhar, mas deixam a desejar como unidade fixa, particularmente ao escalar um website (veja § Medidas abaixo).

Para calcular o valor desejado em ems, descubra quanto 1 pixel vale em ems e então o multiplique pelo tamanho da fonte desejado (em pixels):

1 ÷ parent font-size × desired pixel value = em value

Por exemplo, se o tamanho da fonte pai (definida, por exemplo, pelo body element) é 16 pixels, mas nós gostaríamos de definir o tamanho de um parágrafo – que é o filho do body element – em 12 pixels, devemos calcular: 1 ÷ 16 × 12 o que nos dá 0.75em.

O truque do 62,5%

Existe um ótimo truque para simplificar estes cálculos. Considere o seguinte no CSS:

p { font-size: 80%; }
blockquote { font-size: 80%; }
que gera o estilo para essa marcação:
<p>This is a short paragraph, followed by a quote:</p>
<blockquote>
    <p>block quotes are blocks of quoted material, and can hold a range of
       things, including paragraphs, lists, and even headings of course.</p>
</blockquote>

80% de 16px é 12.8px, então os elementos p e blockquote serão desse tamanho, mas o que acontece se colocamos o elemento p dentro do elemento blockquote? O pai (blockquote) tem 12.8px então o p será renderizado a 80% deste valor: 10.42px.

Putz! Potencialmente confuso. Richard Rutter desenvolveu um ótimo truque para simplificar os cálculos de tamanhos de elementos aninhados.

Considere:

• Browsers comumente tem um tamanho padrão de 16px para texto;
• Estabeleça o body a uma fonte do tamanho 62.5%, redefinindo tudo ao tamanho de 10px.

A partir de agora, os cálculos são similares para descendentes diretos do body, por exempl0 12px = 1.2em; 8px = 0.8em, e assim por diante. Elementos aninhados mais ao fundo são (ainda) relativos, é claro.

Medida

A medida é o tamanho da linha. É importante manter as linhas em um tamanho confortável, nem muito longas, nem muito curtas.

O olho encontra dificuldade em seguir para a próxima linha quando as medidas são muito longas. Um grande e infame exemplo de um site que poderia fazer melhor neste aspecto é a Wikipedia, no qual a medida é relativa ao comprimento da janela do browser; ao expandir a janela para full-screen em um widescreen, você vai notar como de repente surgiram 40 confortáveis caracteres por linha expandirem para 100 ou mais.

Reciprocamente, deve-se garantir que as linhas não sejam tão pequenas que o olho deve passar para a linha de baixo após algumas palavras. Existem alguns estilos de publicações em  que medidas pequenas são populares, por exemplo, em periódicos, mas entenda que se eles forem configurados pequenos em outro lugar, eles vão parecer “baratos”, como se pudessem ser jogados fora depois de ler, da mesma maneira que os jornais.

Medidas são definidas no CSS com a propriedade width. Idealmente, defina a largura do design ou de toda a página em ems, e colunas em porcentagens, de modo que as colunas, a grade, e o design total da pagina sejam escalados proporcionalmente. Por exemplo:

body {
    font-size: 62.5%;
    width: 96em;
    margin: 0 auto 0 auto;
    }
    div#content {
        width: 75%;
        float: left;
        }
    div#sidebar {
        width: 25%;
        float: right;
        }

Nesse exemplo, nós usamos o truque 62.5% para resetar o tamanho da fonte base a 10 pixels no body e definir uma largura de design total de 960 pixels centralizados. Enquanto isso, definimos dois elementos div: um como sidebar e uma largura de 240 pixels (25% of 960 = 240 pixels) e um outro como content container com uma largura de 720 pixels (75% of 960 = 720 pixels). Esse design fica com a escala perfeita, mesmo quando o text-only está disponível.

Leading

É importante fornecer um amplo espaço entre as linhas para que o olho viaje entre as linhas com conforto, naturalmente. Uma boa regra é gerar uma cópia com medidas pequenas sem o leading, e medidas longas mais o leading.

O Leading é controlado no CSS usando a  propriedade line-hight, e pode definir unidades de menores valores numéricos (p.e. 1.5) em que ele age como multiplicador do tamanho da fonte:

p { line-height: 1.5; }

Isso significa que o leading será uma vez e meia maior que o tamanho do font-size. Valores de unidades menores são mais fáceis de trabalhar e de serem rastreadas ao definir um leading para elementos descendentes, além de escalá-los bem.

Alinhamento

Alinhamento é a colocação e o arranjo do texto. Ao configurar blocos cópia, alinhe o texto com a margem esquerda ou na “gutter” (sarjeta), e não tenha medo de ter bordas irregulares (p.e. “left-aligned”, “flush-left”, ou “ragged-right”). Justificar é ótimo se existem medidas o suficiente para prover a adaptação do espaçamento de palavras e, de preferência, se a hifenização automática for acessível – evite a justificação em colunas estreitas de texto.

O alinhamento é controlado no CSS pela propriedadetext-align , e aceita valores descritivos, por exemplo:

body { text-align: left; }
    div#content p { text-align: justify; }
    div#content p.verse { text-align: center; }

O ponto culminante (contraste)

Textos legíveis e agradáveis de ler têm um bom contraste com elementos a sua volta sem tornarem seus olhos doloridos. Um bom contraste é conseguido ao configurar o texto tendo os fatores acima em mente, com adição da cor do texto com a do background em que ele será inserido. Um bom princípio é usar o escuro no claro e vice-versa. Evite choque de cores ou um cinza pouco visível em um background branco.

No css, a cor do texto é controlada pela property color enquanto o background é controlado pela property background-color e aceita valores numéricos e descritivos. Por exemplo:

div#content p {
    color: #111;
    background-color: white;
    }

Preste atenção a contrastes ao trabalhar com textos claros em um background escuro. Textos escuros em background claro geralmente apresentam maior contraste que textos claros em um background escuro. Assim, quando um texto claro estiver em um background escuro, cheque seu contraste – aumente o leading e diminua o font-weight quanto necessário.

div#footer p {
    color: white;
    background-color: #333;
    line-height: 1.8;
    font-weight: lighter;
    }

Finalizando

Robert Bringhurst uma vez articulou: ‘palavras bem escolhidas merecem letras bem escolhidas’. Uma boa tipografia web deve convidar os leitores ao revelar o conteúdo e o sentido do texto, e enaltecendo relacionamentos através de uma hierarquia uniforme para facilitar a navegação.

Em outras palavras, experiências web que apresentam boa tipografia são mais fáceis e prazerosas de ler e usar. Ao aplicar esses princípios, seu texto dará o primeiro passo em direção a este objetivo: melhoria fundamental da tipografia através de uma melhor legibilidade e leiturabilidade.

Texto original em inglês por Simon Klein, disponível em http://klepas.org/achieving-good-legibility-and-readability-on-the-web/#notebook