Renderização de Fontes

Opinião.31 Mai 2012

Renderização de Fontes

Atualmente, os web designers têm à sua disposição um grande número de fontes que podem utilizar no desenvolvimento dos seus projetos web mas nem sempre foi assim. Ainda há bem pouco tempo só eram usadas as chamadas fontes de sistema como a Verdana, Arial e Georgia. Apesar da fraca variedade tipográfica e consequente limitação criativa uma coisa é certa, estas fontes "seguras" foram afinadas e certamente redesenhadas várias vezes em cada ponto para serem legíveis e acessíveis, mesmo a baixas resoluções.

Qualquer elemento apresentado num monitor é exibido em píxeis (pontos que compõem a imagem), sendo que a tipografia não é exceção. Apesar de dispormos de mais fontes muitas delas não são projetadas para resoluções de 72-96 dpi, ou seja para resoluções baixas quando comparadas com as de impressão. O que acontece é que as curvas, que determinam o contorno e que definem a forma como os glifos são visualizados no monitor, quando convertidas em píxeis podem ficar distorcidas ou mesmo ilegíveis.

A renderização de fontes é o processo de conversão de formas vetoriais para um conjunto de píxeis. Existem vários fatores e métodos neste processo que afetam de forma distinta a aparência final, no monitor, de um tipo de letra.

Quais os componentes que afetam o modo como as fontes são renderizadas?
A precisão de digitalização da própria fonte e as suas instruções (hinting); o mecanismo de renderização e definições de anti-aliasing presentes no sistema operativo do utilizador; o mecanismo de renderização e definições de anti-aliasing presentes no browser usado pelo utilizador.
Ou seja, apesar de existirem instruções programadas que definem como os contornos de uma fonte são mapeados em píxeis, estas interagem diretamente com as definições do processo de suavização das fontes (anti-aliasing) e com os mecanismos dos diferentes sistemas operativos e browsers, que interpretam essas regras de diferentes maneiras, produzindo diferentes resultados de visualização.

Porque é que uma mesma fonte aparece reproduzida de forma diferente nos vários browsers?
Tal como já foi explicado, a aparência final de uma fonte depende também do sistema operativo e do browser usado. Existem três modos principais de renderizar fontes: black and white rendering (onde as fontes são desenhadas apenas com píxeis brancos e pretos); grayscale rendering (onde os píxeis dos contornos podem assumir tonalidades de cinza além do branco e preto) e o sub-pixel rendering (onde os píxeis com opacidades intermédias são renderizados com cores - RGB - e não apenas em tons de cinza).
Tanto a Microsoft como a Apple têm abordagens diferentes quanto à tecnologia usada na renderização. Por exemplo, enquanto a Apple considera que o algoritmo deve preservar o contorno da fonte, tanto quanto possível, mesmo que isso se traduza num pequeno desfoque da fonte causando algum cansaço na leitura, a Microsoft acredita que o contorno de cada letra deve ser firmemente adaptado à grelha de píxeis para evitar o desfoque e melhorar a legibilidade, mesmo que o conjunto de carateres não fique, no final, fiel ao original.
O motor de renderização presente no Mac OS X e no iOS é o "Core Text", que tenta respeitar o formato de cada letra apresentando as letras com mais espessura ao invés de estarem perfeitamente alinhadas à grelha. Já o motor de renderização mais recente do Windows é o "DirectWrite", digo mais recente porque só está presente no Windows Vista e no 7. Este mecanismo é mais "rígido" que o da Apple, pois elimina as margens desfocadas tornando-as mais finas do que na realidade são quando impressas. Ainda existe um mecanismo mais antigo o "GDI+", disponível em todas as versões do Windows a partir do XP.
Ao contrário do "DirectWrite" e do "Core Text", o "GDI+" com Cleartype (utilização da técnica sub-pixel rendering ) não faz anti-aliasing vertical, apenas horizontal, o resultado é uma renderização com contornos mal acabados no eixo y.

A maior parte dos mecanismos de renderização de texto dos browsers não possuem as mesmas definições usadas pelos sistemas operativos. É por essa razão, que usando o mesmo browser em sistemas operativos diferentes o resultado nem sempre é igual. A verdade é que os browsers podem substituir ou alterar as configurações padrão do sistema operativo no que respeita à suavização das fontes.

O que é que o designer ou o programador podem fazer para assegurar a máxima legibilidade de uma fonte?
Infelizmente, o controle é bastante limitado. Não é possível prever, com toda a certeza, que a aparência final do texto é vista pelos utilizadores tal como foi projetada.
O que o designer e o programador devem tentar perceber é quais as limitações que existem nos browsers mais usados pelos utilizadores, aceitando a realidade – que muitos utilizadores terão o Windows XP com o IE6 sem anti-aliasing, que outros terão um Mac com sub-pixel rendering e outros o Windows Vista com o Cleartype ativo no IE8, tudo com diferentes ambientes e resultados.
Para minimizar os riscos devem ser escolhidas fontes bem desenhadas, preparadas para baixas resoluções com instruções detalhadas (hinting), mas acima de tudo é preciso testar cada fonte. É importante perceber se a fonte é legível nos diferentes modos de renderização melhorando ao máximo a otimização tipográfica nas diferentes plataformas, de forma a desenvolver projetos web inovadores e "confortáveis" de ler em qualquer cenário.

A imagem apresentada, representa os três principais modos de renderização de fontes – da esquerda para a direita - black and white rendering, grayscale rendering e sub-pixel rendering (as letras foram aumentadas para mostrar os detalhes).
Source: Blog da Adobe.com

Escrito ao abrigo do novo Acordo Ortográfico

Catarina Acúrcio