1
Gracias

Unas palabras de agradecimiento nunca están de más.

Webmaster - Las fuentes en las páginas web

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.
Esto a veces supone un problema, pues no podemos forzar al internauta a que descargue e instale una fuente, ni siquiera automáticamente. Tampoco sabemos los tipos de fuentes instaladas en su PC y, por ello, no podemos saber cómo será vista nuestra página web.
Por lo tanto, te recomendamos usar fuentes genéricas. En este artículo te hablamos de ello.



Ejemplo

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.

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:


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;


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.

Foto: © Unsplash

1
Gracias

Unas palabras de agradecimiento nunca están de más.

Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net y director digital en el Grupo Figaro. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.
El documento « Webmaster - Las fuentes en las páginas web » se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.

0 Comentario