Últimas novidades em tipografia na web

Por: em 04/06/10 na(s) categoria(s): Internet, Meio Bit, Miscelâneas, Web 2.0

comentários 10

Tipografia: Hoefler & Frere-Jones
Imagem: Hoefler & Frere-Jones

Há algum tempo, publiquei aqui no Meio Bit um texto a respeito de como andava o estado da arte da tipografia nos meios digitais, mais especificamente na web. De lá pra cá, seis meses já se passaram e, acredite se quiser, muita coisa mudou, deixando mais felizes tipófilos que, como eu, querem ver a web repleta de tipos bonitos e elegantes, para além das 4 ou 5 famílias de fontes que designers são obrigados a usar devido a disponibilidade nos computadores ao redor do mundo.

Neste meio tempo, dois acontecimentos chave prometem revolucionar para melhor (ou pior, grandes poderes trazem grandes responsabilidades) este até certo ponto desconhecido mundo das fontes digitais. Um deles foi a aceitação da W3C do padrão WOFF (Web Open Font Format) no mês passado, submetido pelo grupo formado pela Microsoft, Mozilla e Opera, contando ainda com uma ajudinha das typefounderies Letterror e Type Supply.

O documento com as especificações do formato WOFF diz que o formato foi feito para ser um modo leve e de fácil implementação de fontes, a ser usado em conjunto com a declaração @font-face do CSS. Além disso, o WOFF também permite adicionar metadados às fontes, de modo que as typefounderies possam incluir informações sobre seus tipos, sobre o licenciamento dos mesmos, entre outras.

O outro acontecimento marcante foi o lançamento do Google Font API no mês de maio, que é basicamente o Typekit do Google, só que gratuito. Facílimo de usar, o serviço conta 18 opções de famílias tipográficas. Para usar outras fontes que não aquelas basta usar o WebFont Loader, uma biblioteca JavaScript desenvolvida em conjunto pelo Google e pela Typekit. Os arquivos das fontes – que costumam ser pesados – são comprimidos de uma forma que o download não demore muito.

É claro que para fazer uso de todos esses recursos, é preciso considerar aspectos técnicos e subjetivos, como em toda ferramenta. Considerar a banda usada para trafegar esses dados, os kernings e hintings porcos de fontes de qualidade duvidosa que possam dificultar a leitura dos usuários*, o suporte aos diferentes navegadores e, claro, o (ab)uso inconseqüente dos mais variados tipos de fontes.

Neste link é possível ver um teste que eu fiz usando o Google Font. Funciona perfeitamente em navegadores decentes, e também no Internet Explorer 8, único navegador da Microsoft em que testei.

* Verdade seja dita, por mais amaldiçoadas que sejam fontes como Arial, Verdana e Trebuchet por sua suposta má qualidade gráfica, elas funcionam lindamente no meio digital.

Assuntos: #, #, #, #, #

With the feet in the air and the head on the ground.

Mais textos de | Site | Twitter

  • http://Keaton.wordpress.com Keaton

    Parece uma boa noticia, então… finalmente poderei colocar uma fonte diferente sem ter de recorrer ao PNG/GIF? (Da ultima vez fui colocar o texto todo em Segoe Print [ao menos não era Comic Sans MS], mas só quem usava Vista/7 enxergava certo. Como resolver? PNGs/GIFs. :P )

  • Paulo Freitas

    Na verdade quem criou o WOFF foi somente a Mozilla com o apoio das typefounderies. A Opera e a Microsoft só apoiaram a [i]Submission Request[/i] ao W3C. Não que isso mude alguma coisa… :P

    Fiquei de cara no dia que li a divulgação das novidades da Google no Twitter. Bem que estava faltando a mão deles pra facilitar/popularizar o uso da @font-face. :)

    Aliás, os projetos da Google para desenvolvedores web são geniais. Não vivo mais sem a Google Chart API, é simplesmente genial! (a propósito, a quem interessar possa, existe um projeto em PHP implementando classes para gerar gráficos com esta API: http://gchartphp.googlecode.com/)

    []‘s

  • juliocesar757

    Testei o teu exemplo aqui, Fabiane. No Firefox e Chrome além de exibir corretamente a fonte, aplicou um efeito smooth, parecido com sombreamento, muito bonito por sinal.
    Já o IE8 e IE7 conseguiram rederizar a fonte, mas sem o efeito (ficou parecendo as fontes do Windows quando não se usa o ClearType).

  • brenopeck

    Aqui no Safari do iPhone o sombreado e o brilho apareceram. Interessante.

    Verdana, Trebuchet, Arial… não consigo escapar delas (Calibri não conta). Alguma alternativa para usar em papel mesmo?

  • Paulo Freitas

    @brenopeck, Tem as DejaVu, se for de seu interesse: http://dejavu-fonts.org/wiki/index.php?title=Main_Page

    Gosto bastante delas. :)

  • http://fabianelima.com Fabiane Lima

    @juliocesar757

    É a propriedade “text-shadow” do CSS3. Dê uma olhada no código fonte da página para mais detalhes.

  • http://fabianelima.com Fabiane Lima

    @brenopeck,

    No iPhone fica lindo, por sinal: http://twitpic.com/1tmu0p

  • thE Masterkey Blaster

    Ateh isso o NoScript bloqueia… O_O

  • gabriel_

    Fabiane,

    Queria te perguntar umas coisas, se não for muito incômodo. É que como eu tenho um conhecimento ínfimo sobre fontes, fico boiando nesses assuntos, apesar de achá-los bem interessantes. Aí vão dúvidas, atiçadas pela última frase dos eu texto:

    1 – Quais são críticas costumeiras às fontes Arial, Verdana e Trebuchet, que você cita?

    2 – Vejo por aí também que Comic Sans é até piada pronta. Mas, à parte o fato de alguém achá-la uma fonte feia, quais seriam os argumentos técnicos pra definir a Comic Sans como uma fonte ruim?

    3 – Existe alguma fonte reconhecidamente boa no pacote de fontes que a Microsoft trás por padrão?

    4 – Essa fonte “Calibri”, que é o novo padrão do Word, é uma boa fonte? A Times New Roman não era suficientemente boa? Ou eles mudaram só pra sair da mesmice? Existiu algum motivo especial pra Microsoft substituir uma fonte serifada por uma não serifada?

    Se tiver paciência pra matar minha curiosidade, fico bem agradecido. =)

  • http://fabianelima.com Fabiane Lima

    @gabriel_, vamos lá:

    1 – Os dizáiners costumam dizer que elas são feias, têm curvas mal-feitas, ficam ruins em mídia impressa (hello, a Verdana foi feita para tela!), são cópias de fontes famosas, etc etc etc. Eu não vejo grandes problemas. Não gosto da Arial, mas também não gosto da Helvetica, gosto pessoal mesmo, não vejo problemas técnicos – Frutiger FTW! Para mais sobre Arial vs Helvetica: http://www.tiposdobrasil.com/blg/?p=770

    2 – O problema da Comic Sans é que ela é MUITO usada por leigos em contextos onde ela não “combina”. No caminho pro meu trabalho, por exemplo, tem uma placa de engenharia numa construção feita em… Comic Sans. Argumentos técnicos: costumam reclamar das curvas porque Vincent Connare a fez desenhando diretamente na tela, que impressa ela fica porca (ela foi feita pra tela), etc etc etc.

    3 – Segoe, Gill sans, Calibri, Rockwell, Bodoni, Baskerville, Futura…

    4 – Eu acho. Mas a Calibri não veio substituir a Times como padrão, e sim a Arial. A que substituiu a Times foi a Cambria. Mudaram pelo mesmo motivo que mudam-se layouts, logos, pelo mesmo motivo que você corta o cabelo, troca de camisa, etc. :-)