Tipografia nos navegadores e a renderização de tipos na tela.

Type on browsers and the rendering of typefaces on screen

Damien Levaton

Centro Universitário Senac-SP

damilevaton@gmail.com

Érico Lebedenco

Centro Universitário Senac-SP

ericolebedenco@gmail.com

Resumo: Este artigo apresenta um breve levantamento sobre o funcionamento dos principais recursos

técnicos para a correta renderização sub-pixel de tipografias em monitores de tela plana, pelos

softwares e sistemas operacionais. O objetivo inicial foi compreender como a informação Post

Script existente nos arquivos de fontes digitais são traduzidas para o suporte da tela, de modo

que as formas das letras possam oferecer o maior conforto de leitura possível para os usuários,

sem prejudicar a estética e a expressividade dos tipos em uso. Utilizou-se como referência de

análise as preferências de renderização de fontes digitais dos softwares mais utilizados para

navegação de páginas na internet.

Palavras-chave: tipografia, fontes, tela, renderização, pixels.

Abstract:

This paper presents a brief study of the functioning of the main technical resources existing in

softwares and operating systems for the correct sub-pixel rendering of typefaces in flat screen

monitors. The initial goal was to understand how the Post Script data in digital font files is

translated to the screen, in a way that the shapes of the letters can provide the maximum

reading comfort possible for users, without sacrificing the aesthetics and the expressiveness of

the typefaces in use. The rendering preferences of digital fonts used in most of the browsers

softwares were used as references for analysis.

Keywords: typography, fonts, screen, rendering, pixels

 

  

2 

1. INTRODUÇÃO A tradução da informação vetorial existente nas fontes para a exibição em telas por

meio de pixels pode variar muito em qualidade e consistência. Este processo envolve tanto a

programação existente no arquivo da fonte como também a tecnologia de renderização usada.

E sobra muito pouco para que o web designer possa interferir diretamente.

Cada sistema operacional contém um mecanismo para a renderização do texto. Em

alguns casos, podem existir mais opções. Com isso, cada navegador determina qual mecanismo

utilizará para exibir o texto na tela. Esta variedade faz com que diferentes navegadores

carreguem a mesma página de web com qualidade de texto diferentes, mesmo que usados

simultaneamente no mesmo sistema operacional. Além disso os recursos de suavização de

contorno podem variar de uma versão do sistema para outro. Sendo que em alguns casos o

usuário ainda pode alterar as preferências utilizadas.

Figura 1 - O "a" minúsculo da fonte Proxima Nova renderizado por três navegadores diferentes.

Fonte: http://blog.typekit.com

Para evitar que as letras sejam exibidas de forma errada na tela é necessário que a fonte

contenha um conjunto de informações denominado "hinting." Estas informações são instruções

existentes no arquivo da fonte que indicam para o mecanismo de renderização utilizado como

deve organizar os pixels, de forma que se mantenham o mais fiel possível ao formato das letras.

Serão apresentados neste artigo os mecanismos de renderização utilizados nos sistemas

operacionais Windows e OS do Mac, além de indicar como os textos se comportam nos

principais navegadores utilizados nestes sistemas.

“O jeito como uma fonte era exibida na tela costumava ser somente um problema de

representação: você podia se ater ao processo de impressão para fazer com que pareça

melhor. Porém hoje em dia, a tela geralmente é o resultado final. Vários produtos de

design de interação devem atuar em múltiplas plataformas, navegadores, e aparelhos,

cada qual traduz a essência vetorial da tipografia em um render digital de diversas e

monstruosas formas. O aparelho do usuário pode ser um aparelho móvel ou um

  

3 

computador, um Mac ou um Windows; ele pode ser um monitor LCD, um Ipad da Apple,

um Kindle da Amazon…” (Ellen LUPTON, 2014) 1

Com a crescente utilização de ferramentas digitais e com a disseminação de informação

pela internet, é cada vez mais necessário ler textos longos em telas. Por isso o conhecimento a

cerca de como os textos são carregados pelos navegadores podem auxiliar tanto em um projeto

tipográfico mais eficiente para estes suportes, como para escolhas mais apropriadas de fontes

para esse uso.

2. MECANISMOS DE RENDERIZAÇÃO

Quando se fala de tipografia em tela não é possível deixar de abordar os sistemas

operacionais usados. O que poucas pessoas sabem é que os sistemas operacionais como

Windows e Mac OS X utilizam mecanismos complementares para a renderização de texto nas

telas. Os navegadores de internet utilizam estes mecanismos, nativos ou não do sistema, para

apresentar os textos de forma confortável para o usuário.

Estes mecanismos são API's, Interfaces de Programação de Aplicativos (em inglês

Application Programming Interface). Neste caso, são os componentes responsáveis por traduzir

as informações vetoriais das fontes para os pixels da tela. Core Text, Direct Write e GDI são os

utilizados pelos principais softwares.

2.1 Core Text

Core Text é um mecanismo de renderização presente no Mac OS X e no iOS. Faz parte de uma suíte de API's chamada Core Foundation que é responsável em parte pela interação e pelas interfaces usadas pela Apple. Existe uma tendência no Core Text de se respeitar a forma original das letras nesta transposição de mídias/tecnologias. Com isto elas podem se apresentar com um pouco mais de peso. E os espaços internos e entre as letras levemente embaçados em situação de grande volume de texto. Em contrapartida, seus traços se mostram mais naturais em formatos grandes (em títulos por exemplo). Esta eficiência em tamanhos grandes se deve em parte pela suavização de contorno existente no eixo vertical. O Core Text se utiliza do recurso sub-pixel antialiasing, que utiliza frações de cada pixel nos monitores LCD (canais vermelho, verde e azul). A certa distância da tela nossos olhos não percebem as cores particulares e sim a forma definida da letra.

1 Do inglês: “How a font looked on screen used to be just an issue of representation: you could rely on the printing process to make it look better. But nowadays the screen is often the final output. Many products of interaction design must perform across multiple platforms, browsers, and devices, each of which translates the vector soul of a typeface into digital rasters of diverse and monstrous shapes. The user’s device could be mobile or desktop, Mac or Windows; it could be an LCD monitor, an Apple Ipad, an Amazon Kindle…” 

  

4 

Figura 2 - Detalhes de Core Text em uso. Fonte: http://blog.typekit.com

2.2 Direct Write

O Direct Write, usado pela Microsoft, está presente no Windows Vista e 7. É um pouco mais suave que o Core Text e apresenta sub-pixels com cores menos intensas. Uma das características marcantes no uso do Direct Write é a tendência a legibilidade em tela, mesmo que seja necessário prejudicar um pouco o estilo do desenho das letras. Sua suavização com sub-pixels também é usado para melhorar o espaçamento horizontal entre as letras.

Figura 3 - Detalhes de Direct Write em uso. Fonte: http://blog.typekit.com

2.3 GDI

Graphics Device Interface (GDI) é um mecanismo de renderização de texto presente nas versões 7, Vista e XP do Windows. É responsável pelo gerenciamento do sistema unicode, recursos OpenType e integração com outros API's. Como o Direct Write, ele também utiliza um algoritmo para suavização sub-pixel chamado ClearType. O GDI também pode usar um padrão Standard ou não utilizar suavização alguma. O ClearType (sub-pixel antialiasing) é padrão para o Windows 7 e Vista; o Standard (antialiasing em tons de cinza) é padrão no Windows XP, e sem a opção de suavização (antialiasing desativado) os pixels do texto se apresentam apenas em preto e branco.

  

5 

Ao contrário do Core Text e do Direct Write, o GDI não suaviza os contornos no eixo vertical mesmo com ClearType ativado. O que faz com que algumas curvas fiquem levemente serrilhadas.

Figura 4 - Renderização GDI com ClearType. Fonte: http://blog.typekit.com

Quando a tecnologia sub-pixel ainda não estava plenamente desenvolvida, a melhor

forma de suavizar a renderização do texto nas telas era usar o GDI com o padrão Standard, com pixels em tons de cinza. A maioria dos usuários de Windows XP enxerga os textos desta forma. Além disto, equipamentos que ainda possuem monitores de telas CRT não possuem o controle individualizado dos pixels, para um ajuste sub-pixel, que está presente apenas nos monitores LCDs. Então a única forma de suavizar o contorno dos traços nestes casos é com o padrão Standard. A desvantagem deste padrão em relação ao uso com ClearType é que os ajustes de transposição dos vetores para pixels são feitos com pixels inteiros. Logo as letras podem ficar mais leves ou mais pesadas do que deveriam, alterando a proporção interna dos seus traços.

Figura 5 - Renderização GDI no padrão de suavização Standard. Fonte: http://blog.typekit.com

O uso de GDI sem suavização é raro atualmente. É a exibição das letras de forma

binária. Ou o pixel é preenchido ou não é. Quando ocorre, muitas vezes é por uma configuração

  

6 

pessoal do usuário. Em alguns casos a fonte pode apresentar uma instrução que desativa a suavização quando usada em determinados tamanhos.

Figura 6 - Renderização GDI sem suavização. Fonte: http://blog.typekit.com

3. NAVEGADORES 3.1 História

A “World Wide Web”, ou simplesmente a internet, surgiu no início dos anos 90. Uma rede mundial de informações ainda muito codificada, usada exclusivamente por empresas. Para se acessar estas informações codificadas equipes de programadores criaram softwares conhecidos como “navegadores”. O Spyglass Mosaic foi o primeiro navegador a surgir no mercado.

“Nós decidimos nos aproximar do mercado com um modelo de negócio OEM. Em vez de vendermos um navegador para os usuários finais nós desenvolvemos uma tecnologia que vendemos para as empresas e eles em seguida forneciam aos seus usuários finais. Nos considerávamos os traficantes de armas na guerra dos navegadores. Mais de 120 empresas licenciaram o Spyglass Mosaic para que pudessem transformá-lo em um produto próprio. Nossa tecnologia aparecia em livros, sistemas operacionais, distribuidores eletrônicos, conversores STB, sistemas de ajuda e quiosques. Era um modelo de negócio muito rentável. A empresa cresceu rapidamente e nosso navegador foi um dos primeiros IPOs da internet. (...) Por volta de 1994, parecía que estávamos a frente da Netscape.” (Eric W. Sink., 2003) 2

2 Original em Inglês: “We decided to approach this market with an OEM business model. Instead of selling a browser to end users we developed core technology and sold it to corporations who in turn provided it to their end users. We considered ourselves to be the arms dealer for the browser wars. Over 120 companies licensed Spyglass Mosaic so they could bundle it into their product. Our stuff ended up in books, operating systems, ATM machines, set-top boxes, help systems, and kiosks. It was an extremely profitable business. The company grew fast and ours was one of the first Internet IPOs. (...) For much of 1994, it seemed like we were ahead of Netscape.”

  

7 

A partir da programação do Mosaic surgiram dois novos navegadores, dessa vez, de fácil acesso para o usuário final. Primeiro o Netscape Navigator e posteriormente o Microsoft Internet Explorer. Em questão de meses o Internet Explorer dominou o mercado de acesso a web do mundo (como pode ser visto na tabela 1 e no gráfico 1). Muito se devia ao fato de seus computadores serem comercializados já com o software de navegação instalado.

Mês  Netscape Navigator  Microsoft Internet Explorer 

Maio 96  83.2%  7.0% 

Junho 96  78.2%  8.3% 

Julho 96  72.6%  15.8% 

Ago 96  62.7%  29.1% Tabela 1 - Comparativo de Market Share entre Internet Explorer e Netscape Navigator. Fonte: http://http://www.netvalley.com/intvalweb.htm

Gráfico 1: Guerra dos Navegadores. Fonte: http://http://www.netvalley.com/intvalweb.htm

Na Guerra dos Navegadores, o Internet Explorer é considerado o grande campeão.

Continua sendo até os dias atuais o software mais utilizado para acesso a internet. Inclusive é a ele que devemos as primeiras iniciativas de renderização sub-pixel em navegadores web com o recurso ClearType.

Em 1998, a empresa responsável pelo Netscape Navigator anunciou que iria disponibilizar o código-fonte de seu navegador para o grande público. Esse projeto ficou conhecido como o Projeto Mozilla. Desta programação base surgiram vários navegadores novos. Um deles foi o próprio Mozilla, que posteriormente deu origem ao Mozilla Firefox.

  

8 

Na briga pela web, outras empresas de eletrônicos acabaram criando seus próprios navegadores como foi o caso do Safari, em 2003 pela Apple. Em seguida, foi a vez de uma empresa de telefonia norueguesa propôr em 2006 o seu projeto, o navegador Opera, cuja proposta principal era se adequar aos aparelhos móveis. E finalmente, em 2008, foi a vez do Google lançar seu navegador, o Google Chrome.

Estes nomes compõe a lista dos navegadores mais conhecidos e usados pelos usuários no mundo todo.

Gráfico 2: Market Share dos principais Navegadores. Fonte: https://netmarketshare.com A seguir, será feita uma curta análise de como a renderização de texto se comporta nestes navegadores. 3.2 Microsoft Internet Explorer

Em 1995, a Microsoft lançou a primeira versão do software acessível ao público junto

com o sistema operacional Windows 95. Em poucos anos, a superioridade incontestável do

Netscape foi desbancada pelo Internet Explorer. Em 2001, com o lançamento do sistema

operacional Windows XP, o Internet Explorer chegou a sua 6 edição. Nesta versão, o navegador

perdeu uma pequena parte de seus usuários devido à falta de alguns recursos presentes na

concorrência. Por exemplo a navegação com múltiplas abas que o Opera oferecia. Atualmente

o programa está na versão 10, lançada em outubro de 2012.

Não se abordava a renderização de fontes nos navegadores antes do lançamento do

Internet Explorer 6. Anté então esta condição era assumida exclusivamente pela programação

atrelada à tipografia, PostScript ou TrueType, e seus respectivos sistemas operacionais.

“Mesmo quando fontes recebem um hinting otimizado para telas, os resultados ainda

não são garantidos, pois cada tecnologia propõe uma solução diferente. No sistema

PostScript, muito da redefinição de tamanho da fonte é levado em consideração não

pelas fontes em si, mas pelo programa de renderização dos sistemas operacionais, ou

seja, fontes no formato PostScript vão parecer sempre boas com um hinting

relativamente simples ou sem hinting nenhum. No sistema TrueType, em contrapartida,

o programa de renderização é controlado pelas sofisticadas instruções de hinting

  

9 

contidas dentro do programa de fonte; sem essa informação as fontes TrueType não são

visualizadas corretamente na tela.” (Peter BIL’AK, 2010) 3

A Microsoft que desde o início dos anos 90 já vinha se interessando pelo estudo da

visualização das tipografias em telas, lançou em 1998 seu recurso de renderização sub-pixel,

ClearType. A sua função principal consiste na otimização das tipografias para telas em

monitores LCDs (Liquid Crystal Displays). E o Internet Explorer 6 foi o primeiro navegador de

internet a usar esta nova tecnologia. Na prática, o navegador era programado com uma opção

default para sempre utilizar o ClearType para exibir corretamente as fontes. Essa opção poderia

ser desabilitada a qualquer momento possibilitando que o usuário voltasse às opções standard

ou sem suavização.

Isso acabou nas versões seguintes do navegadores da empresa. O Internet Explorer 7

passou a usar exclusivamente o ClearType com a opção antialiasing habilitada e a versão 8 não

somente usava esta tecnologia de renderização como também obrigava qualquer outro

navegador instalado na mesma máquina a usar o ClearType. Mesmo que originalmente este

outro navegador fosse programado para usar outro mecanismo.

A partir do Internet Explorer 9, a Microsoft atualizou seu mecanismo de renderização e

passou a usar o DirectWrite ao em vez de usar o ClearType. O DirectWrite é considerado uma

uma evolução e foi criado para preencher algumas lacunas do ClearType. São 3 as principais

melhorias: melhor legibilidade, uso de recursos OpenType como swashes e ornamentos e

melhor transcrição para outros idiomas.

Em termos de legibilidade, as mudanças foram levemente melhoradas principalmente

quando se apresentam mudanças de tamanhos: grandes para tamanhos de título e sutís em

corpo de texto.

Figura 9: Renderizado pelo ClearType.

Fonte: https://msdn.microsoft.com/pt-br/library/windows/desktop/dd368038(v=vs.85).aspx

3 Do Inglês: Even when fonts are hinted optimum onscreen results are still not guaranteed, as different font technologies approach hinting differently. In the PostScript system most of the font scaling is handled not by the fonts, but by the rasteriser software, so fonts in PostScript format look often good with relatively simple hinting or no hinting at all. In the TrueType system, however, the rasteriser is controlled by sophisticated hinting instructions contained within the font software; without this information TrueType fonts do not display well onscreen. 

  

10 

Figura 10: Renderizado com o DirectWrite.

Fonte: https://msdn.microsoft.com/pt-br/library/windows/desktop/dd368038(v=vs.85).aspx

Para corpos pequenos, houve uma evolução significativa na colocação dos pixels no grid

RGB da tela, proporcionando à palavra um melhor trabalho do espaçamento entre-letras, assim

como uma melhor renderização das letras em si como é possível identificar na Figura 10.

Figura 11: Comparação entre renderização de textos grandes em GDI e DirectWrite.

Fonte: https://msdn.microsoft.com/pt-br/library/windows/desktop/dd368038(v=vs.85).aspx

Já no que diz respeito aos textos de grande tamanho, o DirectWrite automaticamente

aplica anti-alias nas hastes horizontais e verticais.

3.3 Safari

O Safari foi lançado em janeiro de 2003. O navegador da Apple veio para substituir o Internet Explorer versão Mac que era usado até então e foi usado pela primeira vez com o sistema operacional Panther. Conforme os anos se passaram, o navegador recebeu várias atualizações e hoje encontra-se em sua sétima versão.

  

11 

Diferentemente do sistema operacional Windows, cujos navegadores são responsáveis pelas suas renderizações, nos aparelhos da Apple (computadores e mobiles) o sistema operacional do aparelho prevalece sobre a escolha do navegador. No caso, o mecanismo Core Text é o principal responsável pela renderização de textos no Safari e por todos os navegadores com versões existentes para o Mac (Chrome, FireFox, Opera, Etc…)

“Vamos explicar isso do jeito fácil. No Mac, todos os navegadores usam o Core Text - o mecanismo default de renderização de texto - e os parâmetros de suavização de fonte do sistema operacional. Não existe nenhuma preferência dos navegadores que possa afetar a maneira que os tipos são suavizados. Ou seja, em um Mac, os tipos parecem iguais independente do navegador escolhido.” (Tim Brown, 2010) 4

3.4 Outros navegadores

Finalmente existem os navegadores que não estão associado a nenhum sistema

operacional, seja da Microsoft ou da Apple. Deste conjunto leva-se em consideração somente

os dois principais: Google Chrome e FireFox.

Não há nenhuma novidade tecnologica neles. Como foi mencionado acima, quando

usados em sistemas operacionais da Apple, o mecanismo Core Text prevalece sobre as

configurações de renderização de fontes nos navegadores. Em contrapartida, quando são

usados no sistema operacional Windows, passam a usar seus próprios mecanismos. De

qualquer forma, a maioria dos navegadores usam o GDI com recurso ClearType para

renderizarem seus textos. O FireFox se tornou a única excessão, passando a usar o Direct Write

a partir da sua quarta versão.

4. CONCLUSÃO

Analisando os principais navegadores utilizados, percebe-se que devido ao uso de

determinados mecanismos em mais de um software e suas versões, é possivel limitar a

combinação de navegadores que é necessário levar em conta.

Em um Mac é possível usar/testar tipografias para páginas de internet em qualquer

navegador de sua escolha. O texto será renderizado sempre da mesma forma independente do

navegador que se use porque o Core Text se sobrepõe a qualquer outra configuração.

Já na plataforma Windows deve-se levar em conta algumas versões do Internet

Explorer. A versão 6, juntamente com outros navegadores (Chrome, Safari, Opera e Firefox)

utilizam a ferramenta default do sistema usado. Caso seja em um Windows 7 ou Vista, a API

usará o ClearType sub-pixel antialiasing. No caso do Windows XP, a configuração Standard em

tons de cinza. Já as versões 7 e 8 do Internet Explorer possuem uma configuração que força o

uso de ClearType, independente da versão do sistema operacional. O Internet Explorer 9 e o

4 Do Inglês: “We’ll kick this off the easy way. On a Mac, all web browsers use Core Text – the system default text rendering engine – and OS font smoothing settings. There are no browser preferences that affect the way type is antialiased. So, on a Mac, type looks the same no matter which browser you use.”

  

12 

Firefox 4 passaram a utilizar o Direct Write, que se sobrepõe a confiuração do sistema

operacional.

Percebemos assim que a plataforma Windows requer maior atenção na escolha de

fontes para uso em suportes digitais e também no projeto de tipos para tela. Por isso a

atividade de hinting para fontes que visam esta plataforma é mais relevante. Por vezes é

necessário um conjunto muito grande de instruções para que uma fonte renderize de forma

correta, no tamanho escolhido, em determinado navegador.

Com o crescente uso do Direct Write, que depende menos das instruções TrueType nas

fontes, e o aumento da resolução nas novas telas, a necessidade de hinting está diminuindo.

Com cada vez mais frequência, o uso de auto-hinting com pequenos ajustes tem se mostrado

eficiente e mais em conta do que o hinting manual completo.

Sendo assim, podemos concluir que a correta renderização de uma fonte depende de

um conjunto de fatores: sistema operacional, navegadores, configuração do mecanismo de

suavização, formas das letras e instruções de hinting presentes nos arquivos das fontes. E o

conhecimento destes fatores auxiliam no desenvolvimento de um projeto de web e na

experiência de leitura em tela pelo usuário.

  

13 

REFERÊNCIAS

HARALAMBOUS, Yannis. Fonts & Encodings. Trad. por F. Scott Horne. Sebastopol: O’Reilly,

2007.

LUPTON, Ellen. Type on screen: A guide for designers, developers, writers and students. New

York: Princeton Architectural Press, 2014.

SPIEKERMANN, Erik. A forma invisível da tipografia. São Paulo: Blucher, 2011.

BIL’AK, Peter. Font Hinting. Disponível na internet por http em:

<https://www.typotheque.com/articles/hinting>. Acesso em 13 jun. 2015

BROWN, Tim. Type rendering on the web. Disponível na internet em:

<http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/>. Acesso em 23 jun. 2015.

FERREIRA, Gustavo. OpenType features in web browsers. Disponível na internet por http em:

<https://www.typotheque.com/articles/opentype_features_in_web_browsers>. Acesso em 11

jun. 2015

R. GROMOV, Gregory. History of Internet and World Wide Web: The Roads and Crossroads of

Internet History. Disponível na internet por http em:

<http://http://www.netvalley.com/intvalweb.html>. Acesso em 13 jun. 2015

MICROSOFT. ClearType. Disponível na internet por http em:

<http://www.microsoft.com/typography/WhatIsClearType.mspx>. Acesso em 13 jun. 2015

RUTTER, R. Font-weight is still broken in all but one browser. Disponível na internet por http

em: <http://clagnut.com/blog/2228/>. Acesso em 13 jun. 2015

VALIN, Allan. A história e a evolução dos navegadores. Disponível na internet por http em:

<http://www.tecmundo.com.br/web/2063-a-historia-e-a-evolucao-dos-navegadores.htm>.

Acesso em 15 jun. 2015

VAN WAGENER, Anne. The Next Big Thing in Online Type. Disponível na internet por http em:

<http://www.poynter.org/how-tos/visuals/32588/the-next-big-thing-in-online-type/>. Acesso

em 13 jun. 2015