Tradicionalmente, se ha mantenido que las tipografías con remates (serif) facilitan la lectura en grandes bloques de texto (libros, periódicos), mientras que las de palo seco (sans serif) funcionan mejor en cuerpos grandes. Sin embargo, con la llegada de los ordenadores todo cambió. Especialmente con el advenimiento de internet.

Ejemplos de tipografías sin y con remates
Ejemplos de tipografías sin remates (Verdana) y con remates (Palatino)

Usabilidad web y tipografías

Las normas de usabilidad web referentes al uso de la tipografía básicamente se reducían a una: cíñete a las fuentes sin remates. Esto venía debido a la mala calidad de los monitores, que impedía la legibilidad de los textos compuestos en tipografías con serifas, al convertir los caracteres poco menos que en manchas borrosas, especialmente en cuerpos pequeños.

Sin embargo, parece haber llegado la hora de revisar esta norma. El gurú de la usabilidad (y de internet, en general) Jakob Nielsen se plantea en Serif vs. Sans Serif Fonts for HD Screens (inglés) si el desarrollo de las pantallas de alta definición, como la Retina de Apple, pueden hacer que dudemos de esta norma básica del diseño web.

Arial, Helvetica, Trebuchet y, sobre todo, Verdana (creada en 1996 fue la primera tipografía diseñada específicamente para ser leída en una pantalla), ocuparon el primer lugar en las elecciones de los diseñadores web. Las tipografías con remates pasaron a un segundo plano y salvo casos excepcionales, como los titulares de los medios online, prácticamente habían desaparecido de nuestras vidas digitales.

Además de mostrarse razonablemente bien en los viejos monitores de tubo (¿os acordáis de ellos?), hay otro criterio relativo a la usabilidad que «obligaba» a utilizar las tipografías anteriores (más algunas otras como CourierGeorgia o Times New Roman): podían verse en todos los ordenadores del mundo, ya que venían instaladas de serie en todos los equipos.

Si querías utilizar alguna tipografía fuera de la lista de seguras (web safe fonts) tenías que ser consciente de algunas cosas:

  • La página no se verá como tú quieres en una cantidad indeterminada de ordenadores.
  • Tienes que plantear alternativas para asegurarte de minimizar el efecto de que no se ve la tipografía que quieres mostrar.
  • Tienes que utilizar imágenes para componer el texto, con lo que esto supone de pérdida de accesibilidad, posicionamiento en buscadores y ralentización del trabajo.

En esta tesitura, aparecieron algunos sistemas para ofrecer alternativas a los diseñadores, como sIFR. Con una combinación de CSS, javascript y flash, era posible mostrar las tipografías deseadas al usuario al tiempo que se respetaba la accesibilidad. Su única pega es que sólo es útil para pequeños bloques de texto, ya que ralentiza demasiado la carga de las páginas.

Y llegaron las webfonts

Afortunadamente para los diseñadores y para los usuarios, hace un tiempo empezaron a desarrollarse, proliferar y extenderse las webfonts, que permiten utilizar tipografías independientemente de que que el usuario las tenga o no instaladas en sus dispositivos.

Ahora la variedad es inmensa. Si el archivo de la tipografía (generalmente tienen la extensión .ttf u .otf) está subido a un servidor, se puede hacer una llamada a ese archivo y mostrar la tipografía por estilos. Dicho de otra forma y un poco a lo bruto: es algo parecido a cuando se utiliza una imagen, ésta no está incrustada en la página, sino que está en otro sitio diferente y sólo aparece porque se le dice que lo haga.

Sin embargo, la renderización de la tipografía (la forma en que esta aparece en la pantalla) varía mucho en función del navegador y del sistema operativo empleados, como se puede ver en el siguiente ejemplo:

Comparativa de la versión web de la Narziss regular
Comparativa de la versión web de la Narziss regular (izquierda: Safari 5 para Mac OS X; derecha: Internet Explorer 7 para Windows XP). Para ver la imagen en grande, pincha sobre ella. Podéis hacer más pruebas siguiendo este enlace.

Pese a las enormes diferencias de resultados entre las diferentes combinaciones navegador-sistema operativo, las webfonts dan una libertad al diseñador que era impensable hace unos pocos años y la oferta parece crecer por momentos. Incluso algunas, como la Lobster, de Pablo Impallari, han tenido un reconocimiento y una repercusión realmente notables.

La llegada del CSS3 permitió, paralelamente, la utilización del atributo @font-face permitió que los diseñadores empleasen tipografías que no estaban disponibles ni en los listados de webfonts ni en los ordenadores de los usuarios. Así, algunos medios utilizan familias propias, como es el caso de AsCom, empleada en los titulares de la web de noticias deportivas As.com.

Gracias a todos estos cambios, internet se está enriqueciendo tipografícamente hablando (al menos desde el punto de vista de la variedad, el de la calidad se lo dejo a los expertos), algo que redunda en beneficio del usuario, que no percibe que todas las páginas sean iguales.

Únete a la conversación

9 comentarios

  1. Algun día hablaremos de esta época como la prehistoria de la tipografía en web, mas o menos como nos referimos ahora a la fotocomposición o al letraset!
    Queda tanto por avanzar!
    En cuanto a Lobster, hay quien dice que es la nueva Comic Sans.

    1. Y podremos hablar de ella diciendo «yo estuve allí». Eso sí, al ritmo que va todo, espera que eso no sea dentro de cinco años. Entonces no tendrá mérito haber estado 😉

      Sobre Lobster, creo que sí será algo parecido, aunque es difícil que se vuelva tan omnipresente

  2. Manuel, muy interesante esta entrada sobre las tipografías web. Poco puedo añadir de un tema que conozco de oídas pero presente en una parte de mi trabajo. En cualquier caso, para los próximos desarrollos web que nos hagan, lo tendremos en cuenta.

    1. Afortunadamente ahora es muy sencillo. El problema es seleccionar bien las tipografías 🙂

  3. Es muy sencillo y no es sencillo: hay que seguir teniendo en cuenta que lo que se bien en un navegador se ve mal en otro, lo que se ve bien un sistema operativo se ve fatal en otro, que el móvil no es como una pantalla de ordenador, que hay ipads y hay tabletas, en fin, tantas y tantas variables que modifican la lectura, y sobre todo, la posible legibilidad del sitio.

    1. Es muy sencilla la implementación. El resto es muy difícil. Pero nunca fue fácil 🙂

  4. Hola, Manuel:

    He llegado hasta aquí haciendo búsquedas sobre una de mis pasiones, la tipografía. Me parece que tu blog es fantástico. Una pregunta: ¿qué te parecen la Calibri y la Open Sans (ésta última tan popular gracias a los Android)?

    Un cordial saludo,

    Juan Pedro

    1. Hola, Juan Pedro

      Me alegro de que te guste el blog, trato de hacerlo lo mejor posible, aunque sé que es un poco caótico (sobre todo por la temática).

      Sobre Calibri tengo sensaciones encontradas. Me parece correcta y no me disgusta su cursiva, pero no es una tipografía que fuese a utilizar en ningún proyecto. Tiene algo que no me acaba de convencer.

      En cuanto a Open Sans, la caja baja me recuerda demasiado a la Verdana como para que me fije mucho en ella, aunque hay algunos caracteres (J y Q, especialmente) que sí me gustan.

      De todas formas, no soy un experto en tipografía, sólo un aficionado. O un tarado, si le preguntas a mi mujer 🙂

      Un saludo

  5. Algo que hay que tener claro sobre el mundo de las tipografías en la web, es que la tendencia del uso de código se vuelve super necesario para obtener mejores resultados, es por ello que cada día como diseñadores debemos mantenernos al tanto sobre tutoriales y herramientas que nos ayuden a facilitar el trabajo.

Dejar un comentario

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.