[Webmaster] Las fuentes en las páginas web

Los limites de la web

La fuente que utilizamos en nuestra página web sólo se verá como se ve en nuestra pantalla si el internauta que visita nuestra página tiene el mismo tipo de fuente instalado en su PC.

• No podemos forzar al internauta a que descargue e instale una fuente, ni siquiera automáticamente.
• Tampoco sabemos los tipos de fuentes instaladas en la PC del internauta.
• Por ello, no podemos saber como nuestra página será vista en los navegadores.

Por lo tanto lo mejor es usar fuentes genéricas y definir otros tipos de fuentes alternativos (si es posible que sean similares a la que nos gusta).

Ejemplo

Por ejemplo, si quisiéramos que nuestra página aparezca con la fuente Trebuchet MS". Entonces deberemos definir el tipo de fuente:

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

Poniendo "Trebuchet MS" en primer lugar, indicamos que deseamos que la página sea vista con esta fuente.

• Si el internauta tiene esta fuente, entonces él la verá en su pantalla con esta fuente.
• Si el internauta no tiene esta fuente, el navegador intentará con la siguiente fuente ((Verdana, Arial...) hasta encontrar la que tenga.

Las fuentes por defecto

Cada sistema operativo y navegador interpretan de distinta forma estas fuentes predeterminadas.

• serif: "Times New Roman" en Windows, y "Times" en Macintosh (diferente a la de Windows).
• sans serif: “Arial” en Windows, y "Helvetica" en Macintosh.
• monospace: "Courrier New" en Windows, "Courrier" en Macintosh, y por lo general "VeraSans" o "DejaVuSans" en Linux.

Así es como se verán estas fuentes en Windows (en Internet Explorer):


Lo mismo en Windows, pero con ClearType activado:


En MacOS X (en Safari):


En Linux (Ubuntu) (en Firefox):

Recomendaciones

Para las fuentes con serifa, debemos definir:
"Times New Roman", Times, serif;

Para las fuentes sin serifa:
Verdana, Arial, Helvetica, sans-serif;

(Verdana es más fácil de leer en la pantalla que Arial, incluso si existe controversia acerca del uso de esta fuente)

Para las fuentes con un espacio fijo:
"DejaVu Sans Mono","Bitstream Vera Sans Mono", monospace;

DejaVu y Vera son familias de fuentes opensource fáciles de leer y que permiten (contrariamente a Courrier) distinguir bien el 0 de la O y el 1 de la l.
De preferencia elegir éstas antes que Courrier.
(Se encuentran por defecto en la mayoría de distribuciones Linux recientes)

Enlaces

• Fuentes instaladas con Windows XP por defecto

PD: El artículo original fue escrito por sebsauvage, contribuidor de CommentCaMarche