Video Game Typography Part I: Effectiveness
This is a series of articles exploring the use of typography in video games, you can find the others parts right here :
- VideoGame Typography Part I: Effectiveness
- VideoGame Typography Part II: Art Direction
- VideoGame Typography Part III: Branding
- VideoGame Typography Part IV: Creating a font (Coming Soon)
The video game Pong (Atari, 1972) is one of the earliest examples that can be found in a game using type as an integral part of the design. Typography was purely used to display scores and other information such as “Press Start”, let know who you are “Player One” or display results such as “Game Over”. Limited technology at the time meant that typography in early video games was incredibly basic and very straightforward in its intentions.
As graphics technology developed typography started being considered a part of the games art direction. An example of this advancement can be seen in ID software’s 1992 title Wolfenstein 3D. The game uses German style bitmap font in the HUD that reflects the games World War 2 setting (specifically being a Gothic castle in Berlin).
Modern video game typography is now woven entirely into the fabric of video games aesthetic going so far as to play a part in branding. Bethesda Studios 2014 title Fallout 4’s promotional materials use the same font that Fallout uses for menus, messaging and HUD.
Further still, the interactive nature of video games has opened up typography even more than part of the visual aspect of the medium but be a part of the game’s mechanic too. Sega’s Typing of the Dead is a zombie shooter but instead of shooting the zombies you were tested on your typing ability. The game would bring up various phrases that you had to type in quickly to eliminate enemies. Typography can now go beyond the visual realm and into the mechanical aspect of any title a designer chooses.
Series Breakdown
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. One extra caveat you have to add when describing video game typography is interactivity. Over the course of 4 blog posts, I will be looking at 4 ways typography affects video game usability, aesthetics, and design. We’re going to break these post down into the following 4 topics as briefly discussed above.
1. Effectiveness
How your choice of fonts reads and aesthetically makes sense to the user.
2. Art Direction
How your typography decisions can enhance the over all art direction of the title.
3. Branding
How video game typography has expanded outwardly beyond the barriers of the in the game world and became the part of the marketing visuals.
4. Creating
We will use all this research in the series blogs and use this research to create our own videogame font.
So that there is the basic premise of this series of blogs about Video game Typography and its application. I hope these blog pieces are interesting and useful to the reader, so without no further ado, let’s begin by looking our first topic: Effectiveness.
Part One: Effectiveness
Usability is the major factor when selecting a font for your game, makes sense as people have to be able to read instructions in order to play it. So when a developer picks a font they are primarily looking for something that is clear enough and is readable. Typography cannot be a barrier that hampers player progression. In order to make sure the font is going to work out its worth double checking this wee list of pointers when picking a font for your game:
- Does the type face have all the necessary characters needed for other languages?
- Is the font too visually complex? Is it capable of conveying information quickly at a glance with a minimal amount of effort?
- Can the font display well at different point sizes?
- Does it have enough font styles (bold, italic etc) that can cover many different situations such as titles and body text?
As long as the font hits the above target’s chances are it will work out but if you ignore the aesthetics of your type face it can throw up other issues. The typographical aesthetic play’s an important part in settling players into the experience by making sense visually with the rest of the game. For example look at this screenshot from Activision’s military FPS shooter Call of Duty Modern Warfare:
You can see a clear readable HUD using authentic military style typography particularly the blue lettering about the characters head on the right, quite similar in form to what you might see on radar screens. Its clear and aesthetically makes sense, now lets see what happens when we change up the fonts:
By replacing the font with this handwritten typeface the readability has been severely affected particularly at the smaller point sizes. But whats more interesting though it’s also affected the mood of the game. This is more of a fun freehand curvy font, it’s the sort of thing you would see on a birthday card or the such like. The weird combination of the realistically rendered military graphics with the friendly jovial typeface seems at odds with each other. So much so you could even be mistaken the game is some sort of comedy/satirical take on the FPS military genre. Of course, this was an extreme exercise to show what happens when you pick the completely wrong font, so it was quite easy to breakdown what went wrong here. We are now going to examine three real world examples of where font choices did or did not work effectively in both usability terms and aesthetically.
1. Bad Usability/ Bad Aesthetics
There is always a chance when you try something new when developing a game that things don’t always quite work out the way you imagined. I believe this is the case with this Troika Games 2004’s RPG pc title Vampire: The Masquerade and its novel approach to how they use type. Being an RPG game Masquerade relies heavily on various encounters that you have with NPC characters conversing to navigate your way throughout the story.
And in these dialog sequences, Masquerade uses a variety exotic fonts to distinguish between different kinds of responses when talking to characters. You can see below that the seduction response has a pink cursive handwritten style font to emphasize a personal and seductive response. In contrast, you can see the intimidation response uses a harsh bold font with jagged edges and is in a very bright green color to illustrate immediacy.
This mechanic is actually quite interesting but it has to be said that the fonts themselves are not too fantastic. They do not particularity look that great and a couple of them are more suited to logo work as opposed to an effective game typeface, but it is a noble attempt at something different. Perhaps some VFX work enhancing regular text would have fared better here, for instance in the seduction option have some love hearts animate on the background of the text?
Not only are the fonts a little distracting but actually hard to read on a decent screen and all but impossible on lower resolution settings. It was so bad that this feature unofficially patched out of the game, just so the game would be readable at certain resolutions. Also, the QA time involved in checking all these font styles fit within defined character limits and in the limited on-screen space for dialogue must have been very time-consuming. It’s clear though the developers were not being lazy with typography in this game sadly it simply didn’t work out!
2. Good Usability/Bad Aesthetic
Squaresoft’s long running RPG series Final Fantasy’s latest IOS title “Final Fantasy Brave Exivus” is a good example that uses a really clear and robust typeface that just seems slightly out-of-place visually. I’m not exactly sure what font they use but it is incredibly plain to the point it’s almost completely void of any character at all. It seems at odds with the usually fantastic art direction and attention to detail that a Final Fantasy game is known for. But it is very clear and works well with different sizes, styles and I presume it has all the necessary characters for localization (different languages).
On the other hand, Nintendo’s IOS title Fire Emblems Heroes another age old RPG series uses the “Chairo STD” font to great effect. Not only is it very clear and readable but it really does fit the feel of the title too. Chairo has been used in previous Fire Emblem titles multiple times and when the game boots up it feels immediately familiar.
I am not sure what font that they use in Brave Exivus but perhaps if they followed the typography work that been going on in the console/PC titles of the series such as Final Fantasy 14, it might have been the more suitable choice. Squaresoft should have put more thought into this decision and to take note of Final Fantasy’s visual legacy. You can see here from Final Fantasy 14 that the font work is not only readable but visually more attractive. The typeface is very clear and its an established aesthetic choice in the Final Fantasy universe.
That bit of extra attention to detail by the Fire Emblems developers made a difference in not only making the game visually more appealing, but it messaged series familiarity. By keeping the font consistent across the titles anyone who has seen or played any other Fire Emblem title will have a visual presence that could possibly initiate familiarity. Quite a nice option to have when operating within the incredibly competitive free to play market
3.Good Usability/Good Aesthetic
Blizzards popular card battle game Hearthstone has excellent typography throughout its design that is not only readable but visually fits in perfectly with the tone of the title. Hearthstone exists in the same fantasy universe as Blizzards incredibly successful massively multiplayer online RPG World of Warcraft. Like this title, Hearthstones setting is that of a very traditional RPG world in the sense that it features wizards, orcs, knights and various other fantasy Tolkien-esque elements.
What’s great about Hearthstones font choice was that they have a very readable fantasy style font that can work at different point sizes really well. If you google search for fantasy typefaces you will find the whole host of them are completely unusable for video game development except perhaps maybe in logo work as they are quite extreme in numerous properties.
To be honest, however, Blizzard didn’t actually use a traditional fantasy style font, they used a typeface called Belwe. The old font named after the creator (famous 1900’s typographer Goerge Belwe) has subtle fantasy treatment applied to it to establish it in this fantasy world. This is an incredibly old font that has been used in many advertisements etc for decades so it naturally has a retro aspect to the font already.
And by adding a few special touches to Belwe the font finds itself leaning toward the fantasy theme very well. Also by using such a well-established font, they know it’s going to work in a variety of point sizes, styles, and languages.
These cosmetic touches to the font such as the uneven black outlines, the wavy path the type follow on the card banner and the aged paper background all take advantage of the fonts naturally aged feel. Blizzard put a great deal of effort and thought into the effectiveness of the typography, also making sure it was thematically sensible. This care and attention to detail are one of the many reasons Blizzard games are so successful as the level of polish on all there titles is excellent.
Conclusion
Making sure you have a readable font that meets your technical needs is the foremost factor when choosing a typeface but paying close attention to aesthetics can benefit the user experience greatly. Typography is one of the first things you see when you load up a game, take care with type and set out to make a good impression with the player straight away. This is particularly important when it comes to free to play titles, to create a high level of polish. After researching into the mobile gaming market it seems to be filled with games that are negligent of typography issues, some titles from even triple AAA developers. Font consistency is also an important factor to take advantage of if you can, it’s to make sure players feel right at home immediately in any way they can. We have looked at quite a lot of examples of different ways readability and aesthetics affect usability but we haven’t really seen examples of the typography enhancing the art direction. We’re going to look at that in the next blog piece, how typography can not only aesthetically feel right but actually enhance the art direction of the overall game.
