CSS » Tipografías web - Usarlas de manera correcta

Usar tipografías web funcionales y accesibles ha sido siempre un problema para cualquier diseñador web, en este pequeño tutorial intentaré explicar de la mejor manera posible como usarlas de manera correcta y cuales son los límites de su aplicación.

Este tutorial lo dividiré en 3 partes:

1. Uso de tipografías estándares web.
2. Uso de fuentes no estándares con Cufón.
3. Uso de fuentes no estándares con @fontface.
4. Comparación entre @fontface y Cufón.
5. Opinión personal.

Uso de tipografías estándares web

Para visualizar correctamente una fuente de Internet esta debe estar instalada en el equipo del visitante. Hay una serie de tipografías instaladas por defecto en prácticamente todos los sistemas operativos, estas son las tipografías estándares.

Las tipografías estándares son:

• Arial
• Arial Black
• Comic Sans
• Georgia
• Impact
• Lucida console
• Lucida Sans unicode - Lucida Grande*
• Palatino
• Tahoma - Geneva
• Times New Roman - Times
• Helvatica
• Verdana

*Los nombres separadas por un guión representan la misma fuente pero con distintos nombres en diferentes sistemas operativos.

Las tipografías estándar pueden servir perfectamente para crear una web en su totalidad (por ejemplo esta misma web) pero si queremos lograr efectos diferentes como los de otras web (por ejemplo Domestika.com) tendremos que usar alguno de los siguientes métodos.

Fuentes genéricas

Adicionalmente en cada declaración de font-family en la hoja de estilo, necesitamos agregar una fuente genérica, es decir, una familia de fuente a la cual pertenece la tipografía seleccionada, para que en los casos de que la fuente usada no se encuentre en el dispositivo en que se lea, se use una fuente "parecida".

Las 5 fuentes genéricas son:

• monospace
• Sans
• Sans-serif
• fantasy
• cursive

Cada una de estas fuentes genéricas se distinguen entre sí. Podemos ver la siguiente imagen para saber sus diferencias.

Así, por ejemplo, podemos declarar font-family de la siguiente forma:

body      {font-family:tahoma,arial,sans-serif;}
h1         {font-family:georgia,serif;}
pre,code {font-family:'lucida console',monospace;} 

Uso de fuentes no estándares con Cufón

Cufón es una libreria JS que permite cambiar la fuente mostrada en pantalla por una subida anteriormente al servidor, respeta la accesibilidad del sitio así como su contenido jerárquico.

Primero, debemos descargar Cufón aquí. (Clic derecho >> Guardar como)

Para usar Cufón tendremos que usar este generador. En él subimos los archivos de la fuente que deseamos incluir, rellenamos todos los datos y aceptamos las condiciones generales. 

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="***Nombre de tu tipografía***.font.js" type="text/javascript"></script>
<script type="text/javascript"> 
Cufon.replace('h1');
Cufon.replace('h4');
</script> 

Este script se coloca en el head de tu web y sustituye por tu fuente lo s encabezados de nivel h1 y h4 (A estos encabezados se les puede dar cualquier estilo CSS).

Uso de fuentes no estándares con @fontface

@font face es una propiedad CSS3 que permite cambiar la fuente mostrada en pantalla por una subida anteriormente al servidor, respeta la accesibilidad del sitio así como su contenido jerárquico. 

Para usar @fontface debemos usar este generador. Elegimos easy y seguimos las instrucciones.

Usaremos este código css:

@font-face {
	font-family: 'Nombre de tu tipografía';
	src: url("Nombre de tu tipografía.eot');
	src: local('Nombre de tu tipografía'), local('Nombre de tu tipografía'), url('') format('woff'), url(Nombre de tu tipografía.ttf') format('truetype'), url('Nombre de tu tipografía.svg#') format('svg');
}

h1 {
font-family: 'Nombre de tu tipografía';
}
h4 {
font-family: 'Nombre de tu tipografía';
}

Comparación entre @fontface y Cufón

Cufón

Ventajas:

1. Compatible con todos los navegadores.
2. Contenido jerarquizado y ordenado.
3. Se pueden dar estilos CSS.

Desventajas:

1. No se puede copiar el texto directamente al portapapeles.

@fontface

Ventajas:

1. Contenido jerarquizado y ordenado.
2. Se pueden dar estilos CSS.
3. Se puede copiar el texto directamente al portapapeles.

Desventajas:

1. Sólo compatible con navegadores con soporte CSS3.

Opinión personal

Yo, personalmente, me inclino por usar siempre tipografías estándares. Considero que una página cuyo logotipo sea solo el nombre con una tipografía especial, en vez de usar imágenes GIF con etiqueta ALT usar Cufón con encabezado de nivel h1.

El uso de @fontface no lo recomiendo en la mayoría de los casos, aunque se podría utilizar en casos en los que no sea estrictamente necesario utilizar ese tipo de letra en particular, como por ejemplo en encabezados de nivel h3, siempre con un tipo de letra alternativo en el atributo fontfamily.

Gracias a Null por su apoyo y su ayuda, gracias a aquellos que soportaron mi ignorancia y los cuales la siguen soportando.

Anrdresuchop

Domingo, 30 de mayo de 2010

Twitter Facebook Feed RSS

www.DocumentoWeb.com - Licencia Creative Commons