Nesta primeira parte da série de artigos “Tipografia na web”, Márcio explica a parte técnica do uso da tipografia na web e quais as opções mais comuns para fugir das fontes tradicionais para web.

Artigo de um colaborador - acesse o site do autor
Saiba como colaborar

Tipografia na internet sempre foi uma coisa meio problemática. Apesar dos diversos métodos existentes hoje em dia, até bem pouco tempo atrás as opções eram realmente limitadas. Navegadores que não renderizavam direito, regras CSS pouco conhecidas e usadas, layouts feitos em tabelas. Tudo isso atrapalhava a informação que dificilmente era apresentada de uma forma aceitável.

E, na minha opinião, a tipografia é o maior alicerce do webdesign. Quando apresentamos conteúdo numa página, na grande maioria dos casos estamos trabalhando com alguma forma de texto. Lidamos sempre com palavras. E por isso eu considero uma das habilidades mais louváveis de um bom webdesigner, fazer bom uso da tipografia.

Este artigo é sobre algumas técnicas para facilitar o seu trabalho na hora de criar/desenvolver uma boa tipografia na web. A começar pelas fontes.

Nota: Curiosamente, enquanto eu escrevia esse artigo, eu me deparei com mais dois artigos na internet que tratavam de temas muito parecidos. Um em português e outro em inglês. Apenas gostaria de citá-los aqui porque, de alguma forma, eles influenciaram o que eu estava escrevendo e também porque são duas ótimas fontes sobre algumas técnicas aqui descritas.

Web-safe fonts

Na época em que o CSS2.1 foi desenvolvido, não havia muita necessidade de uma especificação para usar fontes no CSS que não as do sistema operacional (na verdade até havia o rascunho do @font-face, mas acabou não indo pra frente). E com isso em mente foi convencionado o que se chamou de web-safe fonts. Um grupo de fontes que… mais ou menos… estavam nos sistemas operacionais mais comuns. Mais ou menos porque as fontes eram parecidas, mas não as mesmas.

Felizmente a propriedade font-family (ou apenas font) aceita substitutos caso a fonte específica não seja encontrada. Por isso quando declaramos uma fonte da maneira convencional, precisamos da versão windows, Mac e uma genérica caso as duas primeiras não existam.

font-family: Helvetica, Arial, "sans-serif";

Seria um trabalho cansativo ficar descobrindo qual fonte combina com qual em cada sistema operacional. Alguns softwares (como o Adobe Dreamweaver) até montaram stacks de fontes para ajudar. Mas, na minha opinião, este é o melhor stack de websafe fonts já feito. Reparem como até separação por título e parágrafo foi pensada. Esse autor realmente merece ir para o céu.

Tipografia

Image Replacement

Isso é usado geralmente em sites estáticos quando queremos que um título (por exemplo) dê lugar a uma imagem. Em resumo basta definir o elemento como block, aplicar a imagem de background e empurrar o texto 9999px para a esquerda com text-indent. Uma dica: se o elemento for um link, overflow:hidden; previne que uma caixa pontilhada que some no lado esquerdo da tela apareça quando clicado.


#logo{
display:block;
background: url(logo.png) transparent;
width:100px;
height:100px;
text-indent:-9999px;
overflow:hidden;
}

Substituição por Javascript/Flash/PHP

Essas são técnicas (bem elaboradas eu diria) para se resolver o problema das web-safe fonts. Mas nenhuma é perfeita.

As mais comuns são Sifr, Cufón e FLIR.

SIFR basicamente utiliza Flash para renderizar as fontes e javascript para colocá-las no lugar correto. Infelizmente requer que o usuário tenha javascript e flash habilitado. Cufón utiliza o elemento Canvas do HTML5 e VML no Internet Explorer para renderizar o texto com a fonte selecionada, mas o texto não pode ser selecionado. FLIR envia uma request ao servidor (PHP apenas) para criar uma imagem com o texto de marcação usando a fonte que você quer. Mas denovo… nada de texto selecionável.

Para saber mais a respeito dessas técnicas:

@font-face

Ah… A grande esperança da tipografia de qualidade na internet.

Essa é a minha propriedade favorita do CSS3. Primeiro porque já podemos usá-la e ela funciona corretamente em todos IEs (com a extensão EOT infelizmente, mas já é alguma coisa). Segundo porque finalmente podemos usar a fonte que quisermos na web. Claro, com as devidas restrições de direitos autorais. Mas o interessante é que já existem sites especializados em distribuir fontes grátis usadas no @font-face.

Como usar

Para usar o @font-face, primeiro precisamos definir a fonte num seletor separado e depois declarar normalmente no elemento desejado. É importante utilizar o formato TTF(padrão) e EOT(formato fechado utilizado pela microsoft). Assim, garantiremos que ela funcionará em todos os navegadores modernos.

Por exemplo:


@font-face{
font-family: Alexandria;
src: url(Alexandria.eot);
src: local(Alexandria), url(Alexandria.ttf) format(“opentype”);
}

p{
font-family: Alexandria, serif;
}

Além disso, algumas empresas como o Typekit oferecem fontes de qualidade por uma mensalidade (ou de graça no plano básico) para usar em seus projetos.

Problemas

O único problema ainda na versão atual do @font-face é que em alguns navegadores ele é dependente do anti-aliasing do sistema. Por exemplo, no firefox 3.5 num windows XP com a opção cleartype desligada, a maioria das fontes fica horrível. Por sorte, do Windows Vista em diante, a Microsoft optou por deixar o cleartype ligado por padrão. Mas o problema é que se for usada num site onde grande parte dos usuários utiliza windows xp, teremos problemas como esse aqui.

Eu não quis aqui apenas simplificar as possibilidades de tipografia na web. Mesmo porque esse é um assunto muito complexo para apenas um post. Apenas apresentei as melhores formas (na minha opinião) de mostrar as fontes num site.

No próximo artigo vou falar mais especificamente de CSS e do que é possível fazer com as propriedades para melhorar a aparência do seu texto.

Gostou? Compartilhe!

Comentários fechados