Tendencias y buenas prácticas en tipografía web

Smashing Magazine es uno de los sitios de referencia a nivel mundial en materia de diseño, realmente te lo recomiendo. Hace poco publicaron un estudio hecho entre 50 webs destacadas por su cuidado y su contenido para deducir cuáles eran las tendencias y buenas prácticas de los diseñadores responsables de cada proyecto. Lo interesante es que lo han podido comparar con otro estudio similar que hicieron en 2009. A continuación os sintetizo —y en la lengua del imperio para que no tengáis problemas— las conclusiones más destacadas para que podáis ir probándolas en vuestros proyectos:

¿Romana o palo seco?

Ah, la eterna pregunta del principiante… a la que solemos responder con el siempre socorrido «depende». Pues bien, si quieres salir de dudas, veamos lo que hacen los grandes:

La disputa anda bastante más apretada que en 2009 cuando el dominio del palo seco era abrumador. De hecho las romanas se están imponiendo para cuerpos de lectura mientras se reparten protagonismo en los titulares. Al final volvemos a los clásicos… pero, ¿a qué se deberá este retorno a los orígenes? Sospecho que detrás de todo esto está la evolución de las webfonts y la enorme oferta que existe ahora; hace 4 años era más difícil poder usar tipografías de pago en diseño web. ¡Vaya! Me acabo de dar cuenta de que estoy dentro del promedio de este estudio (uso un palo seco para titulares y una romana para cuerpo de lectura). Pero me pregunto qué hará la gente de a pié… se me ocurre consultar las estadísticas de Google Fonts, veamos cómo se reparten el cotarro entre las 10 más usadas: 8 palos secos, una romana y una caligráfica. Muy interesante también la gráfica donde se listan las familias más utilizadas: Georgia y Arial ganan de calle a cierta distancia de la Helvética que se mantiene en el podio; pierden puestos a toda pastilla Verdana y Lúcida, mientras la parrilla se llena de webfonts… la verdad es que no me sorprende, hay tipografías muy buenas en la lista. Pero el dato que más me llama la atención es la atomización de la muestra, fíjate la cantidad de resultados que obtiene la categoría «otras». Es un reflejo de la oferta tan amplia de que disponemos los diseñadores —y que aumentará con la inclusión de Typekit en el paquete Adobe Creative Cloud—.

¿Fondo claro u oscuro?

Aquí el panorama no ha cambiado mucho, el fondo claro y las letras oscuras sigue siendo el predominante; lo que sí se aprecia en el estudio es un descenso del contraste conseguido gracias a oscurecer el blanco y aclarar el negro (justo como hago yo en el blog).

¿Qué tamaño usar?

Otra pregunta interesante: en titulares la media del estudio está en los 38 píxeles (que en pantallas normales, de baja definición, equivale a 38 puntos), 10 píxeles por encima de las muestras de 2009; yo he optado por 48px porque estoy usando una versión estrecha —condensed— y me lo estaba pidiendo a gritos para diferenciarse claramente del texto principal y de los encabezados. Mira el gráfico si quieres:

En el cuerpo de lectura también se observa un crecimiento de 2 píxeles, hemos pasado del cuerpo 12 o 14 al 14 o 16. La explicación de este cambio es puramente técnica: los ordenadores se sitúan a mayor distancia que una publicación en papel, que se suele sujetar con las manos. Ese incremento de distancia en tipografía web se ha de compensar con un aumento del cuerpo principal, que en la mayoría de las tipografías se sitúa en 16 píxeles (es el cuerpo que uso yo). Puedes leer el artículo de Oliver Reichenstein que puso en marcha esta tendencia.

Ten en cuenta que este tipo de consejos sirven sólo de guía, siempre tienes que evaluar el resultado y crear reglas nuevas para tu diseño. Si sigues la regla de los 16 píxeles usando Verdana no creo que te entusiasme el resultado. Cada tipografía tiene unas proporciones que te pedirán —si tienes un poco de sensibilidad y de cintura— lo que tienes que hacer, de modo que la Verdana o la Georgia las puedes componer a 14 píxeles obteniendo el mismo resultado que con una Helvética o una Times a 16. En el estudio han encontrado una proporción entre el cuerpo de lectura y titulares de 2,5 de media. Yo uso una proporción de 3 (16 px y 48px) que en mi caso creo que se lee mejor; puedes plantearte también aplicar la proporción áurea (1.618) si quieres aunque conseguirás menos contraste tipográfico. Todo depende de la selección de tus materias primas.

Interlínea

Aquí también hay un cambio respecto a las reglas que imperan en diseño editorial, que sospecho tiene el mismo fundamento que el aumento del cuerpo de texto hasta los 16 píxeles: a mayor distancia, mayor interlínea. Si al diseñar para el papel la interlínea que se considera como punto de partida es un 20% del cuerpo de texto (10/12 por ejemplo) en pantalla se recomienda un 50% (10/15); la media del estudio está en un 46% (o 1,46 por cifrarlo como se hace en HTML con la interlínea, que se establece con una etiqueta CSS llamada line-height). Yo uso esta proporción con lo que obtengo un 16/24 píxeles. Aquí me gustaría investigar un poco más porque es cierto que se agradece una interlínea generosa…

Longitud de línea

Este es otro de los datos que les suele llamar la atención a mis alumnos, que se sorprenden de que haya una regla hasta para eso. De hecho Alfredo, uno de ellos, se ha inventado una regla mnemotécnica estupenda para recordar la cifra mágica: medio twit, 70 caracteres (Bringhurst establece el promedio en 66). Sin embargo el estudio refleja que la media está en 84, quizás en un intento de mantener la proporción en el aumento de cuerpo e interlínea. A mí me parece demasiado, yo intento no pasar de 80. Por supuesto, no verás ninguna web decente con el texto justificado, al menos hasta que se solucione técnicamente la partición y justificación en todos los navegadores.

 ¿Tipografía responsive?

Vaya con la palabreja, no hay manera de traducirla… es una técnica bastante sencilla —aunque tremendamente laboriosa— que permite hacer la maquetación relativa a un determinado espacio o resolución. Dicho de otra manera, permite tener un mismo diseño con medidas diferentes en función del dispositivo que cargue la web: si es un teléfono usará una sola columna, un cuerpo determinado y una navegación más sencilla. Si es un iMac de 27 pulgadas puedes pasar a 3 ó 4 columnas, menús desplegables, etc. Yo lo he hecho con este blog, si quieres ver cómo funciona haz la ventana de tu navegador más pequeña y verás cómo cambia el diseño (o carga el blog desde el teléfono). Un 42% de las páginas estudiadas tienen algún tipo de estrategia responsive, con lo que podrías empezar a investigar sobre el tema y plantearte aprender a hacerlo, porque no es una moda pasajera. Los tiempos están cambiando…

Conclusiones

No te tomes este artículo como un conjunto de reglas inviolables; diseñar consiste en crear reglas adecuadas a cada proyecto. Tómatelo como un punto de partida y recuerda que siempre debes hacerle más caso a tu intuición femenina —o sentido arácnido si se da el caso— que a tus profesores. De hecho, acabo de recordar un artículo genial de mi admirado Gerrit Noordzij que habla justamente sobre este problema: se titula Rule or Law (si no funciona el enlace puedes leer la versión guardada en caché por Google). Te lo recomiendo.