ProyectoWeb - Sobre Diseño de Interacción, Usabilidad y AI
Suscribirse Suscribirse al Boletín



 
Año 2 - Boletín Nro 34 - lunes 17 de marzo de 2003
¿Cómo elegir el tipo de letra para la página web?

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 tipografía elegida puede no estar disponible en la computadora del usuario por lo que conviene usar fuentes genéricas. En último caso se puede recurrir a usar una imagen gráfica 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.

Por Rafael Romero Zunica
- Unidad de Investigación ACCESO 


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 computadora 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 la computadora 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 web 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, Courier New, Georgia, Helvética, Times New Roman (fuente por defecto), Verdana y Comic Sans.

En los sistemas Mac las más usuales son: Arial, Chicago, Courier, Geneva, Helvética 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.

Definiendo la fuente

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 "serif" y "sans serif"

El último valor seleccionado de fuente debe ser "serif" o "sans-serif". Estos son los principales estilos de las familias de fuentes que existen. La  "serif" hace referencia a las fuentes, que tienen un pequeño adorno o "serif" en los extremos. Times, Georgia y Times New Roman son ejemplos de este estilo de letra que tiene connotaciones más clásicas y formales. La "sans-serif" está formada por las tipografiás llamadas "de palo", con un trazo más limpio y sin adornos. Por ejemplo, Arial, Helvética y Verdana.

CON SERIF
Times - Times New Roman - Georgia

SANS SERIF
Arial - Helvética - Verdana

Los usuarios del formato impreso prefieren las fuentes "serif", porque facilitan la lectura de los textos y tienen un diseño más atractivo. Sin embargo, la mayoría de los sitios web optan por las fuentes "sans-serif", que son más fáciles de leer en pantalla, admiten mejor una reducción de tamaño hasta 8 o incluso 7 puntos, y al no tener rasgos curvos en el diseño se muestran en pantalla con mayor limpieza y definición.

Después existe un tercer estilo 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 la computadora de los usuarios de su página web.

Textos en formato gráfico

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 algún formato gráfico (gif, jpg o png) 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, el "slogan" de la empresa o mensajes publicitarios.

En estos casos es fundamental incluir, junto con la imagen, un texto alternativo mediante el atributo ALT, que indique el contenido de la gráfica. Por ejemplo: Vista panorámica de Madrid)

Mezclar fuentes en la página

Con solo dos familias de fuentes se resuelve el diseño de un sitio 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 al cuerpo principal del artículo de su encabezado, de las opciones de navegación o de los títulos de sección. Se puede montar un sitio web perfectamente atractivo operando 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, con los cuales es factible hacer la página más atractiva. Entre ellos están el uso de la negrita y la cursiva, los distintos tamaños de letra y la combinación de los colores del primer plano y fondo de las letras.

Ver Además: 
Fonts for the Web:
http://www.efuse.com/Start/webfonts_download.html

ProyectoWeb - ¿Cómo elegir el tipo de letra para la página web?

:: Portada
:: Agenda
:: Boletines por fecha

:: Lista de Correo (PWlist)
:: Tumblelog nueva ventana
:: ¿Quiénes Somos?

:: Contactar


2da Mesa Redonda Internacional - Una Web para Todos. La Habana
2da Mesa redonda Internacional de ProyectoWeb "Una Web para Todos". La Habana. abril 2008


Eventos
:: 1er Enc. Iberoamericano de
Diseño de Comunicación

- mayo de 2006 nueva ventana

:: 1ra Mesa Redonda Internacional "Una Web para Todos" - abril de 2006 nueva ventana

Día Mundial de la Usabilidad:
Evento Teórico "Por un Diseño Web Accesible y Universal"
:: 2005 - Relatoría nueva ventana
:: 2006
nueva ventana


Nos visitaron
:: Juan Leal - 2005
::
Nacho Puell - 2005
:: Jesús Carrera - 2006 nueva ventana
::
Jorge Barahona - 2006 nueva ventana



Web Afines
:: Happyuser nueva ventana
:: Lista de Cadius nueva ventana
:: NoSoloUsabilidad nueva ventana
:: Alzado nueva ventana
:: Pablo Impallari nueva ventana
:: UsoLab nueva ventana
:: Jarango.com nueva ventana
:: Véaseademás nueva ventana
:: Inusual nueva ventana
:: seisdeagosto.com nueva ventana
:: Usalo nueva ventana
:: Denken Über nueva ventana
:: Terremoto.net nueva ventana
:: dnxgroup nueva ventana
:: Biguel nueva ventana
:: SIDAR
nueva ventana
:: Usespanol nueva ventana
:: Nethodical nueva ventana
:: Macadamia nueva ventana
:: abcweb nueva ventana
:: Usable nueva ventana
:: Cadius Zaragoza nueva ventana



De Cuba
:: PROGRAFICA cubana nueva ventana
Organización interesada en trabajar en la promoción del Diseño Gráfico.



Sindicación RSS Feed
:: ProyectoWeb
:: Tumblelog


Recomendamos
:: Mozilla Firefox nueva ventana
:: Del.icio.us nueva ventana - Bookmarks
:: FutureMail nueva ventana - Notificador
:: Ovillo nueva ventana - Lista de Correo sobre estándares web en castellano

Redes Sociales
:: Estamos en Facebook
:: Comunidad en Ning
............................................

Portada | Agenda | Boletín por fecha | Suscribirse al Boletín nueva ventana
Lista de Correo | Tumblelog nueva ventana | ¿Quiénes Somos? | Contactar


RSS Feed:
ProyectoWeb | Tumblelog

ProyectoWeb - Sobre Diseño de Interacción, Usabilidad y AI - La Habana. Cuba
Creado en octubre de 2001
Correo Electrónico: info@proyectoweb.org
http://www.proyectoweb.org - http://www.proyectoweb.cubaweb.cu

ProyectoWeb, Sobre Diseño de Interacción, Usabilidad y AI