Typographic Superpower Game

At the end of the game, players discover their own typographic superpower. Players have the option to share their superpower on social media, access the typeface on Adobe, view similar typefaces, and download their superpower badge.

What We Did

Services

• Research & Concepting
• Project Management
• UX & UI Design
• Front-end Development
• Usability Testing
• Animation Design

Languages & Tools

• Adobe XD
• JavaScript with NuxtJS
• Sass & CSS
• GreenSock Animation Platform

Adobe wanted to make their fonts more searchable, tagged with natural language terms like “organic,” “edgy,” and “calligraphic.” They envisioned a fun and meditative game – a bit of joy in a difficult day – that would let players pick the tags for each font, and give Adobe the tools to track user input. Adobe described it as “a game for people who have feelings about fonts” and requested custom illustrations, animations, and sound design. As typography and game lovers ourselves, the OddBird team was excited to dive in!

Illustrations / Web Graphics

While part of the team began setting up the infrastructure of the game, the designers got to work on illustrations. Sarah Hyndman of Type Tasting provided initial sketches to convey basic concepts and directions based on her extensive typography research. In collaboration with animator Christina Gorton, we established a style – solid, filled SVGs – for easy layer grouping and relatively small file size. In Illustrator, we created unique graphics for ten font questions and five typographic superpowers. A tight back-and-forth via Slack between designers, animators, and Adobe helped us move swiftly through drafting to final designs in order to meet the project deadline.

Audio & Nuxt.js

Audio implementation provided an interesting challenging. First, we tried Web Audio API and a Nuxt.js plugin that automatically played and paused the sounds on each page of the game. When we tested it, the sounds played simultaneously. Uh oh! We switched to HTML5 Audio and added an ID for each question tag. The correct sound played when the ID and tag matched. Yay!

During testing across different browsers and devices, we discovered that our audio solution didn’t work correctly everywhere – returning autoplay errors. We had to get clever. Using HTML5 Audio made recovery trivial if autoplay failed.

controlSound(on) {
  const bg = this.$refs.audioBackground;
  if (bg) {
    if (on) {
      bg.play().catch(() => this.toggleSetting(this.sound));
    } else {
      bg.pause();
    }
  }
},

It was fun collaborating with audio specialist Rob Taliesin Owen of Potion SoundWorks. Adding sound elevated the whole experience of game play.

CSS Custom Properties

Each question in the game has nine options, and each option consists of the same identical image plus a unique font. Instead of using a separate image for each item on the page, we wanted to give Adobe more flexibility to easily edit or add new font options and questions. We used a single SVG, and controlled the text and fonts via HTML/CSS.

First, we used a YAML file containing the questions, answers, and fonts to generate the page in Vue. We soon realized the problem: the type overflowed. Typefaces have a wide array of letter heights and widths. When we placed the typefaces within the illustrations, some barely filled the space while others extended past the edges. CSS Custom Properties to the rescue!

We established a default font-size for each illustration, and called it the --svg-base. Since the illustrations were designed with different orientations and space available for the text, this allowed us to start from a place that worked best to maximize the type.

/* Vue component scoped CSS */
.svg-text {
  --svg-base: 87px;
}

Knowing our goal was to be able to edit each font individually, we wrote some CSS calc() logic to allow adjustments from that base size.

/* Global CSS */
.svg-text {
  /* include fallbacks for each custom property */
  font-size: calc(var(--svg-base, 4em) * var(--svg-adjust, 1));
}

Now we were able to edit how each typeface should scale in the YAML file.

- name: Chapman Bold Extended Italic
  adjust: .675

Using Vue, we converted that data into an --svg-adjust custom property on each font/illustration:

fontStyles() {
  return {
    '--svg-adjust': this.font.adjust,
  };
}

This method was easily replicated across the entire project and allowed us to have more control over the design, while writing less code.

SVG Animation

We were privileged to have Christina join us for this project. Christina worked with our designers to create clean and optimized SVGs for animating. She used the GreenSock animation library to create varied animations for each font question. Each font had a distinct personality built into the animation. Christina worked with the whole team and Adobe to adjust timing and easing on animations. GreenSock made it easier to iterate on animations, helping us to meet the project deadline.

See the Pen Relax Question by @cgorton on CodePen.

Usability Testing

Testing web applications with users for the first time is exciting and a bit nerve-racking. Are we headed in the right direction? We tested the Font Tags Game with users as early in the process as possible – as soon as we had the questions, options, and animations in place, but before adding sounds and superpowers. Since our timeline was tight, we ran half-hour sessions via video with two volunteer designers. Their feedback was invaluable. They caught typeface alignment issues, pointed out confusing language, and helped us imagine new features for phase two. Most importantly, they let us know we were hitting our goals, describing their feelings afterwards as curious, optimistic, empowered, and ready to explore typography!

Launch

Adobe launched the game in October 2020. They were able to begin collecting and analyzing data from users via Google Analytics right away. Visitors reported a fun experience and shared their typographic superpowers on social media.

Adobe you see right through me! “Being too confrontational” 😂 Such a fun game. Check it out!

—@StatUXofLiberty

okay this was actually very cool and fun. good job, adobe 😂 I found my typographic superpower. What’s yours?

—@manic_femme

I got… Funky!! 🤣✨ Of course these lyrics come to mind: 🎵 Shining through the city with a little funk and soul / So I’ma light it up like dynamite, whoa oh oh 🎵

—@froznberry