tipografías

Uno de los problemas que nos encontramos los diseñadores y/o desarrolladores web es el de utilizar tipos de letra en nuestros sitios web. En un proyecto profesional, el punto de partida debería ser un diseño ad hoc, o sea, totalmente personalizado y adaptado a las necesidades del proyecto (cliente). Y es aquí donde nos encontramos con el problema de las fuentes… y sus limitaciones.

No es la primera primera vez que la selección tipográfica en un diseño me cuesta algún dolor de cabeza, incluso alguna discusión, cuando el proyecto web lo realizo con algún profesional del diseño gráfico. ¿Por qué? Pues muy fácil: para que el texto de una página web se vea tal cual está en el diseño, los visitantes deben tener instaladas dichas fuentes en su equipo. De no tenerlas, éstas serán sustituidas automáticamente por una fuente del sistema, con lo que perdemos el control sobre la apariencia de nuestra web.

Ante este problema siempre se ha optado por una solución ciertamente «castrante«. El uso de las llamadas safe fonts o fuentes seguras. Esta técnica está basada en la llamada, vía CSS, a pilas tipográficas, consistentes en referencias a fuentes instaladas en cualquier plataforma (Windows, MAC, Linux) o, en su defecto, alternativas más o menos equivalentes. A algunos de mis lectores les sonara una declaración como esta:

font-family: arial, helvetica, sans-serif;

Muy bien, pero ¿qué quiere decir esto?. Pues básicamente que queremos que esa parte o partes de la página se muestren en tipografía arial. Si el visitante no tuviera esa fuente instalada en su equipo, el texto se mostraría en helvética (en MAC, por ejemplo), para, en su defecto, mostrarse una tipografía sin serifa (de palo seco). Con esta técnica nos aseguramos de que las tipografías de nuestras páginas se vean igual (o casi) bajo cualquier plataforma, lo que no impide que tengamos un abanico de posibilidades bastante limitado. Aquí tenemos una lista de las fuentes seguras.

Sin embargo, desde hace un tiempo, existen alternativas que nos permiten ser más creativos a la hora de utilizar tipografías en nuestros sitios web. A continuación describo algunas de ellas:

• sIFR (Scalable Inman Flash Replacement) Este sistema se basa en la incorporación de cualquier fuente que deseemos a través de un archivo de Flash, que se cargará en el servidor del sitio web. Posteriormente será Javascript el encargado de transformar esos ficheros SWF (flash) en texto ordinario que, por lo tanto, podrá ser seleccionado y localizado por motores de búsqueda como Google. ¿El problema? que el usuario no tenga el Flash instalado en su equipo y el funcionamiento en algunos dispositivos móviles… además de cierta ralentización de la página. Para más información podéis echar un vistazo a la wiki de sIFR.
• @Font-face Estamos ante la opción más exitosa a la hora de usar tipografías más allá de las safe fonts. Hasta hace pocos años esta opción resultaba un poco aventurada debido a que no todos los navegadores daban soporte a esta opción del CSS. Pero hoy en día las estadísticas de uso de navegadores nos permiten dar un paso al frente.
• 

  Google web fonts

  Esta técnica, basada en el uso del CSS y en la subida de los ficheros con las tipografías a nuestro servidor, añadiendo un poco de código a nuestros ficheros. Pero lo más interesante es que podemos acceder a repositorios de fuentes web como Google Fonts, con tipografías de uso gratuito. (Ojo con utilizar la fuente que no de la gana… eso no es gratis!!)

• 

  Logo Typekit

  Typekit es otra manera sencilla de implementar fuentes en nuestra web. Recientemente adquirida por Adobe, es solución de bajo coste que da acceso a una amplia gama de fuentes.

• Además, en lugar de cargar una gran cantidad de ficheros al servidor, sólo tenemos que seleccionar las fuentes necesarias desde el sitio web de Typekit, donde están todos alojados. Un consejo: establecer fuentes de reserva en las pilas tipográficas para aquellos usuarios que tengan desactivado el javascript. Web de Typekit
• Existen otras alternativas como Font Squirrel, pero de eso ya hablaremos otro día.