Tipografía en UI
De Gutenberg a Google Fonts
Un breve análisis de cómo la Tipografía ha evolucionado del papel a las pantallas y su uso en los nuevos formatos de comunicación.
Este artículo no pretende ser un repaso exhaustivo del ámbito tipográfico en sus aspectos más “íntimos” y complejos. Abarcar todo la amplitud de su Forma y Funciones llevaría una vida entera (media para el estudio y la otra media… para escribir este artículo). Tampoco es una guía para su correcta utilización en UI. Mediante un par de ejemplos intentaré analizar su uso en formatos digitales; sin olvidarme de su hermano mayor, el formato impreso, y cómo se relacionan ambos en el Siglo XXI. Ambos hermanos tienen la misma educación, pero se expresan de manera distinta.
A modo de introducción
Del “Página a Página” al hipertexto
En el ámbito de la comunicación los diseñadores siempre hemos tenido tres herramientas básicas:
- TEXTO. Tanto por su carácter y peso visual, como por su inherente valor comunicativo.
- FORMA. Desde las formas geométricas básicas hasta fotografía e ilustración.
- COLOR. Que viste a las dos anteriores.
Desde mediados del Siglo XIV (invención de la imprenta) hasta bien entrado el Siglo XX (invención del sistema de hipertexto) hemos estado acostumbrados a recibir esa información (TEXTO — FORMA — COLOR) de manera secuencial, página a página. Con la llegada del sistema de hipertexto o hipervínculos y las Nuevas Tecnologías, empezamos a recibir esa información de una manera completamente distinta. Ya no recibíamos esa información como un camino recto y trazado sino que surgía un nuevo concepto, interactividad. Desde la publicación de la primera web de la historia en el CERN dedicada al proyecto “World Wide Web” hasta hoy, las posibilidades de comunicación se han ramificado en múltiples direcciones, al igual que nuestra manera de recibir esa información.
Tiempos modernos
O el consumo rápido de información
Desde los inicios del diseño gráfico el uso de la tipografía ha estado muy presente. Hay muchos ejemplos, pero creo que Saul Bass es un buen referente en el uso de las tres herramientas básicas del diseño, entre ellas la tipografía.
¿Que diferencia hay entre los títulos de crédito de Saul Bass y una OnePage con Parallax?

La respuesta creo sinceramente que es bastante sencilla. En la forma son exactamente lo mismo, pero en el fondo son muy diferentes. En ambas se utilizan los tres elementos básicos del diseño de la misma manera y se rigen bajo los mismos principios, pero la intencionalidad es completamente distinta.
Llamemos a ambas “productos”. Lo primero es un “producto artístico”, una forma única de una persona en concreto de interpretar el entorno que le rodea. La segunda es un “producto de consumo”, una forma global de muchas personas de interpretar el entorno que les rodea.
Hoy en día vivimos inmersos en una sociedad que por sus usos y costumbres estamos expuestos a una cantidad ingente de información visual y textual. Vivimos en una sociedad de “ruido informativo” y “consumo rápido”. Sabemos que el cerebro humano no es capaz de asimilar tanta información por lo que tiende a discriminar, y en consecuencia su manera de asimilar información. Cada vez necesitamos más “píldoras de información” o “inputs“ que de manera sintética y rápida nos sigan manteniendo en contacto con la realidad. A su vez, en respuesta a esta evolución, las herramientas (TEXTO — FORMA — COLOR) se han ido articulando para adaptarse al marco en el que actualmente las consumimos.
Thetimes.com
De la gótica a la serifa

Desde la segunda mitad del S.XVIII (revolución industrial) el mundo ha experimentado una explosión en los medio técnicos para la producción en masa. Desde entonces nuestro entorno se ha llenado de “productos” de una manera exponencial que empezó a cambiar el estilo de vida de la sociedad occidental y en repuesta a esta nueva situación, a principios del Siglo XX se empezó a pensar el diseño desde un punto de vista funcional (escuela de La Bauhaus) en detrimento de su uso decorativo y ornamental. Corrían los años 30 cuando Stanley Morison escribió una carta a de The Times criticando su diseño obsoleto y anticuado. Hasta el momento el diario había utilizado un estilo de letra gótica inspirada en la caligrafía del medievo y decide contratar a sus más ferviente crítico para diseñar una tipografía más acorde con los tiempos. Nace la Times New Roman, una tipo que consigue más legibilidad y economía de espacio al ser más condensada y de formas más contrastadas. Aunque es una tipografía rechazada por los diseñadores al estar incluida durante muchos años en los procesadores de texto como fuente por defecto, es indudable su aportación al ámbito de la comunicación.

The Times ha cambiado en contadas ocasiones levantado bastante expectación. A finales del 2006 se produjo su último rediseño importante (tanto impreso como digital) a manos de Neville Brody. Entre esas mejoras (arquitectura de información, navegación etc.) fue otro rediseño más de la tipografía el que aquí nos ocupa. La Times Modern sigue las mismas bases de Morison, estilizándola aún más y compactándola para su correcta visualización en los nuevos formatos. La idea era rediseñar la tipo para que funcionara correctamente tanto en papel como digital y mantuviera el espíritu del diario sin renunciar al valor histórico de su propia tipo. Se amplía la familia con nuevos niveles para conseguir jerarquizar mejor la información y se introducen tipos “sans-serif” o palo seco para tamaños mínimos, botones y etiquetas para mejorar la legibilidad y diferenciar lo que es información de navegación. The Times es un ejemplo de cómo ambos hermanos (papel/pantalla) han evolucionado a la vez y se retroalimentan para comportarse correctamente en cada formato y adecuarse a las nuevas formas de consumo de información.
Cntraveler.com
Viajando con tipografías

Traveler tiene una larga tradición dentro de las publicaciones de viajes y hace unos años también sufrió un rediseño tanto en papel como en pantalla.
Utiliza una tipo con serifa, estilizada y compacta para imprimir ese carácter “nostálgico” de los viajes. La composición es equilibrada, los distintos niveles de información textual y visual dejan grandes espacios vacíos de información para centrar la atención del usuario.

Las publicaciones impresas suelen tener mayor volumen de información que sus versiones digitales, dado que los contextos en que se utilizan son diferentes. El texto no se trata en su mayoría como contenido, sino que trabaja orientado hacia el usuario, en este caso adquiere una funcionalidad de “ayuda visual” para conseguir esos “inputs de consumo rápido” anteriormente citados. El texto ya no se trata únicamente como contenido sino como un elemento más de la interface de usuario.
Misma educación, distintas formas de comportarse
Es interesante ver cómo el uso de la tipografía en papel y en pantalla se ha ido retroalimentando a lo largo de estos últimos años. Cada vez es más frecuente ver en diseño editorial impreso estructuras visuales parecidas a muchas webs de referencia que nos podemos encontrar hoy en día. No creo que sea una casualidad, ya que el papel (aunque de una manera más lenta) también quiere adaptarse a esos parámetros de consumo rápido de información a pesar de que su propio formato físico y finito sea un lastre. La tipografía ya no solo se comporta de una manera u otra dependiendo de su valor emocional, visual o informativo, sino que añade a ese comportamiento una finalidad, que no es otra que la interacción con el usuario.
