Pressione enter para ver os resultados ou esc para cancelar.

Tipografia para a Web

Encontram-se duas diferenças básicas entre projetos gráficos impressos e projetos gráficos para a web no que diz respeito à definição de diretrizes de tipografia.

A primeira delas é a resolução: impressoras têm capacidade de imprimir com resolução muito maior que a maioria dos monitores, seja de computador ou de outros dispositivos de acesso à internet. Essa disparidade causa uma diferença de legibilidade (relação de contraste entre tipo e fundo) e, consequentemente, uma diferença na escolha de fontes (fontes serifadas, por exemplo, que são indicadas para leitura de textos, precisam de uma boa resolução para serem reproduzidas sem comprometer sua forma).

A segunda diferença trata da fluidez e da capacidade de se adaptar que devem ter os layouts responsivos para a web, características inexistentes em suportes impressos. Isso faz com que, em ambientes digitais, seja muito difícil manter uma média de caracteres por linha ou hifenizar palavras no final da linha, por exemplo. Muitas dificuldades decorrem destas diferenças na hora de se projetar ou aplicar um projeto para a web. Confira na lista a seguir as mais comuns com suas devidas explicações:

Média de caracteres por linha

Em um projeto gráfico com grande volume de texto, é muito importante que a leitura seja confortável.

Dois dos pontos mais relevantes nesse sentido são a média de caracteres por linha e, por consequência, a largura da coluna de texto. Para suportes impressos existem muitas fontes de diretrizes para se ter um bom resultado, mas para a web a situação é diferente.

Além da falta de estudos de leiturabilidade direcionados a ambientes digitais, há o paradigma do Web Design Responsivo. Os layouts para a web estão cada vez mais fluidos e adaptativos, tornando muito difícil a possibilidade de prever, durante o projeto, resultados satisfatórios ou ideias quanto à média de caracteres por linha.

alt

Fonte: BRINGHURST, Robert. Elementos do Estilo Tipográfico. Editora Cosac Naify, 2005.

Hifenização

Diretamente relacionada com a média de caracteres por linha, esta propriedade não é suportada nativamente pelo Google Chrome, Opera e quase nenhum dos navegadores mobile (apenas iOS Safari suporta). Além disso, as soluções via javascript são muito complexas e pouco performáticas.

Sem hifenização fica praticamente impossível controlar a média de caracteres por linha e o ritmo de leitura, principalmente em layouts fluidos. Além disso, fica inviável o uso de texto justificado, pois perde-se, também, o controle sobre o tracking.

Fonte da imagem

Legibilidade e Escolha de Fontes

Como sabemos, as impressoras normalmente imprimem com resolução muito maior que a reproduzida em monitores. O advento da retina display começou a mudar essa realidade, mas a maioria dos monitores e telas hoje em dia ainda tem resolução abaixo de Full HD (que ainda é visivelmente mais baixa que a maioria de nossos impressos).

Isso causa impacto direto na escolha da família tipográfica para o corpo de texto. Fontes serifadas, recomendadas para dar sensação de continuidade à leitura, possuem um nível de detalhe em sua forma que os monitores e telas não são capazes de reproduzir com fidelidade. Sendo assim, a legibilidade em ambientes digitais é inferior à legibilidade em suportes impressos.

Fonte da imagem

Conclusões

Por fim, entendido que, mesmo sendo uma questão de tempo aproximar a qualidade para reproduzir tipografia na web ao nível de suportes impressos, os projetos ainda vão precisar considerar certos pontos de diferença. Tanto designer quanto desenvolvedor devem estar cientes das limitações que ainda existem e propor layouts e soluções que as contemplem.

Mais importante ainda seria criar diretrizes para validar requisitos de legibilidade e leiturabilidade durante a fase projetual para ambientes web, tal qual é possível para suportes impressos. Com tantas diferenças, não convém usar os mesmos recursos.