Métodos de Font-Replacement
Estava lendo um post do Webdesign Tuts+ que fala sobre diferentes métodos que permitem usar fontes diferentes sem utilizar imagens e achei legal traduzir resumidamente algumas técnicas.
Apesar de todos os avanços feitos no campo do webdesign pelo HTML5 e o CSS3, a área de tipografia continuou praticamente estagnada e sem muitas novidades. A importância em se usar texto como texto e não como imagens não passa somente pela redução drástica de trabalho em algum redesign do site, esse tipo de ação afeta também SEO e acessibilidade. Portanto, como sempre é falado, é importante constuir um layout bonito sim, sem limitações, com um bom e usável design, mas que também atenda às necessidade técnicas. Alguns métodos de font-replacement são:
@font-face
Este primeiro método vem sendo o mais utilizado por mim e aparentemente o melhor. Ele consiste basicamente em hospedar uma fonte em algum servidor e através de um código simples em CSS indicar ao browser onde buscar aquela fonte para renderizar o elemento.
Prós
- A acessibilidade é mantida
- Suporte unicode
- font-style (css) suporte
Contras
- Algumas fontes podem ser pesadas para se baixar
- Não existe um formato comum de fonte em todos os browsers
- A distribuição não é permitida – significa que você não pode usar isto em templates ou temas.
Este método renderiza as fontes em um servidor criando um VML (para IE) ou um Canvas de HTML5 para outros browsers.
Prós
- Bem suportado em diferentes browsers
- Habilidade para buscar o set de caracteres que você quer para otimizar o tamanho do arquivo
- A propriedade font-style se mantém ativa e inalterada em todos os browsers
Contras
- Texto não selecionável
- Performance prejudicada – melhor usar somente em títulos
- Estilos especiais (sublinhado, hover etc) demandam mais trabalho
Google Fonts
Este método consiste em colar um pequeno trecho de código do Google em seu HTML e usar as fontes em seu CSS. Simples assim.
Prós
- Licensas abertas, ou seja as fontes são grátis para usar
- As fontes são hospedadas pela google, ou seja, você provavelmente já tem em cache
Contras
- Apesar de ter um bom acervo de fontes, ainda acho que faltam diversos tipos de fontes úteis para um layout
Font Squirrel
Segundo o post este talvez seja o método mais usado atualmente. Para usar você deve baixar o font-kit da página e inserir em seu site através de um @font-face. Mas é importante ter atenção com as licensas de cada fonte, nem todas são usáveis em todas as situações.
Prós
- Usa @font-face, mas com uma implementação muito mais fácil
- Eles gerenciam todos os problemas com licensas
- Inclui diversos diferentes formatos, isso quer dizer, crossbrowser!
- Você pode gerar seu próprio font-kit, se eles não tiverem o seu
Contras
- Os mesmos do @font-face lá de cima, mas apesar de tudo, esta é uma grande solução
Outros métodos
O post ainda apresenta diversos outros métodos de font-replacement, eu recomendo que você vá ao site e leia sobre todos para descobrir qual melhor se encaixa em suas necessidades.
Neste post eu coloquei somente os que considero mais importantes e todas as imagens e prós e contras foram traduzidos do post citado acima, os direitos são deles.
fonte: The Web Designer’s Guide to Font Replacement Methods
Comentários
Seja o primeiro a comentar neste post!