This article was originally posted on Kongregate's Developer Blog.
One of the easiest ways to help inject some personality into your games is with the typefaces you choose. It’s also one of the easiest ways to either improve or damage the usability of your game. But with a little knowledge you’ll be able to choose the right typeface for you and your game. Stay tuned and see how!
The basics you should know
Typefaces are deceptively complex things, so let’s run through a few of the basics. First, here’s a look at the aspects of a font:
Now, some of these are a bit more esoteric and only of real use when talking to typographers, but others are very important when choosing a typeface. One to take particular note of is the x-height, and I’ll go into its importance more in a later section.
Also note the serif; this is what people are referring to when they are talking about sans serif, slab serif and serif typefaces. Examples of each of those can be seen below for comparison:
One other piece of information that's important to keep in mind is the difference between a display typeface, body typeface and caption typeface. See below:
As you can see, there are subtle differences depending on what use-case the typeface was designed for. Display typefaces are intended for large type and as such tend to have more delicate features or intricate designs. Body usually avoids these, instead focusing on clarity at standard reading sizes. Caption typefaces are intended for use in small text, such as with captions (surprise!), footnotes, and other small print and therefore tend to have features like taller x-heights.
All of this was just a brief overview, and there’s a lot more you could learn, if you’re interested. Here are some books and articles I’d recommend:
- “Elements of Typographic Style”
- Typography Handbook
- A List Apart: “How We Read”
- A List Apart: “On Web Typography”
- I Love Typography
- Smashing Magazine: “When Typography Speaks Louder Than Words”
What to look for when choosing a typeface
You’ll need to be able to answer what the typeface will be used for, what kind of theme am I going for, are there other elements on the screen that I want to mirror in my typeface choice… You can go pretty far with this, so here are some general guidelines to help you consider which typefaces to get.
What time period would this game be?
Is your game medieval or set in space? Does it take place in the old west or have a steampunk theme? The style of a typeface conveys a certain feel and is a great way to further the theme of your game and inject some personality. Luckily, you don’t have to be an expert to be able to know a certain typeface feels sci-fi where a different typeface feels very old fashioned.
These fonts are pretty stylized, but you don’t always need to go even that far. At its simplest, serif typefaces always feel older. The reason for this is due to how type was designed for generations. Sans-serif typefaces always feel modern or futuristic because relatively speaking they’re a new phenomenon, really hitting their stride in the late-1800s.
If you’re having trouble narrowing down a style that feels right for your game, I suggest looking at what others have done for your inspiration. Looking at the games you love and thinking critically about their typeface choices can help you in making your own. I also find that looking at book covers, movie posters and title sequences is a great place to start when I need a flashy piece of display text.
If you just need a gallery you can peruse through, here are three I’d recommend:
What kind of text am I going to use this typeface to display?
Maybe you’re looking for something for your logo, in which case you can choose pretty much anything, be it very simple and clean or very ornate. Since it’ll be mostly displayed at sizes larger than body copy, you don’t have to worry as much about how some of those finer details will look when it’s shrunk down.
Conversely, if you’re going to be using the typeface for body copy, then you should avoid using ornate typefaces and instead focus on things with clean, clear lines. This is a moment when you’ll want to pay extra attention to a font’s x-height. A tall x-height, that is an x-height that’s closer to the height of the font’s capital letters, is easier to read at smaller sizes than one with a small x-height.
What languages is my game going to be in?
Maybe you’re only planning to release the game in your native tongue, or perhaps you’re going to release it in a dozen languages. If you do plan on translating your game, it’s important to look at a character palette for the typeface to double-check its language support. Really well-designed typefaces like Open Sans have great language support for a lot of Roman-based alphabets. Unfortunately you’re unlikely to find a single typeface that covers every language, once you move beyond Latin to Cyrillic and Asian languages.
My top tip:
When possible, choose a typeface with lots of faces. At a bare minimum any typeface that isn’t explicitly for a logo should probably have at least regular, italic, bold, and bold italic weights and faces. Ideally a typeface would have more such as light, medium, semi-bold, black, or ultra. Having that many different weights allows you to selectively use the typeface in different circumstances while maintaining legibility and a more concise look and feel in your game.
Typeface licensing can be a little complicated and often trips people up. So here is a quick overview of the more common types of licenses:
Commercial typeface licenses
These are typefaces you buy from a typeface foundry or distributor and the three kinds of licenses you’re likely to need:
- Desktop license: This is your core license. You’ll need this to use a typeface on your computer. If you’re only making static graphics this is all you need.
- Web license: If you’re embedding a typeface into a web page or in a game on a web page (like Kongregate) you’ll need this kind of license.
- App license: If you’re publishing a mobile app and including the typeface files you’ll need an app license.
Free (mostly) typeface licenses
These typefaces usually don’t cost you more than a tweet and are pretty great. Read their licenses, as there’s a bunch of different kinds, but in general, the only real restriction you’re likely to see is that they’ll want attribution somewhere. Putting a note on an about page will satisfy that requirement.
“Personal use” typeface licenses
Proceed at your own risk. These typefaces tend not to be licensed for public work and as a result tend to have very minimal features, making them much more limiting to work with. Myself, I never use these in any of my work.
Where to find good typefaces
There are loads of places to find great typefaces on the internet. Quality varies greatly depending on where you go, but for the most part it’s possible to find something good in just about any style. Here are some of my go-to places:
These are my three go-to places for free typefaces:
- Google Fonts
Just a note, everything on here is pretty much licensed for any use case.
- Font Squirrel
- The League of Moveable Type
- Use & Modify
This list isn’t exhaustive by any stretch. Share your favorite places in the comments below!
There are countless independent typeface foundries, but here’s a list of some of the big players:
All of these will offer you a wide variety of quality commercial typefaces, but be ready to give a small fortune for some of their best ones (I’m looking at you, DIN).
What does this look like when it’s done well?
Theory is all well and good but eventually it has to be put into practice. Here are some examples of games using typefaces to help further their aesthetic.
The Yawhg has a great hand-drawn aesthetic, and being a text-based game its type choices are especially important. To match the aesthetic of the game, they chose to use a hand-drawn typeface for titles and navigational items and a roughed-up sans-serif typeface for longer text. It gives the whole game a consistent hand-made feel.
Dishonored takes place in a once-great kingdom that is now a little run-down. Therefore, they chose a serif typeface with tall characters and sharp details to reflect that once-proud history. The type is also distressed to continue that theme of a world past its glory days. Note how the sharp chiseled serifs are reminiscent of text carved into marble, a favored material among powerful societies.
Guacamelee has a very cheerful, almost paper-craft aesthetic. Their type choices reflect this with a typeface that’s all straight edges, so it also feels hand-cut. It feels right at home with the game’s art and UI.
Monument Valley is a particularly minimalist game. The world is made to be very elegant with small, delicate details. The typeface they chose is a geometric sans-serif that’s quite reminiscent of Futura.
Metro: Last Light
When you play Metro: Last Light, you immediately notice how everything feels reused and scrounged. Everything is an amalgamation of other parts that have been worn down over a long time. Normally, I wouldn’t recommend you use a wide variety of typefaces, but, because of the hodge-podge nature of the world the game inhabits, it fits very well. But notice there’s still a consistency; every typeface is still sans-serif.
Doug is part of Kongregate's design team as a front-end developer. His first job title was “The Admiral of The Internet” and it is believed the quality of his work is directly proportional to how insane his beard gets.