There seems to be an oft-overlooked design element in games that are made by the beginner, even by some of the bigger studios in game design: typeface.  While even I have been guilty of designing my stylesheets under the idea of “if I can read it then it’s okay”, lately it has come more to the forefront.

This whole thing started while watching my roommate play his racing games on the PS2 and XBox on the large-screen television.  I kept looking at all of the different menus and thought to myself, “This looks like Arial to me, but it fits in so nicely with the rest of the game’s design.”

Now, I’m a sucker for the written word.  Words are integral to how we communicate our thoughts and ideas.  In games, the words on the screen, however sparse they may be, are also necessary to convey a thought to the player, such as scoring a critical hit on a monster or getting a 1-Up.  Granted they may be small bits of information at any one time, but they’re important to know and see.  Many times we take the humble word in a game for granted.

Often nowadays the word has been eschewed for the icon.  Icons are great as well.  They also convey information, but can also convey even more in less space, such as a blinking icon for new messages.  But what about the printed text on a screen?

Those words, while carrying crucial information to player can many times be difficult to read.  And that’s where understanding and respecting typography comes in handy.  When I first started out, I was just a writer with a font fetish.  But over the last few days it has grown into something more.

When working on the interface design for Star Merchant 2, I realized that it would have a fair amount of text in it.  Probably more than most other games due to the nature of it.  After all, its predecessor is nothing but text.  Granted, Star Merchant used a terminal-based rendering system so I could expect a very simple and easily-rendered set of screens that the operating system took care of.

SM2 would have consistent and easy-to-read text, wherever it is.  The interface design asks the question: “What would the iPhone or the HTC look like in 500 years?” I extrapolated a lot of the design elements from that concept. But I also wanted to take some lessons from existing companies about their designs.  After reading up on the iPhone’s interface and what fonts were used, I decided to dig deeper into this whole world.

Here is what I have been learning as I go along, which is something that isn’t really revealed by reading source code.  As icons convey information and are part of the interface, so should the text.  The text in a game should be rendered in an easy-to-read size, typeface, and color that is consistent with the rest of the interface.  This is the domain usually reserved for the interface designer and the graphic artist.

Being easy to read quickly knocks the flowery, cursive fonts right out of the running right there.  Times New Roman is great for the printed word and is even demanded as a standard in that realm by publishers.  But for games, Sans Serif fonts are in order for the interface nearly all of the time.

After finding out that Helvetica was the font used on the iPhone, I looked it up on Wikipedia.  Which put me down the rabbit hole for a good four hours right there reading up on nothing but typography and its various applications.

Finally I broke free of Wikipedia’s iron grip and found a nice, free drop-in Helvetica family font called Liberation by Red Hat.  I tested a few others out, but this one seemed to work well with the game’s interface elements and had a very clean, crisp, and fast readability to it.  That may sound strange, but it’s almost like test driving a bunch of cars that are almost similar in every way.  By test driving you find out which one is just right.

Liberation also fit in with my concept of the “iPhone in 500 years” idea for the interface.  Side-by-side, it looks about 98% the same as Helvetica with my own rather untrained typographic eyes.

If it’s something you haven’t considered doing, make it a part of your regular testing cycle: make up a mock interface program with your elements in them, and try out the various typefaces you’re considering to see how they all fit.

It’s better to do this within the framework of your own game; trying this in Photoshop or GIMP may give you skewed results because they use different rendering techniques that might be far beyond what your game is capable of doing.  Unless you have antialiasing, hinting, and sub-pixel font rendering in place, in which case, why bother with PS or GIMP at all?

Using it in the context of your game can also reveal heretofore unseen issues if you try it against all of the different possible backgrounds and color variations required of it.  There may be an instance where it looks good as white on a darker background, but the minute the game switches to a lighter background the text becomes unreadable.

Knowing your platform and its limitations is also helpful.  If you’re making a game for the Nintendo DS, you’ll need something sharp, bold, and without serifs to be seen on a screen that small than compared to, say, somebody running a Mac with an Apple Cinema Display in HD.  The limitations of SM2 are that it runs in a window at 800×600, so I’m somewhere in-between.

You should also consider the licensing terms of the font if you decide to use it.  Many fonts are for sale in commercial products, but my own sensibilities (read: I’m cheap) convinced me to use a typeface for SM2 that was free and unencumbered for distribution with it, which would also include source code and other assets.  This was very important to me, but it might not be so important to you if you’ve already bought an expensive license for a typeface from a foundry.

This applies not only to TrueType and OpenType fonts, but to bitmap fonts as well.  You may be using a bitmap font, but it has the same characteristics and was most likely born from a TrueType or OpenType font.  And if you decide to use scaling and smoothing, be aware that your bitmap font may suffer from issues that make it more difficult to read by the player.

So if you haven’t put it on your list of things to consider when designing your game, you should definitely consider it.  It may mean the difference between looking like something that was thought up in a garage and a game that has a professional look and feel to it.

For more information, check out Wikipedia under Font and Typeface, then go from there to learn about this seemingly dark art that gives us the ability to print the written word anywhere.