Typography in Game User Interfaces
And How it Impacts Usability
A screenshot from Getting Over It With Bennett Foddy.
typography noun
the style and appearance of text
Why is typography important for usability?
- Users need to be able to see, read, and understand text easily.
- Unreadable text makes interfaces difficult to use and understand.
- If a game or interface has poor usability, the user will leave.
Typography Basics
Types of Spacing
lorem ipsum
lorem ipsum
lorem ipsum
Kerning: the spacing between individual characters.
Readability vs. Legibility
Readability
- Definition: How complex the text is.
- Keep reading level at 8th grade level to maximize usability.
READ
Legibility
- Definition: How easy it is to see and discern characters in text.
- Font size recommendations vary based on screen size, but the recommended minimum for desktop is 16px.
READ
Serif vs. Sans-Serif
lorem ipsum
How to Use Typography to Improve Usability:
- Make sure that the text is large enough to be legible.
- If you must use fancy typefaces such as scripts, use them sparingly.
- Choose a text color that will highly contrast with the background.
- Be as concise as possible.
WATCH
Specifically for games, consider:
Users need to see gameplay
- Text has to be minimal in a game UI or it will make the primary gameplay difficult to see.
Backgrounds in games are often not constant
- In many games, the background behind text will change constantly.
- This makes it especially important to have text that highly contrasts with the majority of the game.
- If this is not possible, having an additional semi-transparent background behind text can help increase the contrast for shifting backgrounds.
Users skim text
- Users scan blocks of text for important information rather than reading through everything.
- This is especially important to games because text in games often contains key information needed to play the game, such as objectives and controls.
- Give any key information a clear hierarchy to make the block of text easier for users to get through.
Accessibility
Color Blindness
- Make sure the colors used for your text and background are at a high enough contrast for everyone.
- Use this color contrast tool to test if your text and background colors work well together.
- Have an option to change stylistic features in the game that hurt the contrast and therefore legibility of the text.
Vision
- Use legible typefaces, high contrast, and a font size of at least 16px for desktop.
- Have an option to change the size of the text
READ
Hearing
- If there are cutscenes in your game with captions, be sure that the captions follow what is said exactly.
- Captions should not be longer than two lines and should be in high contrast from the background.
- Read this tech-ease article for more information on captions.
A nice example of captions from The Stanley Parable.
READ
Hands-On Project
Download the game Infection Bio War from the iOS or Android app store for this exercise.
TASK:
Identify typographic problems with Infection Bio War's interface.HINT: Try to put yourself in the shoes of a user. Is the text legible? Does the text crowd the interface?
Finally, how would you change the typography in order to make the game more usable?
Final Thoughts
- Typography can make or break the usability of any interface.
- Bad typography can make instructions unclear, interfere with gameplay, and frustrate users overall.
- Good spacing, contrast, font size, typeface, and conciseness are all ways to make a game interface more usable.
- Better typography = better usability.
Additional Resources
WATCH
10 Typography and Design Tips for BeginnersTypography Basics
READ
Typography Influences UsabilityMaking Typography More Accessible
4 Tips on Typography in UI Design
The Usability of Video Game Design
Learn Better UX/UI From Video Games