Text Font

Many games get text font wrong. The font used to convey information in a game is tremendously important, not only in terms of readability and legibility (for a nice discussion of that topic, see the Fonts.com article on legibility), but in terms of personality.

Good games flow because everything is cohesive — the visuals fit the storytelling, which fits the music, and animation, and level of difficulty. In indie games the text font is an element that’s overlooked more often than not. A font that’s out of place can kill the atmosphere of a game. Here’s an example:

This is a screen shot from the opening sequence of an indie game called Valdis Story. Instead of focusing on the story being told, I was thinking: “Arial? Really?”

The text looks slapped on — I can tell instantly that whoever did this portion of the game doesn’t know anything about typography because they chose a font that is generic, inappropriate, positioned incorrectly, and not kerned. How do I know that? What is kerning? That’s a separate topic, that I’ll touch on in my Contours of Knowledge post. You’ll find, if you look, that whole oceans of knowledge exist that you were blissfully unaware of. Fun fact: I’m using the term “font” incorrectly, and you probably use it wrong too! The term I should use is “typeface.”

In any case, even if the player isn’t a typographer, the lack of cohesion leaves an impression in his subconscious mind that says: “this doesn’t look like a professional game.” He doesn’t know why he knows it, but he knows it.

Note about Valdis Story

I didn’t call Valdis Story out to pick on the team who made it. I called it out because it was a fantastic example of an otherwise really strong, polished-looking game that faltered with its chosen typeface. In fact, the visual style of Valdis is quite compelling. Here is the title screen which comes immediately after the screen shot above:

The type choice here is much more appropriate. Despite issues with the readability of the menu text, the words do feel cohesive with the other visuals.

Keep up the good work guys!

Personality vs. Transparency

The challenge in choosing a typeface is to find something that conveys the personality of your game while remaining “transparent.” If you read the article on Fonts.com that I linked above, you’ll know that “transparent” means that the reader doesn’t even notice it: his brain absorbs the text straight into meaning without any distracting thoughts like: “Boy, that white is harsh!” or “The text is tiny, I can barely read it!”

The mistake many beginners make when they choose a typeface for personality, is to choose one that is not transparent. Be careful that the typeface you choose isn’t too “loud.” The most important thing here is to convey meaning effortlessly, so the text just “feels” right on the screen, and the player absorbs it without extra thought. So the question to ask yourself is: is this face readable on the screen? Can I see it without squinting? Can my grandmother see it without struggling?

To achieve complete transparency, you have to find a face that’s both readable and thematically appropriate, otherwise our brains will struggle to decipher the glyphs, or we’ll be jarred by the lack of cohesion. Remember, the ultimate goal is to convey meaning without the player noticing the text at all.

Basic Guidelines

• The fonts installed by default on your computer are probably too generic. They are either cheap knockoffs of classic faces (e.g. Arial is a knock off of the timeless “Helvetica“), or they are so over used that your player will notice. How can a face fit into your epic medieval setting if it’s the same one I just used to write a term paper?
• Long lines of text are bad. Depending on the vertical distance between the lines (called “leading” and pronounced like the periodic element, not the verb “to lead”), the optimum number of characters per line of text is around 66. That’s not very wide! If you need to have longer lines for some reason, increase the leading. Standard leading is 120% of the font size. Increase it to 140% if the line gets long, but ideally, just keep the line shorter.
• Maintain high contrast between the text and the background. This is a precarious balance. You need to make sure the text is crisp so it’s readable. You also need to make sure it’s not harsh so it doesn’t strain your players’ eyes. When in doubt, err on the side of harsh, but be careful!
• Serif faces (with tails, like Times New Roman [a face you should never use]) are generally more legible than Sans Serif faces (without tails, like Arial [a face you should also never use]). The reason is that the “serifs” or tails provide a visual clue as to what the letter is, and define the shapes of words more clearly. A word of caution, however: Serifs were generally designed for print media, so the tiny details pixelate badly on screen. There are serif faces that were designed for the screen, but if you’re not sure what you’re doing you are better off choosing a sans serif face for on-screen text.
• Text faces are not the same as display faces. In free resources they may not make a distinction, but if you look around at a professional type foundry catalog online, you’ll find faces categorized by text and display. “Text” is used for blocks of text, like a book or the body copy of a website. A good example is “Bodoni Twelve” by the ITC Type Foundry, which is widely used to typeset novels because it’s extremely legible in print. “Display” is used for headings. These are made to be viewed at larger sizes than text faces, and legibility generally suffers at smaller sizes. Similarly, text faces used for titles often look flimsy and out of place at larger sizes.

Kōtiro Text

A sensible thing to do when searching for the right font is to look at the historical writing from the culture you’re trying to convey. Russian writing has a distinctive, blocky look to western eyes, and many English fonts try to approximate it. Practically any culture you can think of has English fonts that are meant to mimic the look of the native writing (those links were for argument’s sake, use the faces you find there at your own risk!). That can get old fast because it’s a tired gimmick. Generally, you should limit that type of face use to display only. Often, a heading that looks like the writing of the culture is enough to prime the reader to accept the otherwise plain-jane text face as also looking culturally appropriate.

For my game, this strategy cannot really work. The Māori never really invented writing. They use pictorial carvings on their buildings and totems to convey stories, but they didn’t create an alphabet per se. As the native, tribal people of New Zealand the Māori lived close to the land, building tools out of stone, and the plant material they could find in nature. My goal is to find a font that feels “Humanistic” or hand-made. I want to shy away from faces with harsh geometry, so my challenge is to discover a face that is probably sans serif (often more “geometric” and harsh than serif), yet soft.

I dug into my ITC face collection, and pulled out a few candidates. Benguiat, Biblon, Caslon, and Humana made my short list. In the end, the first three look too “roman.” You can imagine what “roman” means with regard to type faces if you remember what the engravings on Roman building looked like. These ended up being too formal, and too western. They were jarring, and I doubted their ability to translate readably to the screen. Humana stood out as a good candidate, but the readability wasn’t right because the serifs pixeled badly on screen. Luckily ITC has both a Humana and a Humana Sans!

Humana Sans combines a “hand made” look with the simplicity it needs to display cleanly on the screen.

Here’s the final study I did using a selection of Humana faces:

Humana Sans Medium seems to be the most readable, with Humana Sans Bold coming in second. The white text seems to work against the dark, semi-transparent background. The italic versions don’t work well for emphasis (can you spot the italic sentences?), but the yellow color contrasts nicely with the background (fun fact: the colors with the highest contrast are not white and black as you might expect, but yellow and black).

For now, I’m satisfied with the choice of text face, and I’ll be exploring display face options later.

Final Note: If this whole discussion is just too much to think about, you can always ask for help! Just like there are communities for game makers, there are communities for type experts. Go find one of those communities, and I’m sure someone there will help you select an appropriate face if you tell them what you’re trying to accomplish and you ask nicely!