Webpoint

Já tem um tempinho que não escrevo nada no Blog. Estava realmente muito ocupado tanto como tempo tanto com a cabeça por causa da recente mudança para o Rio de Janeiro, cidade realmente maravilhosa, mas meu amor por Belo Horizonte ainda permanece. O motivo da mudança é que agora estou trabalhando no desenvolvimento de interfaces na Globo.com, mas os detalhes ficam para outra oportunidade! Estava ansioso para escrever sobre o assunto que irei tratar aqui.

O assunto posso dizer que é polêmico e apesar de serem simples algumas soluções, existe um leque de opções. Qual a melhor forma de utilizar fontes que não sejam padrão do sistema operacional e dos browsers sem prejudicar a marcação, SEO, acessibilidade, mobilidade e outros fatores?

Não existe um padrão para solucionar este problema, não existe uma forma perfeitamente adequada, que não quebre nenhum paradigma, no entanto uns ferem os princípios mais que outros. Todos os métodos existentes hoje são apenas uma aproximação da situação ideal. O fato é que cada um tem suas vantagens e desvantagem e a finalidade deste post é expor estes pontos.

Para quem não entendeu até agora o que estou dizendo, vamos a um exemplo prático. O designer faz um layout maravilhoso sem te consultar. O cliente aprova e você desenvolve a interface utilizando HTML, CSS e interações Javascript. O cliente pergunta: Por que as fontes estão diferentes do layout? Você preocupou-se com a manutenção, a marcação e utilizou puramente as três tecnologias em perfeita harmonia para não ter que ser fiel ao layout e simplesmente recortar cada imagem que represente um título.

Por que isto acontece?

Os browsers possuem uma leitura de fontes totalmente limitadas. Além disto, ele depende do sistema operacional e da plataforma onde o site é aberto. A escolha das fontes podem ser feitas através do CSS. Mesmo assim, é impossível certificar que o usuário final verá da forma como você. Do ponto de vista de padrões de acessibilidade, qualquer título ou representação textual devem estar com a semântica correta. Cada elemento tem seu significado. O problema é que muitos desenvolvedores pensam somente no resultado final, sem levar em conta a qualidade. Portanto, se você deseja ou foi solicitado a usar fontes que não sejam padrão do sistema, é necessário fazer certas opções e sacrifícios. Parece uma decisão fácil, mas não é.

Na teoria, não seria necessário recorrer a nenhuma delas e utilizar fontes de sistema, na maioria das vezes ele supre as suas necessidades como desenvolvedor e do cliente também. No entanto, muitas vezes o apelo visual é necessário, mas vale lembrar que utilizar fontes não convencionais deve ser somente utilizado para títulos, pois para textos mais longos necessitam de fontes simples e legíveis, pois é para isto que o seu texto está na web: disponibilizar conteúdo.

As várias soluções irei listar aqui:

Opção 1 – Recortar títulos como imagem

Esta opção está longe de ser a melhor. Você recorta o texto desejado no layout e insere diretamente na página na tag img.

Ela não possui nenhuma vantagem, primeiro por que você estará inserindo na marcação uma imagem para representar um texto, quebrando a semântica. Segundo por que é difícil dar manutenção e implementar isto em um sistema em que seja necessário modificar estes texto. Neste último caso será necessário gerar outra imagem manualmente para modificar o site em questão. Além disto o texto não é selecionável. É irritante a experiência do usuário de não conseguir fazer uma tarefa básica: copiar um texto em um browser.

sIFR

Este método, que significa Scalable Inman Flash Replacement, une Javascript, Flash e CSS para que a fonte seja renderizada corretamente em qualquer browser. Basicamente você escreve normalmente o html e através de javascript o texto é substituído por um SWF que renderiza a fonte. Isto acontece por que o flash não possui limitações para renderizar fonte, basta ter o arquivo enviado para o servidor e referenciado corretamente.

A vantagem é que o código é totalmente não-obstrusivo, mas cada título usado possui um swf correspondente e a perfomance pode ser muito “cara” para simplesmente exibir um título com fonte que não seja de sistema. Esta é uma grande desvantagem. Para equilibrar, temos a vantagem dos textos serem selecionáveis, graças a esta opção que o flash possui para que os textos possam ser copiados e colados.

Opção 3 – Importação através de CSS

A importação de fonte através de CSS, muito bem explicada neste artigo do Maujor, é uma técnica bastante atraente mas que ainda irá depender do comportamento do browser. Você pode ter qualquer tipo de fonte que não seja padrão, mas a sua renderização pode variar de browser para browser.

Ela consiste em usar uma ferramenta para gerar arquivos de fontes que você deseja utilizar que possa ser referenciada e importada através do CSS, utilizando uma propriedade @font-face. Nem todas as fontes são “importáveis”.

Opção 4 –  Utilizando a propriedade text-ident do css com um valor extremamente alto

Essa opção é muito utilizada e consiste em utilizar o css para identar o texto com um valor muito alto (negativo) de forma que não seja possível visualizá-lo e assim utilizar background-image para posicionar a imagem que representa o texto.

Temos aqui um exemplo da marcação

[sourcecode language=”html”]

Titulo a ser substituido

lorem ipsum

[/sourcecode]

Então no CSS correspondente:

[sourcecode language=”css”]

h2 {

background-image: url(‘titulo.gif’);

text-ident: -999;

overflow: hidden;

}

[/sourcecode]

A regra overflow hidden é utilizada para que o texto “deslocado” não apareca no site, neste caso iria gerar um scroll horizontal e resultados imprevisíveis, portanto ela é estritamente necessária para que este método funcione. Ele é muito útil para casos em que há a necessidade de garantir que nenhum resultado imprevisível “quebre” um box.

Muitas vezes também é usado uma variação deste método que ao invés de deslocar o texto, o atributo font-size é passado para o tamanho menor possível, como 0.00001 para tornar-se imperceptível.

Bem, este método tem a vantagem de deixar a marcação limpa e não prejudica a perfomance. Poderia citar a desvantagem da dificuldade da manutenção, mas nada que um script de servidor como a biblioteca GD do PHP para tornar a geração de imagens dinâmica e criar estas regras css para automatizar este trabalho. A desvantagem é que o texto não pode ser selecionado, mas a marcação permanece correta.

Sem querer insultar quem a usa, e instigando uma discussão, este método soa como “gambiarra”.

Opção 5 –  Utilizando a tag span

Essa opção combina um pouco da anterior com uma marcação a mais para não utilizar o text-ident. Neste “approach“é utilizado uma tag span dentro do título para esconder o texto e assim posicionar a imagem de fundo através do CSS.

Temos aqui um exemplo da marcação:

[sourcecode language=”html”]

Titulo a ser substituido

lorem ipsum

[/sourcecode]

Então no CSS correspondente:

[sourcecode language=”css”]

h2 {

background-image: url(‘titulo.gif’);

display: block;
}

h2 span {

display: none;

}

[/sourcecode]

Em termos de marcação HTML, utilizar uma tag span dentro de um título não “fere” os padrões, pois é um elemento inline dentro de elmento bloco. O display block é necessário se a tag for um link, pois a imagem é um elemento inline, neste caso do h2 é redundante por que ele já se comporta como elemento bloco. Não se deve deixar de lembrar também que é necessário dar dimensões ao elemento que será do tamanho da imagem. Isto foi omitido do exemplo por que depende do tamanho.

Exemplo da substituição por imagem, utilizado em um link

Conclusão

O objetivo deste post foi mostrar as diferentes possibilidades quando se deseja utilizar uma fonte que não seja de sistema. Minha intenção aqui não foi dizer qual é a melhor, mas sim expor todas elas. Normalmente vejo artigos que dizem sobre uma ou outra, mas que não abordam todas as possibilidades e geralmente possuem uma certa preferência que está de acordo com o método abordado. A escolha fica com vocês.