An experiment for choosing a font size in VR for accessible interfaces

I wish I could tell you that there’s a solid rule for optimal font size in VR, but there’s not (this is 3D space, and there are too many variables!). The next best thing I can do is describe the process of how I identified an optimal font size for my purposes.

In High Fidelity, our main user interface is a tablet that can be manipulated in 3D space. As the information that we need to display grows, I decided to be proactive about setting a standard for the minimum font size allowed to show its face in our main UI piece.

This was a simple endeavor considering our engine uses a web interface to deliver an HTML page to the tablet. Familiar font sizes and styling meant simple metrics to work with. We already have a font that we use for body and headers called Raleway, so all decisions were made for me in that regard.

 

I started out by designing my visuals, using random words based on a eye chart’s formatting. I chose familiar words, keeping esoteric language out of the choices. I didn’t test separate letters since we’re testing for legibility of full words rather than any abnormalities in vision.

To test, I threw together a simple JS/HTML application to display on the tablet, that allows me to test normal weight and bold weight. All users tested with the text at 0.5 meters in front of them in space, where they read the words aloud and explained which was were the smallest words they could read with minimal effort.

Results

Based on 11 users with two HMDs (Oculus, Vive), I inferred from the data that a 22px (normal weight) and 24px (bold weight) font size was the minimum size we can use for an accessible interface. I chose these values based on the mode of each set, erring on the side of safety. There’s little point in having information displayed if people can’t read it clearly.

Weight Normal Bold
Optimal Size 26px 26px
Minimum Size 22px 24px

You can see the full data set here.

Surprisingly, bold fonts displayed worse in this case, which was unexpected. The thick stroke seems to blend together with this specific font and its spacing, producing flickering and distortion. It degrades faster than a lighter weight font does as you move down in size.

In addition to size, I did a pretty quick pass at determining what our minimum contrast should be with an online contrast accessibility tool. Since higher contrast is necessary in 3D space due to small details being lost, we made a call to use no lower than 7:1 due to the W3 standards demanding it for their highest level standard.

The takeaways I got from this:

  • Bold font isn’t always better in VR (surprisingly!)
  • Minuimum 22px (normal weight) and 24px (bold weight) for our particular interface
  • Bold font degrades in legibility much faster than a lighter weight font as you move down in size

Things to keep in mind:

  • I’m using a specific font, and not testing for the best font for VR
  • I used white text on a dark gray background, and did not test the reverse scenario

I wish you luck choosing your next font size in digital space! Keep it big, keep it contrast-y.

Leave a Reply

Your email address will not be published. Required fields are marked *