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

    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

    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

    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

    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

    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. :)