Typography & Tabletop Games

Anyone who knows me would call me a type geek. Over the past decade, it has really become a passion of mine. Sometimes (actually, who am I kidding, MOST of the time) when playing a game, my fellow players will be waiting for me to take my turn, not because I’m a victim of analysis paralysis, but because I’m studying the cards in my hand, silently (or sometimes vocally) commenting on and correcting the typography no-nos of the game which we’re supposed to be playing. With an, “Oh, sorry…”, I take my turn and go back to my silent typographic review.

One of the most commonly overlooked things in Tabletop Game UX (User Experience) is how typography can really enhance (or diminish) game play. By and large, game cards and boards aren't simply a mishmash of unremarkable text (laid out in Comic Sans) and generic symbols. They are intentionally designed with beautifully thematic works of art, carefully curated typography and all the UX elements and content necessary for game play.

When it comes to looking at what ‘good typography’ means for games, there are a bunch of things to consider:

• Type Size & Spacing
• Type Colour & Contrast
• Font Selection
• Orientation, Placement & Justification

Type Size & Spacing

This year, I turned 45. I started to wear reading glasses just after I hit the big 4-0, so one of the things that aggravates me is unnecessarily small type. There’s no good reason to put 5pt type on anything that is not meant to be read with a magnifying glass. When you’re at the game table, or better yet, at a local pub’s game night where the lighting is far from bright, it’s incredibly frustrating trying to read minuscule text; you end up squinting, holding it up to a brighter light, or doing whatever else that helps, all of which causes delays and diminishes the game play experience.

While I don’t have a hard and fast rule about minimum type sizes, mainly because every font reads differently at different sizes, things like the size of the counters (spaces within the letterforms, like the ‘eye’ of a lower-case e) or x-height can make fonts easier to read at small sizes (more about that later in Font Selection). In general, 9 or 10pt body text is usually a nice, readable size, of course, this may vary depending on the font. If I must go lower for whatever reason, 8pt is usually as low as I’ll go.

When setting small type, it's also a good idea to loosen the tracking (space between letters) and leading (space between lines). Rather than force the player to read a dense, tightly packed block of mice type, this additional room between characters and above/below each line will increase the legibility of the text and reduce the amount of effort required to read it.

Generally, when reducing point size of type, you should also narrow its measure (line length). One or two lines can be ok to read at longer lengths, but anything more than that and you run the risk of losing track of the correct baseline and having to reread the passage.

When in doubt, PRINT IT OUT! Don’t trust the screen, it’s back-lit and has much higher contrast than a printed card or board would. The only way to get a true sense of what it’ll be like is to print it out, get it in front of you and judge for yourself.

Type Colour & background Contrast

You may have chosen the perfect font for legibility. It’s got great characteristics for reading at all sizes, it’s beautifully thematic and everything...but unless the contrast between the colour of the text and the background it lays upon is high enough to easily read the letterforms, you’re hooped.

This is something I see far too often when it comes to tabletop games. Great font choice, poor choice of colours. Sometimes the contrast is so low, it’s barely able to be made out, even in daylight. There are a few things we can do to help make our text as readable as possible. First, select a type colour that is of high-enough contrast from it’s background where it doesn’t impact readability. To help with this, I often consult an online colour contrast checker like webaim.org. This tool will check the contrast levels between your text and background and give it a pass or fail based on industry accessibility standards. While this tool is primarily meant for screen-based content, the principles translate over to print quite well.

Font Selecton

Up until now, we've talked about how you deal with type assuming you've already chosen that perfect font. I sometimes spend hours looking for just the right font for my project. One that speaks to the theme, but is also versatile and readable enough not to hinder game play.

Commercial vs. Free

Whenever possible, I use professionally designed commercial fonts when laying out a game. I've even gone personally out of pocket because it wasn't in the budget to purchase fonts for the game. The down side of it is professionally designed fonts aren't free. Sometimes they cost upwards of $100 just for one style or weight, but the good, IMHO far outweighs the bad. The money you spend on a font designed by a professional type designer buys you a font that:

• Has the 'right' anatomy. Type designers are educated in 'how' letterforms should look to stay with traditional norms and to increase it's readability. Improperly shaped letterforms may cause errors in the font and end up costing you thousands when the game is sent to print.
• Is well-kerned (the spacing between each of the letterforms is adjusted so they play well with other letters). Having a natural look and flow to a font is something that is unnoticeable when done well and sticks out like a sore thumb when its not. 
• Has multiple styles and weights. Type designers will often create multiple weights (light, regular, bold, heavy, etc.) and styles (oblique, small caps, etc.) to create a 'family' for their font. This is especially beneficial when using the font for body text where you need to emphasize selections of the text and have it stand out for the reader.
• Will not be used by many (or any) other games in the market. So, you've found the perfect free font. It fits your theme, its actually well-constructed and it even has a few weights to it. Unfortunately, a dozen other designers also took a shine to it and used this free font for their medieval-themed game as well.

That's not to say that free fonts don't also have their place. They're easy to find, there are plenty to choose from and ... they're free! Unfortunately, these awesome no-cost fonts often only have a single weight, are only for non-commercial use, or don't have full character sets.

In the end, whether you use paid or free fonts, ensure that you get what you're looking for from your chosen typefaces. Think character set, weights, versatility and cost.  

Theme

Theme is a very important component to font selection...it's where I start. Every. Single. Time. I find that using a font whose theme is a poor match to that of the game can sometimes affect game play in a negative way. Take the time to peruse your personal collection or an online (free or paid) font house for a typeface that plays well with the game theme. When choosing a themed font, be careful not to venture too far into the theme as to affect legibility. Your post-apocalyptic game might be amazing to play, but the destroyed font you chose for card title is SO eroded that it's nigh-illegible.

Weights & Styles

The ability to utilise different styles to add different forms of emphasis to your heading and body content can be very useful in increasing readability of your game components. Fonts score bonus points with me if they have multiple weights and styles. Bare minimum for me to consider them for paragraph content, they need to have regular and bold weights with their respective italics. Other weights like thin, light, heavy and black or styles like smallcaps, display, etc. can give the type some added versatility.  

Font selection is much like picking the right outfit for an occasion. It should fit in in it's style and general aesthetic, but at the same time, have it's own distinct character and panache to add that certain 'je ne sais quoi' to your game.

Orientation, Placement & Justification

Text on game components can be vertical, horizontal, rotated 90 degrees, or even curved around an object. It can be tempting to use one or several of these tactics when laying out your text, but we also need to be careful that by employing these tactics, we don't sacrifice readability.

While it is often visually appealing to layout paragraph text on cards and boards with centre justification, in a practical sense, left justified text is generally read more easily. 

Best policy, in my experience is to play with it and shop it around to others whose opinion you trust to find your final presentation.

Conclusion

With thousands upon thousands of free and paid fonts out there to choose from, font selection and implementation is something that will give your game (if done well) an upper hand on others. Be specific, logical, and intentional with your game typography so that you craft as immersive a theme as you can for your game while maintaining it's gameplay and production quality. Trust me, you won't regret it.