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

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.

​ 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…”

1

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

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.”

2

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 ​ 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.

3

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

​ 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.”

4

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