Close

How Far We’ve Come

When I sit down and play games on my 1080p HDTV it’s pretty incredible to think about how far we’ve come in the last few decades. From big, chunky bitmapped type on CRT televisions to smooth, crisp text on large high definition screens, newer tech has enabled much higher quality typography and more usable interfaces.

Gauntet II (1986)

Gauntet II (1986)

Consider this Gauntlet II screenshot from 1986 (nearly 30 years ago!). This screen is effectively the game’s tutorial, teaching the player some of the key elements they will encounter.

Color is used to differentiate some of the text, although it seems a bit arbitrary. Everything is jammed together to fit in a limited grid of pixels and so it takes much longer than it should to look at this screenshot and digest everything it’s trying to tell us.

FarCry 4 (PS4, 2014)

FarCry 4 (PS4, 2014)

This screenshot from FarCry 4 serves a similar purpose of teaching the player and demonstrates the role of typography and design in games today. Working with a much larger resolution makes it possible to include clear in-game graphical references. The use of text color is more purposeful and makes the text more scannable.

It’s also using a licensed typeface, Trade Gothic, which was chosen as part of the game’s overall design aesthetic. It’s used throughout the game’s interface to create a particular tone.

FarCry 4 (PS4, 2014)

FarCry 4 (PS4, 2014)

Looking back at NES games you often see the same (or similar) blocky bitmap text used. Licensing typefaces for use in games removes a major design constraint and allows for much better aesthetic variety.

The Legend of Zelda (NES, 1986)

Pixel progression

For the sake of example let’s take a look at Nintendo’s consoles over the years. The original NES ran at a native resolution of 256×240 pixels over a chunky coaxial cable. SNES games ran at variable resolutions with a maximum resolution of 512×448 px. The Nintendo 64 bumped that maximum to 640×480 px. The Gamecube and Wii both maxed out at 480p (852×480 px in widescreen). The Wii U finally made the jump to 1080p (1920×1080 px), which is today’s standard.

(4K displays will be the next wave at 3840×2160 px but I don’t expect that’ll be standard for a number of years.)

Comparison of Nintendo console resolutions to scale.

Comparison of Nintendo console resolutions to scale.

In the Nintendo 64 era you could expect to see text like this:

Super Mario 64 (N64, 1996)

Super Mario 64 (N64, 1996)

And here’s where we are today, in the latest Smash Bros. As you unlock more characters the size of each character’s name gets even smaller, but remains readable.

Super Smash Bros. (Wii U, 2014)

Super Smash Bros. (Wii U, 2014)

Tiny screens with lots of pixels

Mobile devices often run at even higher resolutions, enabling text that appears as smooth as a printed book with the dynamic possibilities of color and motion.

Alto’s Adventure is a great example of a mobile game using typography in a clean, readable way.

Alto's Adventure (iOS, 2015)

Alto’s Adventure (iOS, 2015)

Focus on UI/UX

Increased resolution doesn’t inherently make games better. Fortunately, there’s much more general awareness about usability and user experience among game creators and players.

Larger games often have entire teams dedicated to building just the game’s UI. We also now have decades of game interfaces to learn from, with repeatable design patterns that evolve over time.

Game interface staples like inventory management, skill trees, or the HUD (heads-up display) in racing games have become more refined. Here are just a few “then and now” examples:

Sega GT 2002 (Xbox, 2002)

Sega GT 2002 (Xbox, 2002)

GRID (Xbox 360, 2008)

GRID (Xbox 360, 2008)

Too Human inventory mangement (Xbox 360, 2008)

Too Human inventory mangement (Xbox 360, 2008)

Dragon Age: Inquisition inventory management (PS4, 2014)

Dragon Age: Inquisition inventory management (PS4, 2014)

In-game signage

Increased resolution makes it possible to create more detailed, immersive worlds. This often extends to little environmental details that most players may not notice.

Grand Theft Auto V is a perfect example of this. Throughout the world are fake billboards, posters, signage and storefronts that were all given impressive design consideration. It helps the world feel believable and relatable. This level of fidelity wasn’t possible in previous iterations.

Signage in Grand Theft Auto V (PS4, 2014)

Signage in Grand Theft Auto V (PS4, 2014)

These are opportunities to passively tell a story and extend the world through design. You can walk up to a bookshelf and read the spines of the books, or view with surprising fidelity the “lorem ipsum” text used on this subway map signage.

Signage in Grand Theft Auto V (PS4, 2014)

Signage in Grand Theft Auto V (PS4, 2014)

Call of Duty: Advanced Warfare is also filled with examples of this. In a game where the casual player will breeze right past all of these details it’s impressive to see attention given to things like this Korean restaurant menu with a totally readable names and descriptions.

Signage in Call of Duty: Advanced Warfare (PS4, 2014)

Signage in Call of Duty: Advanced Warfare (PS4, 2014)

During my playthrough of the game I was constantly stopped to take screenshots of this stuff. I’ll elaborate further on some of the best contemporary examples of in-game signage in a separate post but it’s refreshing to see this happening.

What’s next

This is just the beginning of Game&Type. I’m excited to start speaking with folks working in the industry to better understand how game UI is built and how these design decisions are made. We will deeply analyze more examples of UI patterns in games and how different genres have evolved over time and plenty more!

Thanks for joining me. If you’d like to contribute to the site in some way please get in touch.

Stay tuned for more soon and share your thoughts in the meantime!