Unidad de Investigación ACCESO

Accesibilidad a la Red

Información y herramientas sobre el diseño accesible de sitios web. Diseño para Todos

Cómo elegir el tipo de letra para la página web

Rafael Romero Zúnica
Unidad de Investigación ACCESO 
Publicado originalmente en Temalia. 23/03/2001

Resumen

La definición de las fuentes de la página web debe hacerse teniendo en cuenta que éstas reciben distinto nombre en los sistemas Windows y Mac. La fuente elegida puede no estar disponible en el ordenador del usuario por lo que conviene usar fuentes genéricas. En último caso se puede recurrir a usar una imagen GIF para reproducir fielmente un breve texto con tipografía poco habitual. No conviene usar más de dos tipos distintos de letra en una misma página.

Artículo

Un error muy común entre diseñadores web noveles consiste en elegir un tipo de letra 'exótico' para la página web, pensando que todos los visitantes a su página obtendrán el mismo impactante resultado que aparece en la pantalla de su ordenador en ese momento.

Pero esto no es así. El navegador sólo mostrará la fuente definida originalmente en la página web si ésta se encuentra instalada en el ordenador del cliente. De otro modo, la fuente será sustituida por otra, normalmente Times o Times New Roman.

Fuentes en Windows y Mac
Es importante que se definan las fuentes del documento eligiendo entre las que se encuentran disponibles habitualmente en los sistemas operativos principales Windows y Mac. Aunque las fuentes son muy parecidas tienen distintos nombres en cada sistema operativo. En Windows las fuentes más usuales son Arial, Comic Sans, Courier New, Georgia, Helvetica, Times New Roman (fuente por defecto), y Verdana.

En los sistemas Mac las más usuales son: Arial, Chicago, Courier, Geneva, Helvetica y Times (fuente por defecto). Por tanto, para que las páginas se muestren correctamente en los dos sistemas es necesario hacer una definición múltiple de fuentes, e indicar la fuente preferida tanto en el sistema Windows como en el sistema Mac.

Usando directamente el comando FONT FACE la instrucción sería por ejemplo: <font face='Georgia, Times, Times New Roman, serif'>. Otra posibilidad para definir la fuente de todo el documento es utilizar el atributo FONT-FAMILY con un valor múltiple en la hoja de estilo en cascada. Por ejemplo: 'FONT-FAMILY: Arial, Geneva, Helvetica, sans-serif'.

Si la primera fuente no está instalada en el sistema operativo, el navegador intentará mostrar la siguiente y así sucesivamente hasta terminar todas las opciones especificadas.

Letras con serifa y sin serifa
El último valor seleccionado de fuente debe ser siempre 'serif' o 'sans-serif'. Estas dos son las familias principales de fuentes que existen. La familia 'serif' hace referencia a las fuentes de imprenta, que tienen un pequeño adorno o 'serifa' en los extremos. Times, Georgia y Times New Roman son ejemplos de este estilo de letra que tiene unas connotaciones más clásicas y formales. La familia 'sans-serif' está formada por todas las letras llamadas 'de palo', con un trazo más limpio y sin adornos. Por ejemplo, Arial, Helvetica y Verdana.

Parece ser que los usuarios prefieren en formato papel las fuentes 'serif' porque facilitan la lectura de los textos largos. Sin embargo, la mayoría de sitios web están optando últimamente por las fuentes 'sans-serif' porque son más agradables de leer en pantalla y admiten mejor una reducción de tamaño hasta 8 o incluso 7 puntos.

Después existe una tercera familia principal de fuentes que son las llamadas 'informales' o 'de fantasía'. Su uso entraña riesgos ya que no se puede asegurar que se vayan a encontrar en el ordenador de los visitantes de las páginas web. Para crear una página con una tipografía informal la opción más segura es usar la fuente Comic Sans.

Textos en imágenes GIF
Si se desea asegurar que un determinado texto se muestre con total fidelidad a la fuente original y ésta no es muy habitual habrá que optar por capturar una imagen del texto en formato GIF con fondo transparente e integrarlo con el resto de la página.

Obviamente esto sólo es aplicable a fragmentos cortos de texto, como las opciones de un menú de navegación o breves mensajes como el lema de la empresa o textos publicitarios. 

En estos casos es fundamental incluir un texto alternativo con la imagen usando el atributo ALT. El texto alternativo debe reproducir literalmente el texto mostrado en la imagen.

Mezclar fuentes en la página
Se recomienda no mezclar más de dos fuentes distintas en la misma página web. Cambiar la fuente a mitad del documento sólo está justificado si se trata de mostrar elementos con contenido de una naturaleza diferente. Por ejemplo diferenciar lo que es el texto del artículo principal de las opciones de navegación o los títulos de sección.

Se puede montar un sitio web perfectamente atractivo jugando sólo con las fuentes Arial y Verdana. No hay que olvidar que existen otros elementos de maquetación relacionados con la presentación de la fuente y con los que podemos jugar para hacer la página más atractiva. Algunos ejemplos son el uso de la negrita y la cursiva, distintos tamaños de letra y cambiar el color del primer plano o color de fondo de las letras.

(c) Unidad ACCESO. Dep. Psicología Evolutiva i de l'Educació. Universitat de Valencia Estudi General.
Contactar con Unidad ACCESO