Tipografia básica para web

Desde o meu início com o desenvolvimento para web, sempre foquei mais em programação, códigos, bancos de dados do que em design. Isto por aptidão. E se falta talento e bom gosto, também me faltou informação simples, direta e suficiente para criar algo esteticamente atraente. Não uma obra-prima, mas visualmente decente.

Vamos ao básico da tipografia, que é a área do design que estuda as fontes, as letras e suas formas. A intenção não é gabaritar o leitor a ser um especialista no assunto, longe disso, e sim fornecer as bases para que as produções venham a ter funcionalidade e cumprir decentemente com seu propósito.

Tipos de fonte

Com serifa e sem serifa (serif e sans-serif).


As serifas são os pequenos traços ou prolongamentos no fim das hastes das letras. A divisão das fontes entre tipos serifados e sem serifa é a principal divisão na tipografia.

Na mídia impressa, costuma-se usar fontes serifadas para o texto, e fontes sem serifa para títulos e outros elementos de destaque, isso mais por uma questão funcional do que estética. As serifas dão uma impressão de continuidade, o que facilita a leitura, e por isso é usada no fluxo de texto. Já as fontes sem serifa não dão esta sensação de continuidade, funcionando bem para elementos de destaque.

Mas na web a história muda. Fontes serifadas são mais difíceis de ler em monitores, e o uso de fontes sem serifa facilita a leitura.

Além da diferenciação entre fontes com e sem serifa, existem outras propriedades importantes de fontes. Os espaçamentos são uma dessas características. As fontes geralmente têm largura diferentes para letras diferentes. Quando a largura para cada letra é igual entre todas as letras, dizemos que a fonte é monoespaçada. Fontes monospace não são boas para leitura de textos, mas dão destaque em legendas e principalmente códigos fonte de programação, onde a organização visual que elas promovem ajudam o raciocínio e facilitam a leitura do código fonte.

Com o advento e suporte à propriedade @font-face no mainstream, com a abundância de formatos suportados (EOT, TTF, SVG, WOFF) pelos navegadores, e também pelo suporte a propriedades gráficas de transformação (scale, skew, rotate,...) a tipografia na web alcança um novo patamar a ser explorado pelos desenvolvedores.

O conjunto

Não basta escolher a fonte visto que textos geralmente não são apenas uma palavra e sim um conjunto delas, com linhas e outros elementos em volta. Trabalhar este espaço é tão importante quanto a escolha da fonte, e na verdade influencia diretamente na escolha da fonte.

Linhas muito longas ou muito curtas são mais difíceis de ler. Algo entre 50 e 90 caracteres por linha é o recomendado para leitura em telas de computador.
O distanciamento entre as letras também influi na qualidade da leitura. Encontrar o ponto de equilíbrio, de conforto, é a chave.
O distanciamento entre linhas é outro aspecto muito importante da composição. Linhas muito próximas dificultam a leitura, muito distantes não passam a sensação de unidade, de conjunto do texto.

Estes espaçamentos mudam conforme o propósito, o público-alvo, o tipo de texto, o tamanho da fonte, entre outras variáveis. Não existe uma regra de ouro, o bom senso é quem comanda (quando for o caso de mudanças). Mas via de regra, espaçamento entre linhas em 1.5 ou 1.4 é considerado como padrão para uma boa leitura. Para o espaçamento entre letras, só mude quando houver necessidade.

Contraste

Quando ouvimos falar de contraste, logo pensamos em cor, mas contraste é um termo mais abrangente em design. É algo que quebra o padrão de repetição. As formas básicas de contraste são: tamanho, posição, textura, cor, forma e orientação. E estes se aplicam também à tipografia.
Não é somente através da mudança de fonte que podemos dar ênfase, destaque para algum elemento. Saber trabalhar com estes conceitos de contraste ajuda o design a ganhar volume e importância, mantendo a uniformidade do conjunto (sem bombardear o leitor com diversas fontes e cores diferentes), em outras palavras, criar a hierarquia visual.

Acessibilidade

Apesar de ser uma importante área do design, e existir uma infinidade de belas fontes, usar mal as fontes pode destruir o design ou pior, a credibilidade de toda a obra.
Para texto comum, de fluxo, conteúdo, use fontes com as quais as pessoas estão habituadas. Arial, Verdana, Helvetica, Tahoma, Times New Roman, Courier New, Lucida... todas estas fontes são usadas pela maioria dos grandes sites e portais, e por um motivo simples: todos estão acostumados com elas, e geralmente tem estas fontes instaladas nos seus computadores ou celulares.

E as fontes bonitas? Use elas em elementos de destaque. No logotipo, na logomarca, nos cabeçalhos, em mensagens promocionais, etc, mas não nos textos, formulários, menus e barras de navegação.

E para completar a acessibilidade, não podemos esquecer de um antigo (mas não raro esquecido ou mal usado) recurso do CSS 2.1, as famílias genéricas de fontes. O CSS prevê 5 famílias genéricas (serif, sans-serif, monospace, cursive e fantasy), que podem (devem) ser usadas nas declarações de fontes, sempre ao final, provendo uma regra de fallback. A idéia é simples, se o usuário não tem instalada a fonte que você declarou, ou mesmo se por algum motivo a fonte não pode ser baixada/processada pelo @font-face, você fornece pelo menos a família de onde a fonte pertence, e o navegador do usuário utilizará a fonte configurada para tal fim (falando sério, isso é algo bem comum de acontecer), e ainda assim, seu site manterá a aparência de conformidade para o usuário.

Se você não entendeu, deixe-me explicar melhor com um exemplo meu, real. Eu uso Linux. Não tenho instalado aqui as fontes Helvetica e Tahoma. Alguns sites, como o google code, declaram a fonte Helvetica para ser usada (font-family: Helvetica, sans-serif;). Como eu não tenho, o Firefox, o Opera e o Chrome, vão utilizar a fonte que está configurada para o tipo sans-serif, que no meu caso é a FreeSans. O site, apesar de não aparentar da forma original que os designers gostariam, ainda podem se valer desta regra de fallback, e o Google Code, assim como muitos blogs e sites que não declaram a fonte, têm uma aparência familiar pra mim, o que gera conforto visual, e passa uma sensação de confiança (não é algo bizarro ou estranho).

Então fica o lembrete: SEMPRE usar uma família genérica junto das declarações de fonte no CSS.

Resumo

• Na maioria dos textos use fontes simples, comuns.
• Não utlize muitas fontes, nem muitos estilos (negrito/itálico/cores) diferentes. Se necessário, reescreva o texto.
• Use contraste como negrito, tamanho ou cores para elementos especiais ou específicos, mas procure manter a unidade e a hierarquia visual.
• Prefira fontes sem serifa para a maior parte do texto.
• Não crie linhas muito longas ou muito curtas.
• Respeite o espaçamento entre linhas.
• Sempre coloque regras de fallback.
• Permita-se usar fontes diferentes em elementos especiais como logotipos ou cabeçalhos de seção.
• Lembre-se sempre de ter famílias genéricas como fallback.
• Se possível não use fontes com tamanho abaixo de 12px.
• Use o bom senso. É melhor ficar com o lugar comum e funcional do que inventar um novo conceito que fique estranho.

Referências

On Web Typography (em inglês)
10 typography tips to bring you to the next level (em inglês)
----------- keepReading