Amber Marie
- Sep 13, 2019
- 5 min read

Designing Better Character Sheets - Part 3: Making Good Visual Design Choices

We employed thoughtful reduction. We have great white space and with it the ability to arrange our information to leverage Gestalt. Now we can think about FONTS AND COLOR!

But first, let's talk:

Accessibility

Designing for users with visual impairments is a way to experience the world from another person's perspective and practice empathy in our games.

There are already enough barriers in games and it’s easy to forget we’re designing for this group.

When text is hard to read the experience becomes frustrating and your design won’t work.

In my opinion and a lot of others, we should just go ahead and design for those users because it benefits everyone.

Accessible visual design is better visual design for all users.

Font

Decorative or cursive font styles are harder to read for many users, but can be especially problematic for users with dyslexia.

Small font sizes, italicized text, and all upper case text can also be difficult for users to read.

If you feel compelled to use decorative fonts because they add to the tone or mood of your game, keep them out of body paragraphs. Use them for your section headers and make sure they are legible.

Legibility

Legibility refers to how well we can distinguish one character from another.

I made a logo for my friend in my early graphic design days for an event called the Rite of Spring.

The font I chose was not the most legible and the T in Rite when in upper case looks an awful lot like a C and the G like a Y.

So for the last 7 years I've been going to the "Rice of Spriny".

Overall, larger text, shorter line lengths, taller line heights, and increased letter spacing can help all users have a better reading experience.

When it comes to body copy, typically serif fonts are good for print and sans-serif for screen; though there are serif fonts designed for screen as well.

With character sheets, we shouldn't be using a ton of body copy. We'll mostly being using headers, labels, and at most a few short sentences at a time. So serif or sans-serif can be used at your own discretion.

However, headers should be larger and bolder than the rest of the copy on the page.

This creates an instant framework of information. Our eyes will catch the headers as we quickly scan the page.

Penn State has a recommended list of accessible fonts which you can find here: Recommended Accessible Font Faces.

Readability

Contrast Checker

We talked about legibility of font but we should also consider readability.

Good readability requires sufficient contrast between text and its background.

To ensure text is readable by people with visual impairments, the Web Content Accessibility Guideline s has provided a contrast ratio guideline and you can find a contrast checker here: Contrast Checker.

Even though it’s technically for web readability, it can be applied to print principles as well.

Color

If you will be using color for your character sheet, you should keep in mind people who are color blind. It’s estimated that 4.5% of the global population experience color blindness.

Dr. Robotnik's Mean Bean Machine for Sega Genesis

My father is color blind and growing up one of our favorite games was Dr. Robotnik’s Mean Bean machine; a reskin of Puyo Pop, a matching colors game.

I remember finding out he was color blind and asking, how in the world did you play?

He said the eyes of the beans were unique to each color and that's how he matched them.

We shouldn't rely solely on color for conveying action or grouping of information.

If you do use color coding, you should have a secondary means for categorizing information like words or an icon.

Those are some basic visual font and color guidelines that can help you elevate the usability and accessibility of your character sheets.

Let’s take a look at the framework of the Blades in the Dark sheet I made with my friend Josh again.

We did a lot of categorizing up front so when I moved to digital it was easier to utilize white space and use proximity to help organize the information. Now I was ready to take into it's digital form:

The headers are in the Blades in the Dark font Kristy and I used a sans-serif font for the secondary information.

I could have used dots for the abilities like the load and stress but I wanted those to be an icon that indicates you roll X amount of dice; something that doesn’t get filled in.

I also bolded key words in the abilities that tell a player what the action and outcome are.

This is to support our tendency to scan and quickly find information.

Protect and you get +1d to your resistance roll.

Gather Info and get +1 Effect.

Push yourself and you chose between two outcomes.

UX Testing

In play testing with the Blades one-shot character sheet we noticed a few things.

I had left off an area for character name, character details, and there’s potential to add a reference area for ways to get bonus die.

That’s why play testing is invaluable. Getting feedback and watching how people use your sheets will provide great insight on areas of improvement.

In play testing your game, you absolutely should include questions like these about character sheet use:

Was the information easy to find?
Were there any areas that were hard for them to read?
Are there any areas of improvements they would like to suggest?

Also to note, we as consumers are not the greatest at consistently and accurately describing our own behavior so do not solely rely on verbal or written feedback.

You should really be watching the players and looking over their work.

Did you see them hesitate or look confused when doing a certain step in character creation?
How long did it take them to find X?
Any comments specifically in regards to the character sheet during play?

If you can, get the filled out sheets back so you can see how they marked up the page.

Did they use the areas you set up for them correctly, incorrectly, or even at all?
How often did they refer to certain sections?
How much of the game was spent doing certain actions?

These are the types of questions you should be asking yourself as you observe people using your character sheets.

That about covers what I’ve wanted to share in the 3 areas of designing character sheets.

Our brains are easily overloaded because of the limited space in our working memories.
Ask yourself questions before you design; what is the goal?
Know your players and think about how they will be using the character sheet.
Think of information as active and passive and build information hierarchy from it.
Use thoughtful reduction which will provide more available white space on the page to leverage Gestalt principles.
Use font, color, and contrast choices that are highly legible and readable; making them as accessible as possible.
Play test with the character sheet in mind.