[Editor’s desk] Typography tips for tabletop games

Here’s a collection of tips on choosing and using fonts. It’s mainly aimed at small-press TTRPG creators, but would apply to boardgame rules as well, and to websites as well as books.

A sky-blue rectangle with a row of white letters in different fonts.(Just in case you haven’t come across the terms: serif fonts are those with little cross-strokes at the ends of letters, and sans serif fonts are those without. Of course there are many other font categories. And for purists I’ve used ‘font’ throughout, even if ‘typeface’ might be more technically correct in places.)

Choosing fonts

There are a zillion fonts out there, and it’s a heck of a rabbit-hole. But I’ve found I have a core selection that I base layouts on. For most projects, you want to keep the number of fonts low so that the product has a cohesive identity. Two is often enough: a body font and heading font that work together well. Remember you can use sizes, weights (the scale from light to bold) and italic to vary the appearance in different places, like a variant of your heading font as a box heading.

For font sourcing, if you want to go shopping there are loads of platforms like Fontspring and MyFonts (but see the note on rights below). Google Fonts allows you to download and use desktop fonts for free, and most of them are good, but keep an eye out for quality and quirks. There are other free sources too. But often you get what you pay for, and you need your body font at least to be a good all-round performer.

Identifont is a handy web tool for finding fonts by name, or finding fonts by similarity to a named one (perhaps with a better look or better licensing terms); it’s a bit elderly and occasionally becomes unavailable, so you have to go back later.

Be clear but not boring. Don’t use fonts that have been very widely used — vanilla sans or serif like Arial or Times. They look boring, and carry that impression to the reader. Find something similarly readable but with a bit of character. (This also applies to very plain sans fonts used as body. With nothing of interest for the eye, it becomes a sea of hard reading work.)

Legibility. Don’t use a font so fancy that the reader can’t tell what you’re saying. I occasionally see people doing this for the title on the front cover, carried away by creativity. I think it’s a mistake. You’re trying to establish the product identity as a brand. And if you create uncertainty, the reader will either go away because it’s uncomfortable or get obsessed with the title weirdness rather than the cool things you want them to know about the product.

Feel. This is hard to give specific guidance on, but every font has a vibe and character to it, arising from the letter shapes, weight, etc. Is it light, heavy, antique, modern, simple, decorative, cramped, spacious, staid, wacky..? You want fonts that are pleasant to read and fit with the vibe of your project. A nice clear body font with a more decorative heading font usually works well. With body fonts especially, it can be difficult to see what the overall feel is. That becomes easier with a block of text. You might even create a document with a block repeated so you can compare different font candidates. Pair and Compare is a web tool for comparing blocks of Google Fonts.

Mind the rights. If you find something you like on a fonts marketplace site, pay attention to the licensing. Usually they’ll expect you to get a more expensive commercial licence if you’re using the font in a product for sale. And often they make it quite difficult to find and understand licensing information. If they find you using it without the right licence they could pursue you for penalties, and there’s no point leaving a potential liability for yourself. That’s one reason Google Fonts is an appealing resource.

Using fonts

Size matters. Of course very small text is hard to read, so watch out for that. Also bear in mind that many game readers have vision issues, or are middle-aged-plus when close vision becomes more difficult for everybody. (Also think about contrast between text and background; complex background art is usually not worth the hassle it causes.) Less obviously, very large text can also be harder to read. There’s a point where the letters kind of disconnect and we can’t hold the whole word shape in our visual field at once, more in some fonts than others.

Set the space. Fonts depend on the right spacing to show them off and let them breathe. In your page set-up, have a decent margin from the edges. In your text styles, set the spaces above and below. Body paragraphs might need a space after. Bullets need a space after to separate them, and perhaps an indent on the right to help them be a distinct block on the page. Headings need the right space above and below. Adjust line spacing if necessary (usually 1.0-1.2x) — particularly watch for this on any headings that wrap to a second line, though best to avoid that if you can.

Use emphasis with care. Underline isn’t often used these days — partly because it can get confused with hyperlinks, and partly because it just doesn’t look great. The common usage is italic for emphasis, foreign language words and titles of works; and bold for introducing a term for the first time, and for inline headings (like at the start of these paragraphs). Try variations you want to use, and assess honestly what they look like. Some fonts are fine in normal (Roman) but work poorly in variants. Also watch out for fonts that don’t come with bold/italic forms and are synthesised in software, as that’ll probably look worse. That’s more common with decorative fonts that are intended for use in a single way.

Kerning. A more advanced tip for extra points! This is the term for spacing between letters. Some letter pairs need to be closer together than others to look good, because of the letter shapes — for instance AV need to overlap each other’s letter-block or it would look like the gap is too big. Software adjusts this automatically behind the scenes, so mostly we don’t need to think about it; but occasionally it doesn’t quite work, especially in large titles. If you get an issue with that, your layout software should have a way to put your cursor between letters and tweak the kerning manually (search in the help if you haven’t used it before).

Afterthought bonus tip

Look at the damn thing. Can’t believe I didn’t originally put this in! When you have a draft layout, take a step back and judge honestly how it looks. You’ll probably need a bit of a time gap to see it objectively — maybe after a lunch break or the next day. You might want to print it out. Doing this for a page or two at an early stage, maybe with sample text, can avoid heartache later when the layout is full of stuff and changes are harder.

Editing services

If you’re interested in getting editing help with your project, further info is here and we can have a conversation.

 

Scroll to Top