Tipos de fontes para webdesign

Sexta-feira, 19 de Novembro de 2004

Quem faz webdesign sabe que só há um determinado número de tipos de letra que podem ser utilizados na criação de um website. Os tipos de letra que podemos usar são apenas aqueles que sabemos que existem em todos os computadores, ou seja: Arial, Verdana, Times New Roman…

Sempre que queremos incluir um texto com um tipo de letra diferente do habitual, temos que o fazer através da inclusão de uma imagem no HTML. No entanto, neste momento já é possível fazê-lo apenas com CSS usando uma técnica que se chama FIR (Fahrner Image Replacement). Há várias técnicas para fazer isto, mas a FIR é a mais conhecida.

Mas, se não quisermos usar imagens, então temos mesmo que utilizar aqueles tipos de letra que toda a gente conhece. E aqui surge uma dúvida: será que no Mac existem os mesmos tipos de letra que no Windows? A resposta está nesta tabela que mostra os tipos de letra existentes em Windows e Mac (Windows em preto e a versão Mac em azul).

Alguns tipos de letra têm o mesmo nome nas duas plataformas, mas às vezes um tipo de letra igual tem nomes diferentes, como é o caso da letra Impact que se chama Charcoal em Mac. Quando isto acontece, temos que declarar no CSS o código da seguinte maneira:

1. {font-family: Impact, Charcoal, sans-serif;}

O que este código faz é: procura no sistema pelo tipo de letra Impact. Se não existir, então procura por Charcoal, e finalmente, se não encontra nenhum dos tipos de letra anteriores abre o tipo de letra default sans-serif.

Usando o Flash
Há pouco tempo surgiu outra técnica para substituir o tipo de letra das páginas web. A nova revolução chama-se sIFR (scalable Inman Flash Replacement).
Com esta nova técnica é possível usar virtualmente qualquer tipo de letra sem nenhuma restrição. É a forma mais rápida e fácil de substituir texto em XHTML por uma versão melhorada (ver outras técnicas de substituição de texto).
As vantagens são enormes (texto escalável, script não-intrusivo, possibilidade de usar mais tipos de fontes), mas também tem os seus inconvenientes. Se o utilizador não tiver o Flash instalado e tiver o JavaScript desactivado no seu computador, esta técnica não funciona.

Tamanho do texto
Que técnica usar para definir o tamanho do texto? Usando a propriedade font-size podemos definir o tamanho do texto em px, %, em, ex, pt ou xx-small a xx-large. O problema é que ao contrário de definirmos o texto em px, se usarmos uma das outras técnicas, o texto vai ficar diferente em todos os browsers. Em alguns fica maior em outros fica menor (e às vezes fica tão pequeno que é ilegível).

Qual a solução? Se queremos tornar o nosso site mais acessível, devemos definir o tamanho do texto em em. Com esta técnica, o texto é escalável e o seu tamanho é definido a partir do default do browser: 1em = default do browser. O problema é que nem todos os browsers usam o mesmo tamanho de letra default. Isto fará com que o texto apareça diferente em todos eles.

Se quisermos ter o controlo do tamanho do texto no site, então temos que definir o tamanho em pixels. O único problema de usar esta técnica é que o Internet Explorer (todas as versões) não permite escalar o tamanho do texto usando a opção do browser. Desta forma o utilizador não consegue aumentar ou diminuir o texto, o que se torna um problema de acessibilidade. No entanto, nos browsers modernos como o Firefox isso já não é problema porque o texto é sempre escalável…