Uma boa tipografia na web é algo que realmente me impressiona, porque é tão fácil escolher a fonte errada. Eu propriamente acho que nunca fui muito bem sucedida na realização de um projeto baseado em fontes.

Com milhões de combinações possíveis, nós designers acabamos desistindo antes mesmo de começar. No entanto, temos que agradecer a perseverança de alguns de nossos colegas, que por não desistirem acabaram criando as maravilhas que serão listadas no final desse artigo.

Apesar do meu gosto pela analise mais profunda da tipografia, esse artigo tratará apenas da tipografia como elemento fundamental do design: títulos, manchetes e áreas de destaque, etc. Pretendo publicar brevemente algum material sobre “legibilidade na web”.

A tipografia tem tudo para ser a parte mais elegante de um projeto.

Os resultados finais, normalmente, são o que chamamos de clean: elegantes e legíveis.

A boa escolha da tipografia pode reduzir consideravelmente a necessidade de fotos e ilustrações, porem, como eu falei no artigo sobre “Estilo retrô”, somando uma boa família de fontes a esses elementos o projeto pode ficar muito mais interessante.

É importante lembrar que cada sistema operacional possui a sua família tipográfica e que, caso você utilize uma fonte que não existe no computador do usuário, ela será substituída por outra previamente definida ou pela fonte padrão do sistema.

Apesar das fontes existentes no Internet Explorer serem muito parecidas com as fontes do Mac, é preciso lembrar que existem outros sistemas operacionais e que é necessário garantir que o conteúdo terá o mesmo aspecto (ou o mais parecido possível) em todos eles. No caso do linux, por exemplo, o número de fontes instaladas varia de versão pra versão.

Para trabalhar com fontes alternativas, a melhor solução, na minha opinião é através da técnica “Image Replacement“. Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas css, assim é possível utilizar qualquer fonte sem a preocupação se ela será exibida corretamente, pois imagens são sempre imagens. Dessa forma ganhamos em compatibilidade!

Veja no “Pinceladas da Web“a técnica mais comum para trabalhar com substituição de textos por imagens, ou então, faça uma comparação entre os principais métodos conhecidos no “Mezzoblue” (em inglês).

Tudo depende do contexto. Uma mesma fonte pode apresentar diversos aspectos bastando apenas mudar a cor do fundo, adicionar uma borda ou uma imagem…Veja alguns exemplos se pode fazer:

Exemplo 1 – Fonte Sofia Script

Fonte – Sofia Script – Fonte manuscrita e sem acentuação. Perfeita para estilos arrojados, pode ser moderna ou retrô dependendo somente de como vem acompanhada.

Exemplo 2 – Fonte Logomotive

Uma fonte básica desenvolvida por um designer gráfico Acentuada, com maiúsculas, minúsculas, pontuação e números.

Mais uma vez eu digo: procure sempre a compatibilidade na maioria das plataformas possíveis, dispensando a necessidade de instalação de programas, plugins ou acessórios para o funcionamento do site.

Exemplos de uso

Links

• Image Replacemente acessível – A técnica mais comum para trabalhar com substituição de textos por imagens
• Outras técnicas para Image Replacemente (em inglês) – faça uma comparação entre os principais métodos conhecidos
• TypeTester – Veja como o seu texto fica com várias formatações diferentes baseado em css.
• WhatTheFont - Viu uma fonte, gostou, mas não sabe o nome? Apenas digite o endereço ou envie o texto em imagem e esse site descobre pra você.
• Letter Head Fonts – Site de exemplo de uso de diversas fontes para títulos e logomarcas. EXCELENTE!
• Colour Contrast Check – Verifique o contraste da cor do fundo e da fonte de seus trabalhos, isso vai ajudar a melhorar a navegação principalmente para portadores de alguma deficiência visual.
• IBRAU – Para quem não quer esperar meu artigo sobre legibilidade
• Lipsum – Gerador de texto ilustrativo para projetos. O famoso ” Lorem ipsum dolor sit amet”

Fontes para Download

• NetFontes – Fontes grátis
• Truques e Dicas – Fontes grátis
• DaFont (em inglês) – Algumas fontes grátis, mas uma boa parte é para venda.