Learn how to choose the right Typography Techniques for your Games.
The first thing that comes to mind when speaking of Typography is “Font”, but Typography is much more than just the fonts used. There are many factors that contribute to good Typography. Typography is itself an art and can work like magic if done right.
Unfortunately, Typography is mostly not emphasized while designing a game and this can break the game feel most of the time. There are many examples of great games that had great gameplay but lost their charm because of bad or irrelevant Typography.
For getting the Typography correct and appealing two things you need to consider the most are – Legibility and Aesthetics.
Legibility governs the property of the text to be readable in all conditions without straining the eye or rendering the text unreadable in certain situations. Legibility is an important factor especially for the text-based games as the reader is basically interacting with text during the entire gameplay and problems in reading the text defeats the purpose of the game.
Aesthetics is the part in which the text serves the purpose of contributing to the graphics of the game. Aesthetics of the game can be improved with a good choice of fonts and adherence to the theme and set-up of the game.
Here are some techniques to improve the Typography in your games.
Choosing the right font
Choosing the right font can be a daunting task especially with all the different types of fonts available. Understanding the font categories can help you make the conscious choice of what font to choose. Fonts are basically separated into these main categories.
Serif - These typefaces comprise of a slight protrusion or embellishments called “serif” finishing off the strokes of its letterforms. There are various sub-categories of Serif fonts like Old Style, Transitional, Modern and Slab Serif. Examples: Baskerville, Bodoni, Rockwell.
Sans Serif - As the name suggests these typefaces don’t have the projection or serif finishing off the letterforms. Sub-categories of Sans Serif fonts include Grotesque, Neo-Grotesque, and Geometric. Examples: Futura, Helvetica, Arial, Franklin Gothic.
Script - These typefaces are fluid stokes based on handwritten styles. They can range from very formal to casual. Sub-categories of Script fonts include Formal, Casual, Calligraphic, Blackletter and Handwriting. Examples: Vivaldi, Snell Roundhand, Mahogany Script, Engravers Old English.
Display - These fonts are designer fonts that can themselves be used as a graphic element. There are a vast number of Display fonts which mostly have specific use cases and are used often in titles and headings as they draw attention to them because of their stand-alone design but are mostly impractical to use in the body of the text because of low readability in most fonts belonging to this category. Example: Broadway, Curlz.
Choosing the right font for your games comes down to one category most of the time – Theme. The theme and setup of the game should decide the choice of the font family. For example, FPS games like Call of Duty with script fonts would defeat the seriousness of the game and would render the game as a caricature representation of the shooting genre. Similarly, a game comprising of handwritten letters as gameplay would look believable with script fonts rather than a modern looking Sans Serif font.
It all comes down to the game theme and setup in the end.
You can use various fonts in a single game too if certain use case arises like a letter in an FPS game can have Script font while the rest of the gameplay can have a Sans Serif font. But you should refrain from using too many fonts in a single scene, this will be elaborated further in the next section. For more information on Font Categories, there’s a great article at Topal.
Maintaining a Font Family
Though you can use various fonts in a single game your font choices must be conscious decisions rather than mindless mash-up of various font families on the basis of them looking “Cool”. Font family usage decisions must be made with the utmost care as they can often distract the viewer if overdone.
Multiple font families are acceptable but only if you know what you are doing. Yet it’s best to use a single Font-family with various weights and sizes rather than using different fonts to portray separation. We’ll discuss the use of weights, sizes, and emphasis to have visual contrast ahead. It is best to use multiple fonts only if certain situations arise, like in the letter scenario during an FPS game.
So basically don’t go overboard with fonts.
Use Easily Readable fonts
Always use fonts that are readable and legible. No one wants to squint and strain their eyes while gaming. The flow of gaming is broken by the use of illegible fonts as the player gets out of the immersion just to read a text on the screen.
Don’t break player immersion with illegible fonts.
This is especially important while displaying the essential status of the player such as Health, Ammo, etc as the player needs to know the data instantly to have situational awareness during gameplay. Imagine being a player chasing the enemy only to find out you’re out of ammo just when you press the trigger at the last moment because of the ammo not being properly displayed on the screen. Frustrating, isn’t it.
Text Placement and Effects
This brings us to another important factor in making the text legible, Placement and Effects. Placement of the text can prove to be a great way of getting useful information in the peripheral vision of the player. Get the important details of gameplay closer to the center of the action. For example, place the ammo status as close as possible to the field of vision of the player.
The Game Dead Space uses a great way to portray the ammo and health of the player by getting the data right into the play area. The Health is portrayed right on the suit of the player while the ammo is placed right on the gun. This way the player instantly knows the ammo as it is just next to the cross-hair, just where the action is taking place, and just where the eyes of the player are focused.
Text effects can also be used properly to easily display the important status to the player. For example, the ammo can start flashing in red and scaled up and down abruptly with each shot as the ammo depletes to dangerous levels. You can also have the timers displayed on the screen, if any, flash as the countdown runs out or as you cross a time mark such as a minute or so.
Text effects should also be used to separate the text from the background. Suppose you have a very dark overall gameplay, you can add glow and use a bright colour to separate the text from the background. Good practice in some cases is adding a black stroke or outline to white text or vice versa to separate the text from all sorts of backgrounds. For white text with a black stroke, if the background is dark then the stroke gets hidden while the text is visible and when the background is bright the stroke acts as a separator between the background and the text. Also, make sure the text isn’t obscured by the background.
Placements and Effects on the text can make the text even more legible in many scenarios.
Visual Contrast
Visual contrast is an essential factor is making sure the important text is separated from the less important ones. It creates a visual hierarchy of importance. There are various ways to create visual contrast. They include -
Size Contrast - Use differences in text sizes to create the importance of the text in larger font sizes. Mostly used to show headings and important data. The best practice is to have double the font size in the larger font than the smaller font. First, determine the smallest legible size for the non-essential text and then proceed to the larger font size.
Shape Contrast - You can use differences in font families to create shape contrast to differentiate between importance levels. As an example, you can use a Sans Serif font for the heading and a script font for the body to have the heading more readable than the body at a single glance. If done right it can be quite appealing. Also if you want to play by the rules and use a single font family you can use a Bold text for the heading and a condensed text for the body. Weight and Emphasis like of a font plays a huge role in providing shape contrast. Bold, Italic and Underline are examples of typographical emphasis while Weight governs the Bold, Regular and Thin variations of the font.
Colour Contrast - Colour contrast also plays a big role in visual contrast. Colour contrast, however, doesn’t always mean using multiple colours to emphasize the text. You can also use various shades of the same colour to provide emphasis on the important text. This is mostly called Value Contrast. For example, having a white heading and a grey body copy can work blissfully.
Visual Contrast is extremely important for all kinds of art. In game design, it plays a very important role to guide the player to important information without essentially “pointing” at it.
Colour Choice
Choosing the right colours for your text can greatly impact the legibility of the text. A text with colour similar to the background can essentially render the text unreadable. Be careful and conscious while choosing the colours for the text. Black or White is the safest colour choice but not essentially the most pleasing. Go through the gameplay to determine the most contrasting colour to most of your scenes. If the colour is not appealing to the eye then try the stroke effect discussed in the text effects section.
Follow the colour theory principles while choosing colour for the text just like while choosing colours for the gameplay art assets. Complementary colours work great in such scenes. Suppose you have a blue sky in most of the scenes then a slight reddish tint to your text at the top may work great. Colour choice varies greatly with the art direction of your scene. You can have the effects do most of the heavy lifting while colour can be the icing on the cake in some cases but emphasizing on the colour of the text can work wonders and it sure does take some expertise to do so.
Essentially, colour is a great determining factor for both the Legibility and Aesthetics of the text.
Making your own Font
Some situations demand the creation of your own fonts to better suit the Game art. The font is another part of graphics and shouldn’t be considered as a static factor. Font can be quite dynamic and blend with the scene very well if made from scratch. Some developers don’t consider making their own fonts as it might seem quite tedious or the thought simply doesn’t cross their minds.
Most of us think of fonts as something prebuilt and all we can do is get them from external sources, but font creation is a very real and vast field and surely does add to the personalization of the game. Font creation is a whole another level of customization and beyond the scope of this blog. We’ll cover it in a future blog.
Custom font creation for your games is always an option if you want to add that extra bit of customization to your games.
Conclusion
Typography is an essential part of Game Design just as it is in every other design field. A well-designed game always has great Typography which should always be considered a part of the graphical side of the games. Typography can also play a major factor in providing the player with more convincing and immersive gameplay if done right. So, get your hands on your favorite fonts and get started on designing a great experience for the players of your games with Typography.
Here are some great Videos for Understanding Typography even better.
Comments