Fuentes para páginas web: tipografía recomendada, genérica

La fuente que utilizamos en nuestra página web sólo se verá como la visualizamos nosotros si el internauta que la visita tiene el mismo tipo de fuente instalado en su ordenador. Por lo tanto, te recomendamos usar fuentes genéricas. En este artículo te hablamos de ello.

¿Cómo se pueden acomodar los tipos de fuentes?

Por ejemplo, si queremos 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;

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

Si el internauta tiene esta fuente, entonces la verá en su pantalla con esta fuente. En caso contrario, el navegador lo intentará con la siguiente fuente (Verdana, Arial…) hasta encontrar la correcta.

¿Cuáles son 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 Mac (diferente a la de Windows).
• sans serif: “Arial” en Windows, y "Helvetica" en Mac.
• monospace: "Courrier New" en Windows, "Courrier" en Mac, y por lo general "VeraSans" o "DejaVuSans" en Linux.

Así es como se verán estas fuentes en Windows:

Lo mismo en Windows, pero con ClearType activado:

En MacOS X en Safari:

En Linux (Ubuntu) en Firefox:

¿Qué recomendaciones son prácticas para escribir el tipo de fuente?

Para las fuentes con serifa debemos definir:

"Times New Roman", Times, serif;

Para las fuentes sin serifa:

Verdana, Arial, Helvetica, sans-serif;

Nota: Verdana es más fácil de leer en la pantalla que Arial.

Para las fuentes con un espacio fijo:

"DejaVu Sans Mono","Bitstream Vera Sans Mono", monospace;

Recomendamos tener en cuenta que DejaVu y Vera son familias de fuentes open source fáciles de leer. Al contrario que Courrier) permiten distinguir bien el 0 de la O y el 1 de la l.