UX Checklist for Text
This list was orginionally written for board game prototypes, but can apply to other mediums, especially web design.
- Use a standard, royalty-free font like Droid Serif
- Lines of text should be around 50 to 65 characters long; 40 at a minimum.
- Text should be 12pt at least; text that can be easily moved closer to the reader can go down to 9pt minimum.
- Left-align all main-body text.
- Use this contrast checker for your foreground and background colors. Aim for a PASS down the board. Alternatively, just use black and white text and backgrounds.
- Use muted, low-saturation colors for text and text backgrounds, regardless of contrast.
Rule 1—Font choice
This is the most important rule. Stop using cute fonts for main body text. I have marginally bad eye site, but I wear corrective glasses and read comfortably all the time. The fact that I struggle to read your games is unconscionable. 10% of people are dyslexic, 5% of people have vision impairment, 1% of people cannot fix it with glasses; your font choice is a matter of accessibility. No one cares that your rule book uses a thematic font, but they do care if they literally cannot read it. Stop being selfish, ditch the damn font.
Grab a royalty free, standard, professional font. Serif or sans-serif is fine, but people are more used to serif fonts in print. Note that not all standard fonts are royalty free. Times New Roman, surprisingly, requires a license. Droid Serif is an excellent font to try. On the web, use any web safe font. Loading custom fonts is slow, causes pop-in, and uses expensive bandwidth for mobile users, although there are settings to midigate these problems.
Rule 2—Line length
Your lines of text should be 50 to 65 characters long, 75 at an absolute maximum. This improves legibility, as it’s easier to find the next line while reading.
There’s an easy way to work this out. Here’s 50 characters distributed based on character frequency in English.
eeeeeeaaaarrrriiiiooootttnnnssslllccuuddppmmhhgbfywkv
Plop that text in there and see how it fits. It should almost fill up your line. If it’s only two thirds you have a problem.
If space is constrained, text can go down to 40 characters without much issue. Here’s a 40 character line if you want to perform the same check for cards.
eeeeaaarrriiioootttnnnssllccudpmhgbfywkv
If your lines are too long bust the text up into columns, like a newspaper, or up the font size. Speaking of…
Rule 3—Font size
12pt is a minimum for most applications. Don’t go below 9pt, anywhere. Books tend to use 10pt or 12pt, but bigger is often better. If a reader can easily move the text closer to their face, 9pt font can work, otherwise make it at least 12 pt.
Rule 4—Left-align text
Always left align main body text, unless you’re using professional typesetting software, in which case you can justify the text. Center aligned text makes the next line harder to find, and will often result in jagged looking, weirdly placed lines.
Rule 5—Contrast
If the text is light, the background should be dark, or vice versa. Here’s an online contrast checker. You should see PASS down the board. There’s no reason to ride the edge here.
Rule 6—Color
Your text and text background should use muted, low-saturation colors, if you use colors at all. Even if the contrast is good, the colors should not be very bright.
Bonus Advice—Icons in text
An Icon in text should, in general, be 50% bigger than the text, and incredibly simple. As a rule of thumb, any lines or negative space should be at least 50% wider than the lines on your characters, or the icon is too detailed to be embedded in text. I’m not aware of any research on this but it’s what I’ve seen published board games do. Also note that you don’t have to place the icons manually, Adobe and Affinity both have mechanisms to convert icons into a text element that you can copy and paste.