Flor Braz - Home

A tipografia tem um papel importantíssimo no design, de uma forma geral. Aplicando-se no webdesign, ela dá uma experiência de navegação mais agradável e bonita.

Em sites estáticos, sempre há a possibilidade de fazer essa substituição via css (apesar de ser um pé no saco para atualizar / não selecionável), mas, no caso de sites com conteúdo dinâmico, essa substituição fica inviável. Pensando nisso, foram criadas algumas ferramentas para a substituição desse texto dinâmico por uma fonte mais agradável, prevista pelo designer.

1. sIFR 2.0

   

   O sIFR foi feito para substituir pequenas passagens de texto formatado com css por um texto com a fonte de sua escolha, selecionável. Para isso, ele combina técnicas de CSS, Javascript e Flash.

   Prós:
   - Funciona com praticamente qualquer fonte
   - Se o usuário não tiver Flash ou Javascript habilitados, o que será mostrado será o texto com a formatação anterior, degradação graciosa
   - Funciona na maior parte dos browsers e plataformas
   - Mesmo utilizando flash, como ele não muda o código, ele favorece a acessibilidade, SEO e afins.

   Contras:
   - Requer tanto javascript quanto flash para funcionar
   - O setup é bastante trabalhoso
   - Não será visível se você bloquear anúncios em flash
   - Ele não seleciona o texto “corrido”. Para selecionar um texto em que o sIFR foi aplicado, você deve selecionar apenas ele, e, então, o resto da página.
   - Não funciona no iPhone, já que ele não suporta flash

2. Cufón

   

   O Cufón procura ser uma boa alternativa para o sIFR, sem utilizar flash. Ele converte as fontes para um formato proprietário (tem uma ferramenta que automatiza esse processo) e renderiza no browser utilizando javascript.

   Prós:
   - Não requer Flash (yay!)
   - É razoavelmente fácil de utilizar, mesmo tendo que converter a fonte antes.
   - A renderização é mais rápida que nos outros métodos
   - Degrada graciosamente (sinto um leve arrepio cada vez que penso ou escrevo essa expressão)
   - É possível selecionar o texto (mesmo que não apareça selecionado, se você copiar e colar, ele funciona.)

   Contras:
   - Converte seu texto em imagens, ou seja, não é tão bom para sua acessibilidade quanto o seu html seria sem o cufón aplicado
   - Requer javascript habilitado
   - Problemas de acessibilidade: Como ele coloca o texto dentro de canvas e spans, alguns. leitores. de. tela. lerão. o. texto. assim.
   - Às vezes, não dá pra selecionar o texto

3. P+C DTR

   

   P+C DTR te permite gerar imagens e substituir seu texto por elas utilizando apenas PHP e CSS.

   Prós:
   - Não requer nem Javascript nem Flash, apenas que seu servidor suporte PHP
   - Não é bloqueado por ad blockers
   - Gera html e css válidos

   Contras:
   - Não funciona se o seu browser tiver com as imagens desabilitadas
   - Funciona com apenas um estilo, aplicado uniformemente
   - Diz que é possível, mas não consegui selecionar o texto gerado

4. FLIR / Facelift

   

   O FLIR utiliza javascript e php para substituir o texto que você quer personalizar por imagens. O javascript vai dizer para ele o que deve ser substituído, e o php gera a imagem com a fonte desejada.

   Prós:
   - Não requer Flash
   - Funciona com virtualmente qualquer fonte
   - Degrada graciosamente se o javascript não estiver disponível
   - Não tem nenhum problema com quebras de linha.

   Contras:
   - Requer Javascript
   - Não é possível selecionar no Internet Explorer
   - Não funciona se o seu browser tiver desabilitado imagens

5. Typeface.js

   

   Diferentemente de todos os outros, o typeface não gera imagens ou usa flash para renderizar suas fontes. Ele utiliza o desenho vetorial do próprio browser.

   Prós:
   - O texto continua a ser texto, um grande ganho em acessibilidade
   - Não requer flash
   - Não é afetado por ad blockers.

   Contras:
   - Apenas fontes grátis / sem copyrights podem ser utilizadas (não sei ainda se isso é um conceito ou um bloqueio na hora de importar a fonte e se é possível burlar de alguma forma. Pirata feelings)
   - Requer Javascript
   - Aumenta razoavelmente o tamanho da página e o número de HTTP requests
   - Não funciona no IE se as imagens estiverem desabilitadas (enquanto todos os outros renderizam o vetor com SVG, o IE usa o VML)

Apesar de tudo ser muito bonito, use com moderação! Todas as ferramentas deixam o carregamento da página mais lento, e, a quanto mais elementos essas ferramentas tiverem sido aplicadas, lerdeia mais.

Esse artigo é baseado nesse artigo do DezinerFolio, e com mais algumas informações da Smashing Magazine.