Tipografía y videojuegos

Tipografía y videojuegos

No es habitual encontrar demasiada información vinculada al diseño de interfaz de usuario para videojuegos. Menos aún específicamente relativa al uso de la tipografía. Áreas en ocasiones olvidadas por los desarrolladores y diseñadores de videojuegos que, sin embargo, han ganado en profesionalidad y atención con el paso de los años. En este post, tratamos de aportar nuestro granito de arena entorno al uso de la tipografía y aquellos aspectos a tener en cuenta a la hora de seleccionar tipografía para nuestros proyectos.

En general, deberíamos considerar dos factores: el funcional (que la tipografía cumpla con su cometido, que sea fácil de leer, que tenga el tamaño apropiado y que se exponga de la manera adecuada) y el estético (que no desentone con el carácter general del juego y su dirección de arte). Lógicamente, no todo se limita a escoger la tipografía adecuada, sino también a hacer un buen uso de la misma. Una mala elección puede tener malas consecuencias, pero una buena elección requiere también de un criterio posterior.

Lógicamente, no podemos explicar todo lo necesario e importante sobre el uso de tipografía en un único post, así que para ilustrar algunos puntos de forma amena, analizamos algunos ejemplos relacionados con videojuegos reales.

Ejemplos propios


1. Go Deeper

Typography - Go Deeper
En Go Deeper empleamos la fuente Miso, de inspiración arquitectónica y diseñada por Mårten Nettelbladt. Las razones fundamentales para elegir Miso fueron las siguientes:

  • Es una fuente muy económica y su precio no tiene apenas impacto sobre el presupuesto del proyecto.
  • Es una fuente condensada, que ahorra mucho espacio horizontal. Adecuada para situaciones donde no disponíamos de demasiado espacio para plantear un texto. P.e. en los tutoriales, las fichas de enemigos o los paneles de transición entre áreas (ver imagen superior). Esto nos permitía aumentar el tamaño de la letra lo suficiente para que fuese perfectamente legible en cualquier dispositivo móvil.
  • Estéticamente, hay una correlación entre el estilo de los personajes y el diseño de la tipografía: alargada y redondeada. De esta manera, la fuente convive con el resto de elementos visuales de forma integrada (ver imagen superior). Dicho de otra forma, los personajes ‘parecen proceder del mismo mundo que los caracteres tipográficos’.

Miso no es una fuente demasiado legible en caja baja (minúsculas), por lo que la empleamos únicamente en mayúsculas, decisión que habría sido discutible en un contexto diferente. Por suerte, los textos en Go Deeper son mayoritariamente cortos y no requieren de lecturas continuas.

——

2. Unlocked!

Typography Unlocked!
Unlocked! es un juego desarrollado por Periferia Creative junto a Desfici, en el que estuvimos implicados en términos de creación del concepto, game design, dirección de arte, diseño de interfaz de usuario, diseño de personajes, animación, creación de niveles, testing y supervisión del desarrollo. Un juego al que tenemos una gran estima y que visualmente se movía entre el diseño de apps lúdicas y el videojuego puro y duro, con un interfaz plano y sencillo, donde la tipografía tenía una importancia seria. Empleamos la muy popular familia Knockout, teniendo en cuenta que:

  • Dispone de multitud de variantes de peso y condensación, por lo que siempre encontramos un estilo que encaje en una situación determinada.
  • Es reconocible, legible y con un fuerte carácter dentro de las fuentes sans-serif. Aspecto importante, ya que en determinados momentos del juego, la información textual es la protagonista.
  • El aspecto de sans-serif ‘americana’, con un marcado acento editorial, aporta un matiz a la historia de ladrones y misterios tejida en el juego.

——

3. Tripl3Squad

Typography Tripl3Squad
Para nuestro próximo proyecto, Tripl3Squad, hemos escogido ARS Maquette para la exposición del 95% de textos del juego. Una opción bastante formal que contrasta con el carácter colorista, abstracto y desenfadado de los gráficos. Los textos generales se complementan con el uso de Arete Mono, una fuente monoespaciada de aspecto duro y mecánico que empleamos en el logotipo y otros textos de apoyo. En este caso, tratamos de armonizar el diseño, equiparando el propio aspecto de la fuente con la construcción de los elementos in-game.

Podemos decir que usamos ARS Maquette en situaciones en las que necesitamos una fuente formal bien construida y que pueda ofrecer información textual de forma eficiente, mientras que Arete se emplea de una manera más plástica.

En ocasiones, optar por una opción menos arriesgada y lo más correcta posible dentro del contexto del juego es la forma más segura de no fallar en el uso de la tipografía.

Algunos ejemplos de otros desarrolladores


1. Guacamelee

Typography Guacamelee
Guacamelee (uno de nuestros juegos indie favoritos de todos los tiempos) hizo un uso sencillo y contenido de la tipografía, en nuestra opinión, acertado. En Drinkbox Studios optaron por ser discretos y simplemente escoger la fuente adecuada y exponerla de la forma más sencilla y directa posible. Una fuente más cómica o desenfadada habría roto con la elegancia formal y el espléndido acabado del juego. Una fuente excesivamente formal, habría desentonado con el carácter general del mismo.

Supieron seleccionar una fuente egipcia/mecana (¿quizás Bitter Bold?) con un equilibrio adecuado entre fuente contemporánea y clásica, expuesta sobre globos de diálogo de colores planos. Un buen contraste para un juego visualmente excesivo y vibrante. Complementaron los textos generales con una tipografía en caja alta, divertida y angulosa para marcadores de puntuación y otros textos con impacto (ver imagen superior) que encajaba perfectamente con el estilo general del juego.

——

2. Catherine + Persona 5

Typography Catherine & Persona 5
Con los años, algunos desarrolladores se han ido lanzando más y más con el uso de la tipografía. Poco a poco, las empresas y estudios de videojuegos han ido contratando a diseñadores de UI para ocuparse específicamente de estas labores, con un incremento notable en la riqueza en el uso de la tipografía.

Compañías como Atlus han hecho gala de interesantes ejemplos de diseño de interfaz, donde las opciones de navegación se mueven en 3 dimensiones en lugar de 2, la tipografía está integrada en ocasiones con otros elementos gráficos del juego y se dota a la exposición de información de una gran profundidad y carisma. Muestra de ello es, p.e. Catherine (PS3) o el reciente Persona 5, que ha levantado gran admiración al respecto.

——

3. Kentucky Route Zero

Typography KR0
No podía faltar en esta pequeña selección de casos una aventura gráfica, teniendo en cuenta la importancia de la tipografía en este tipo de juegos. Kentucky Route Zero llamó nuestra atención por su valentía a la hora de exponer sus textos usando una tipografía monoespaciada de forma cruda, sin ningún tipo de suavizado, muy espaciada, extremadamente delgada y siempre con un contraste máximo (blanco o colores brillantes y saturados sobre negro) y un perfecto tamaño de lectura.

En cualquier otro caso, habría podido parecer casi burda, pero en el contexto general de KR0, resulta un acierto, acorde con el sistema de iconos empleado en el juego y, en general, con todo el desarrollo visual del proyecto. Una decisión atrevida y aparentemente simple pero que en nuestra opinión encierra un buen criterio tipográfico.

——

4. Wipeout

Typography Wipeout
Para terminar, un clásico. Wipeout fue una de las primeras sagas que empezaron a tomarse en serio el diseño de interfaz de usuario, la tipografía y, en general, el diseño gráfico asociado al producto. No como una simple necesidad funcional, sino como un elemento identificativo más. El paso de los 16 a los 32 bits trajo consigo juegos con resoluciones superiores que permitían hacer uso de fuentes más elaboradas. Para este ya mítico proyecto, Sony contó con la ayuda del desaparecido estudio The Designers Republic, auténticas estrellas del diseño gráfico, especialmente durante los años 90.

La tipografía convivía de forma espléndida con el resto de elementos de interfaz, futuristas y rompedores, que simulaban el panel digital de cualquiera de las naves protagonistas (ver imagen superior). El interfaz pasó por varias revisiones a lo largo de sus distintas partes. Personalmente, creemos que Wip3out sigue siendo la más brillante en su simplicidad. Al contrario que en muchos juegos actuales, la tipografía ocupaba un gran espacio dentro del interfaz general del juego, siendo muy visible en todo momento.

Podríamos analizar grandes ejemplos durante años, pero…

En resumen:

  • La tipografía no es trivial, así como no lo son el resto de elementos de interfaz gráfica de usuario.
  • Escoger una tipografía adecuada es una decisión importante, especialmente en juegos donde la presencia de textos sea importante. Pero también lo es utilizarla de manera correcta en su contexto.
  • Los aspectos funcionales están por encima de los estéticos, pero los casos brillantes son aquellos que alcanzan un equilibrio adecuado entre ambas cosas.
  • Un uso original e interesante de la tipografía puede convertirse en un elemento de identidad importante en tu proyecto.

¿Conoces más juegos en los que el uso de la tipografía haya sido especialmente relevante o cuidado?

Raúl Gil
Post by

DB&R Art director & Game designer

See more posts by this author