La gran problemática del diseño web actual entre otras cosas es la tipografía. Considerando que para la correcta y rápida indexación en los motores de búsqueda, es primordial que el texto esté presente en el código HTML de la página, es que se han logrado progresos significativos en cuanto al uso de tipografía no convencionales. Hace un par de años los diseñadores teníamos que recurrir a métodos actualmente obsoletos para fortalecer el diseño y no quedarnos solamente con lo básico a nivel tipográfico que los navegadores nos podían ofrecer. Uno de esos métodos era el uso de imágenes remplazando el texto. Sin embargo en nuestro código cada uno de esos textos que generalmente eran títulos no estaban presentes lo que actualmente es una pésima solución para que nuestra página sea encontrada y además atentando fuertemente a la semántica de nuestro código.
Entre las nuevos métodos que permiten utilizar tipografía no convencional en nuestra página hay dos que destacan, teniendo cada uno tiene sus ventajas y desventajas que describiré a continuación.
@font-face
El primero es la propiedad @font-face de CSS3 que se trata básicamente de incrustar fuentes a través de la importación via URL de donde la fuente está hosteada, he ahí el sentido del @ en la propiedad. Este método parece ser perfecto sobretodo cuando trabajamos en mac, podemos ver por ejemplo una Helvetica renderizada de un modo casi perfecto, hasta con bordes suavizados. No obstante los resultados no están lejos de los problemas y por ende lejos de la perfección y pasa esto básicamente debido a que no todas las fuentes tipográficas pueden ser representadas del mismo modo por todos los navegadores, sin considerar que esta propiedad además es ignorada por Internet Explorer y el tiempo que tarda en mostrarse dependerá de la velocidad de conexión porque cabe recordar que el archivo fuente está hosteado y se debe cargar al igual que una librería, imagen o cualquier objeto de nuestra pagina para luego ser interpretado por el motor de nuestro navegador. Sin embargo es una posibilidad bastante válida si nuestro foco no es tan ambicioso de perfección.
La forma de implementar font-face es muy fácil. Solo debes hostear el archivo de la fuente y luego la URL se utiliza de la siguiente forma:
@font-face {font-family: Quicksand; src: url('HelveticaStd.otf');}
h1 {font-family: "Helvetica", Gil Sans, arial, sans-serif;}
¿Ventajas?
- Se puede usar cualquier fuente tipográfica
- La representación a pesar que puede variar entre algunos navegadores no es algo tan significativo
- Se aplica usando pocas líneas de código
- No se necesitan librerías adicionales ni nada parecido
¿Desventajas?
- Uno debe hostear la fuente y la carga dependerá de la velocidad de conexión
- No todas las fuentes que se utilicen son de licencia libre, por lo cual se debe tener cuidado, considerando además que las fuentes libres no todas tienen la misma calidad de las pagadas
- La propiedad font-weight no se representa de forma adecuada para cualquier fuente.
Google web fonts api
La otra gran forma de conseguir que nuestra web se vea ‘cool’ usando fuentes tipográficas especiales es a través de la API de Google, que básicamente consiste en un servicio gratis y que por lo demás se lleva toda la carga debido a que las fuentes no estan hosteadas por nosotros mismo, sino que se encuentran en Google. Además el catalogo disponible está libre de licencias. Se puede utilizar restando inmediatamente un costo adicional por pago de una fuente tipográfica. No se necesita importar un archivo o escribir código adicional ni preocuparse de la correcta interpretación en los diferentes navegadores, todo eso ya está solucionado. No obstante el catálogo aún es reducido pero crece a diario constantemente.
La manera de implementar esto en nuestro codigo HTML es de la siguiente forma (ver recuadro)
<head>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<style>
h1 { font-family: 'Permanent+Marker', arial, serif; }
</style>
</head>
¿Ventajas?
- No tiene costos
- No se necesita hostear nada, por consecuencia descargar tampoco
- Escasos problemas de representación en diferentes navegadores
¿Desventajas?
- No están todas las fuentes que uno desearía
- Falta definir un estandar para asegurar una mejor calidad en todas las fuentes
De todas maneras ya podemos estar más tranquilos los diseñadores porque en la web actual, la tipografía no es una limitación y aparte de estas dos técnicas expuestas, hay algunas otras que siguen día a día mejorando.
También en http://www.ricardoalfaro.cl/blog
