artigos
>> tipologia >> tipologia para a Web
(artigo originalmente publicado no
site Aranha Internet e design)
Fábio Carvalho
3/6/2000
Mesmo que você não se dê conta disso o tempo
todo, a tipologia usada em uma página da
Web subconscientemente afeta a maneira como
sentimos e percebemos uma página. Uma página
pode ser formal ou descontraída, moderna ou tradicional,
séria ou amigável, fria ou quente. Você pode modificar
completamente o "clima" de uma página apenas pelo
uso de uma determinada fonte.
princípios básicos
Imagine se você só pudesse usar uma cor para fazer
suas páginas, digamos, preto. Todo e qualquer
elemento em sua página seria desta cor. Tudo seria
preto, por todas os lados preto. Você já deve estar
se dizendo: seria um saco! Muito monótono!
Mas a Web começou assim, não apenas no quesito cores,
mas quanto à tipologia. Só era possível usar
Times. No início da Web, havia palavras,
mas não tipologia. A única fonte possível era
a Times New Roman no caso de Windows e Times no
caso do Mac. Mas mesmo então não se tinha certeza
de como um texto apareceria no browser, pois o usuário
tinha controle total sobre as fontes que ele podia
ver. Os browsers receberam a capacidade de conter
áudio e vídeo muito antes de se poder controlar
a tipologia de uma página.
a pequena revolução
E finalmente, fez-se a luz — a tag <font
face> foi acrescentada ao código HTML,
permitindo aos designers especificar qual fonte
o browser deveria mostrar para cada bloco de texto.
Mas isso também criou um novo problema...
Muita gente não entendeu que para um texto aparecer
no browser do usuário corretamente, este precisa
ter instalada em seu computador exatamente a
mesma fonte especificada pelo designer.
Na prática, isto significa que você pode especificar
apenas algumas fontes, e na maioria dos casos, apenas
duas: Times
New Roman e Arial (Helvética).
Claro, eu sei — tem também a Courier, mas convenhamos,
ela não fica bem em um texto longo, prestando-se
mais para a apresentação de códigos, listagens de
programas, ou em situações bem específicas.
Muita gente saiu por aí colocando na tag <font
face> qualquer fonte instalada em suas
máquinas, e começou a confusão. A pessoa achava
que tinha feito uma página "linda", mas do outro
lado, do lado do usuário, só aparecia Times mesmo....
e agora?
Mas nem tudo está "perdido"! Há como ir além
da Times e Arial, vejamos como:
- para títulos, menus, chamadas, capitulares,
etc, você pode usar o texto na forma de gráfico,
normalmente uma ou mais GIFs, por exemplo, como
no canto superior direito desta página
("Web & Design"), ou os textos
na página de entrada deste site.
- você pode usar algum sistema que anexe
a fonte especial ao código HTML da sua página,
de forma que a fonte, ou uma representação vetorial
dela, seja baixada quando o visitante abre a
página.
- você pode disponibilizar as fontes especiais
para que seu visitante baixe e instale por conta
própria, embora eu ache que este método nunca
deva ser usado, por ser complicado e muitas
vezes ou o usuário não vai se dar a este trabalho,
ou nem mesmo saiba como fazê-lo.
- uma última alternativa, mais segura, seria
usar as novas fontes criadas pela Microsoft
especialmente para a Web. São fontes grátis,
que podem ser baixadas por qualquer um, tanto
para Windows como para Mac, e que inclusive,
para quem usa o Internet Explorer já são instaladas
junto com o browser. Mas não se esqueça! Se
o seu usuário não tiver estas fontes instaladas
no computador, nada feito! Ele não verá
o texto da forma que você planejou.
Vamos agora dar uma olhada com mais detalhe nestas
fontes, então. Todas elas podem ser baixadas de
graça no site da Microsoft, no endereço: www.microsoft.com/typography/fontpack/default.asp
Times
New Roman
A Times se parece com a tipologia usada em muitos
impressos, como jornais e livros. É considerada
um fonte com boa legibilidade para a impressos,
mas cansativa para a tela.
Arial
A Arial é
uma tipologia mais leve e mais moderna. Muitos
designers a consideram uma versão "pobre" da Helvetica.
É bem mais confortável para leitura
no vídeo.
Verdana
A Verdana vem com o Internet Explorer desde a
versão 3. É melhor que a Arial especialmente
em pequenos tamanhos.
Comic Sans
 A Comic Sans foi projetada baseada no tipo de
letra usado nos balões de histórias em quadrinhos.
Georgia
A Georgia é muito mais fácil de ler na tela do
que a Times, pois foi projetada para vídeo, enquanto
a Times foi projetada para impressos.
A Georgia possui um conjunto de caracteres em
itálico muito mais atraente do que a Times.
Seus numerais (1234567890) são também muito elegantes.
Trebuchet
 A Trebuchet é uma fonte muito mais elegante
do que a Arial, e possui um conjunto de caracteres
bem mais completo do que a Verdada, mas é menos
legível em tamanhos pequenos.
Impact
 A
legibilidade da Impact é um bem prejudicada em
tamanhos pequenos. Ela funciona melhor para títulos,
o que acaba sendo mais prático e seguro usando-se
gráficos.
Arial Black
 Versão mais "pesada" da arial, presta-se melhor,
tal qual a Impact, para o uso em títulos, pois para
textos ela é excessivamente "bold".
Andale Mono
 É uma boa alternativa à Courier, caso você precise
de uma fonte de espaçamento fixo não serifada.
faça a coisa
certa
Quando você for usar a tag <font face>
para especificar qual fonte você quer que seja usada
para um bloco de texto, não se esqueça (nunca é
demais lembrar) que se o seu visitante não tiver
a fonte instalada, ele não verá o texto como você
deseja. Por isso mesmo, esta nova tag também possibilita
que você especifique não apenas uma fonte, mas toda
uma lista de alternativas. Veja um exemplo:
<font face="Verdana,Arial,Helvetica,sans-serif">seu
texto entra aqui</font>
No exemplo acima, o browser tentará mostrar o seu
texto com a fonte Verdana. Se ela não estiver instalada
no computador do seu visitante, ele tentará usar
a Arial, e assim por diante. Veja agora um exemplo
usando as fontes serifadas:
<font face="Georgia,Times New Roman,Times,serif">seu
texto entra aqui</font>
Acho que você já entendeu como o browser irá usar
esta lista!
As opções sans-serif e serif orientam
o browser a usar fontes não serifada e serifada
genéricas, respectivamente. Isso quer dizer que
se no computador de seu visitante não houver instalada
nenhuma das fontes da lista, ele usará a
fonte que está indicada na configuração do browser
para cada um destes casos. Por isso mesmo, estas
duas opções devem ficar por último.
|
