Webmaster - As fontes nas páginas web

Novembro 2016


Os limites da web


Ao utilizar uma fonte em uma página web, ela só aparecerá se o usuário tiver a mesma fonte instalada em seu computador.
  • Você não tem nenhuma como forçar o usuário a baixar e instalar uma fonte, mesmo automaticamente.
  • Você também não tem qualquer garantia sobre as fontes presentes no computador do usuário.
  • Você não tem nenhuma garantia de como a sua página aparecerá nos navegadores.


Assim sendo, você deve fazer "o melhor que puder", ou seja, especificar as fontes (esperando que eles existam) e especificar outros nomes de fontes alternativas (se possível, próximas das que você quer usar).

Exemplo


Por exemplo, você gostaria que a sua página fosse exibida com a fonte "Trebuchet MS". Então, especifique:

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

Ao colocar "Trebuchet MS" em primeiro lugar, você assinala que quer que a página seja exibida com esta fonte.
  • Se o usuário tiver esta fonte, ele vai se abrir com ela.
  • Se o usuário não tiver esta fonte, o navegador tentará, sucessivamente, com cada uma das seguintes fontes (Verdana, Arial, etc), até encontrar uma que ele tenha.


Basta especificar as fontes que são graficamente semelhantes à fonte que você deseja usar.

Os tipos padrão


Existem três tipos de fontes padrão que todos os navegadores reconhecem:
  • Serif: fonte com serifa ("Times New Roman" no Windows)
  • Sans-Serif: fonte sem serifa ("Arial" no Windows)
  • Monospace: fonte com espaço fixo ("Courrier New" no Windows)


Ao especificar as fontes a serem utilizadas, o ideal é sempre especificar uma destas três fontes genéricas, como último recurso.

Tipicamente, como no nosso exemplo acima:

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

Sans-serif (fonte de vara) é a fonte mais próxima do "Trebuchet MS" e permite (no pior dos casos) que você tenha uma página cujo "look" não se distancia muito do que você quer.

O aspecto das fontes padrão


Cada sistema operacional e cada navegador interpreta estas fontes padrão de forma diferente.
  • Serif: É o "Times New Roman"no Windows, e o "Times" no Mac (que é diferente da do Windows).
  • Sans-Serif: É o "Arial" no Windows, e o "Helvetica" no Mac.
  • Monoespaço: "Courier New " no Windows, "Courrier" no Mac e, muitas vezes, "VeraSans"ou "DejaVuSans" no Linux.



Veja a aparência dessas fontes no Windows (no Internet Explorer):


Idem no Windows, mas com o ClearType ativado:


No MacOS X (no Safari):


No Linux (Ubuntu) (no Firefox):

Recomendações


Para as fontes serifa, especifique:
"Times New Roman", Times, serif;

Para fontes de vara:
Verdana, Arial, Helvetica, sans-serif;

(Verdana tem uma melhor legibilidade na tela do que o Arial, embora haja controvérsias sobre o uso desta fonte).
Para as fontes com espaço fixo:
"DejaVu Sans Mono","Bitstream Vera Sans Mono", monospace;

DejaVu e Vera são famílias de fontes "Open source" muito legíveis, que permitem (ao contrário do horrível Courier) distinguir o 0 do O e o 1 do I.

Elas são preferíveis ao Courrier, tantas vezes quanto possível.

(Elas estão presentes por padrão na maioria das distribuições recentes do Linux).

(Enquanto for possível, evite a fonte "Courier").

Link




Tradução feita por Lucia Maurity y Nouira

Veja também :
Este documento, intitulado « Webmaster - As fontes nas páginas web »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.