Fontes para a Web e os CSS Font Stacks

Na maioria dos websites o que mais salta à vista é a fonte utilizada para o seu conteúdo. Uma boa fonte pode ser a diferença entre cativar um leitor ou perder uma visita porque torna o nosso conteúdo desinteressante.

Mas será que utilizamos as nossas fontes correctamente?

Pangrama de tipografia

Existe um conjunto de fontes ou tipos de letra que são considerados seguros para utilizar na Web. Fontes como o Verdana, Tahoma e Arial podem ser usados com confiança pelos developers.

No entanto vamos desenvolver o nosso website e vamos usar aquela fonte bem gira que temos no nosso PC mas quando visualizamos o site noutro computador nada aparece de forma correcta. Temos duas opções, ou embebemos a fonte ou fornecemos uma alternativa.

Fontes embebidas – @font-face

Com o CSS3 finalmente vai passar a ser possível embeber fontes de uma forma funcional a todos os browsers. O Internet Explorer 5 já permitia isto, mas com código especifico da Microsoft como é hábito.

Desde que a fonte permita ser embebida podemos usar a mesma no nosso site. Um bom local para obter este tipo de fontes é o Google Web Fonts.

Esta é uma forma de garantir que o nosso design em termos tipográficos é semelhante em todas as máquinas, tenham o tipo de letra ou não. O problema é que em certas fontes isto implica descarregar até 200KB de informação e isto não faz sentido para um site generalista, talvez para um portfolio ou mesmo um blog pessoal como este.

Fontes alternativas – CSS Font Stacks

Um font stack é uma lista de fontes que são utilizadas caso o computador de quem nos visita não tenha a fonte inicial que definimos. Um exemplo definido pelo Dreamweaver:

1
div { font-family: Verdana, Geneva, sans-serif }

Se o utilizador não tiver a fonte Verdana instalada irá visualizar o site com a fonte Geneva. Se também não tiver esta fonte o conteúdo é apresentado pela fonte padrão do sistema operativo do tipo sans-serif.

Mas para definirmos fontes alternativas temos que saber que outro tipo de fontes semelhantes existem. O site Typetester é uma óptima ferramenta para esta função, colocando 3 blocos de texto lado a lado permitindo assim escolher várias fontes e comparar o tamanho e aspecto ocupado por cada uma.

Já sabemos as fontes semelhantes, mas será que elas estão disponíveis em todos os sistemas? Mais de 92% dos utilizadores na web usam Windows, o que facilita o trabalho, mas não nos podemos esquecer dos restantes 8%. E é necessário ter em conta que diferentes sites têm diferentes públicos e um site dedicado a Mac ou Linux certamente terá mais visitas destes sistemas operativos.

E aqui entra outra ferramenta, ou melhor um conjunto delas fornecido pelo site Code Style. Aqui podem submeter as fontes que têm instaladas para estatística, visualizar a disponibilidade das fontes em vários sistemas operativos e até criar font stacks com a indicação da percentagem de utilizadores com aquela fonte disponível.

Com estas duas ferramentas podemos por exemplo criar a alternativa ao código anterior fornecido pelo Dreamweaver com o seguinte:

1
div { font-family: Verdana, Geneva, "Lucida Sans", "DejaVu Sans", sans-serif }

O Verdana será visualizado por 99% dos utilizadores com Windows e Mac e por 70% dos utilizadores com Linux. O Geneva será visualizado por uma minoria com Mac e as fontes Lucida Sans e DejaVu Sans serão utilizadas pelos restantes 30% dos utilizadores em Linux.

Fontes e dispositivos móveis

Para dispositivos móveis a história é outra. No caso do Android navega-se com Droid Sans e mesmo o Opera Mini limita o tipo de fontes utilizado. Aqui as fontes são optimizadas para pequenos ecrãs e embora o resultado a nível estético não seja o melhor o texto fica legível de uma forma agradável.

 
Copyright © 1985 - 2017 Eduardo Maio. Alguns direitos reservados.
eduardomaio.net - Às vezes mais valia ser Agricultor do que Programador
Ao navegar no blog eduardomaio.net está a concordar com os termos legais e de privacidade.