It is unusual to find much information related to user interface design for video games. Even less specifically on the use of typography. Areas sometimes forgotten by developers and game designers that, however, have gained in professionalism and attention over the years. In this post, we try to contribute our bit around the use of typography and those aspects to consider when selecting a typeface for our projects.
In general, we should consider two factors: the functional one —that the typography fulfills its mission, is easy to read, has the proper size and is exposed in the right way— and the aesthetic one —which does not clash with the general game mood and art direction—. Of course, not everything is limited to choosing the right typography, but also to make good use of it. A bad choice can have bad consequences, but a good choice also requires a further criterion.
Logically, we can not explain everything necessary and important on the use of typography in a single post, so to illustrate some points in an entertaining way, we analyze some examples related to real games.
We used the font Miso in Go Deeper. A font of architectural inspiration, designed by Mårten Nettelbladt. The fundamental reasons for choosing Miso were:
- It is a very inexpensive font and its price has almost no impact on the project budget.
- It is a condensed font, which saves a lot of horizontal space. Suitable for situations where we did not have much room to raise a text. I.e. in the tutorials, the enemies’ sheets or the transitional panels between areas —shown above—. This allowed us to increase the font size enough for it to be perfectly legible on any mobile device.
- Aesthetically, there is a correlation between the style of the characters and the typography design: elongated and rounded. Thus, it coexists with other visual elements in an integrated manner —shown above—. In other words, the games’ characters ‘appear to come from the same world that the typographical ones’.
Miso is not a very readable font in lower case (small letters), so we use it only in upper case, a decision that would have been moot in a different context. Luckily, Go Deeper’s texts are mostly short and do not require continuous readings.
Unlocked! is a game developed by Periferia Creative along with Desfici, in which we were involved in terms of concept creation, game design, art direction, user interface design, character design, animation, level creation, testing and development monitoring. A game we have a great esteem for and visually moving between a playful app and pure video games, with a flat and simple interface where typography had a serious importance. We used the very popular Knockout family, considering that:
- It has several variations of weight and condensation, so we always can find a style that fits in a given situation.
- It is recognizable, readable and with a strong character within the sans-serif fonts. An important aspect, considering that in certain moments of the game, the textual information is the protagonist.
- Its ‘American sans-serif’ appearance, with a marked editorial accent, brings a nuance to the story of thieves and mysteries woven into the game.
For our next project, Tripl3Squad, we have chosen ARS Maquette for the exhibition of 95% of the games text. A fairly formal option that contrasts with the colorful, abstract graphics and casual character of the graphics. General texts are complemented by the use of Arete Mono, a monospaced font of hard and mechanical aspect, used for the logo and other supporting texts. In this case, we try to harmonize the design, matching the appearance of the font with the construction of the in-game elements.
Let’s say we use ARS Maquette in situations where we need a well-built formal font able to provide textual information efficiently, while Arete is used in a more plastic way.
Sometimes opting for a less risky and as correct as possible option within the context of the game is the surest way not to fail in the use of typography.
Some examples by other developers
Guacamelee —one of our all time favorite indie games— made a simple and unobtrusive use of typography. In our opinion, a wise decision. Drinkbox Studios chose to be discreet and simply pick the appropriate font and expose it as simply and directly as possible. A more lighthearted or comic font would have broken with the formal elegance and splendid finish of the game. An overly formal one, would be out of tune with the general spirit of the game.
They knew how to select an Egyptian/Meccan font (perhaps Bitter Bold?) with an appropriate balance between contemporaneity and classicism, exposed on the dialog balloons over flat and saturated colors. A good contrast for a visually excessive and vibrant game. They supplemented the general texts with an upper-case, funny, angular typography for score markers and other texts with impact —shown above— that fit perfectly with the overall style of the game.
Over the years, some developers have been more and more daring and bold with the use of typography. Gradually, companies and game studios have been hiring UI designers to deal specifically with these tasks, with a notable increase in quality in the use of typography.
Companies like Atlus have displayed interesting examples of interface design where the navigation options move in 3 dimensions instead of 2, typography is sometimes integrated with other graphic elements of the game and the information gains a great depth and charisma. Proof of this is, for example, Catherine (PS3) or the recent Persona 5, which has raised great admiration in this regard.
A graphic adventure had to be among this small selection of cases, considering the importance of typography in such games. Kentucky Route Zero caught our attention for its courage in exposing their texts using a monospaced typeface in a raw form, without any antialiasing, very spaced and extremely thin, but always with maximum contrast (white or bright saturated colours over black) and a perfect size for reading.
In any other case, it might have seemed almost crude, but in the overall context of KR0, it was a wise move, matching the icons system used in the game and, in general, with all the visual development of the project. A bold and seemingly simple decision but, in our opinion, revealing a good typographic criterion.
Finally, a classic. Wipeout was one of the first sagas that began to take seriously a game’s user interface design, typography and, in general, all the graphic design associated with the product. Not as a mere functional necessity, but as an identifying element. The transition from 16 to 32 bits brought games with higher resolutions allowing the use of more complex fonts. For this mythical project, Sony hired the late studio The Designers Republic, real stars of graphic design, especially during the ’90s.
Typography coexisted splendidly with the other futuristic and groundbreaking interface elements, simulating the digital panel of any of the protagonists ships —shown above—. The interface went through several revisions along its different parts. Personally, we think Wip3out remains the most brilliant part in its simplicity. Unlike many current games, typography occupied a large space within the general interface of the game, being very visible at all times.
We could analyze great examples for years, but …
- Typography is not trivial. And the same goes to any other elements of a graphical user interface.
- Choosing an appropriate typography is an important decision, especially in games where the presence of texts is important. But so it is to use it correctly in its context.
- The functional aspects are above the aesthetic, but the brilliant cases are those that reach a proper balance between the two.
- An original and interesting use of typography can become an important element in your project’s identity.
You know more games in which the use of typography has been especially relevant or interesting?