10 Rules of Using Fonts in Virtual Reality

On a desktop, a text is the most significant part of the content. As you know, content is a king. But let's be honest, fonts are not designed to live in 3-dimensional space. Due to a situation, a lot of VR designers and developers still keep using texts in virtual scenes. I would vote to avoid using any text content at all, but unfortunately, it's impossible. So I did some research to figure out basic rules of using fonts in virtual reality.

Size

I want to start with the size of a font. With current hardware and especially resolutions of screens, it's essential.

Unfortunately, usual metrics as pixels and ems don't work in a 3d space. For defining the size of an object in 3d is used the perceived size that's measured in degrees.

Yeah, looks weird. But as we know the optimal font size for mobile and the average distance of phone screen from eyes, we can count the recommended perceived size. So, let's make some calculations. You can skip this part and scroll a little bit down to get the summary.

Let's take the optimal size of 16 pixels for mobile design. For this case, I'll take Google Pixel phone as an example. This phone has the screen with the resolution of 441 pixels per inch and with density xxdpi 2.6 initial. So 16 pixel will have 41.6 pixels on a real screen and 0.093 inches or approximately 0.24 cm physical size. To get perceived size I'll use 25 cm as the average distance from eyes to screen.

The degree of the perceived size of 16 px font of mobile phone equals 0.55°.

Let's figure out what should be the size of the text in VR when it is placed in one-meter distance from an observer with 0.55° of perceived size. There is a great simple calculator that help make such estimations very easy (sizecalc.com)

It says that font should be 0.96 cm height. I don't think that I'll be able to read one cm font from distance of 1 meter so easy as 16 px font from a phone.

But there is another issue. How detailed will be such font on a screen of a mobile phone when an observer uses cardboard goggles? It's also easy to count. As the field of view on the daydream headset is 90°. Pixel phone has the screen with the width of 1080 pixels. It means that for one degree there are only 12 pixels. And for our text that takes only 0.55° of perceived view are only 6.6 pixels, what is definitely not even close to enough.

Let's go from another side and say that for legibility of 16 pixel font, this font should have size at least 16 px. As we know in one degree of perceived view are 12 pixels.

It means that font with the size of 16 physical pixels, in the daydream headset have perceived the size of 1.33°. And if you want to place this font in VR scene in distance 1 meter from observer this font should be 2.32 cm height.

This already should be fine. Before doing tests, let's count what should be the size of the font in virtual reality that will use all 41.6 physical pixels on the mobile phone screen. This size has a perceived size of 3.46°. And placed in one-meter text should be 6.04 cm height.

This is how it will look at three types of fonts in VR:

Left: 6.6px on mobile screen, 0.55° perceived view, 0.96cm height in 1 meter

Front: 16px on a mobile screen, 1.33° of perceived view, 2.32cm height in 1 meter

Right: 41.6px on mobile screen, 3.46° of perceived view, 6.04cm height in 1 meter

‍

‍

1) Minimum readable size for the font in VR is 1.33o or height of 2.32cm on the distance of one meter. The recommended size of the font is 3.45o or height of 6.04cm on the distance of one meter.

‍

Position in space

Position and rotating are unique characteristics for VR fonts. And this is extremely important. For the previous example, we took the case when the font is on the level of eyes, and we told that it's exactly 1m far. But if a user will move for half a meter lover or higher instead, we would get 1.12 meters of distance. What definitely doesn't improve readability. So while placing fonts in a 3d space, we should remember that it'll be approximately on the level of users eyes. With 3dof headsets, it's easier to reach, as the position of the viewer is fixed and defined in advance. For example, for A-Frame by default, it's 1.6 m. But with room-scale experiences, it's a little bit tricky as it measures the real height of the user. Take the average height of 1.6 meters is fine. In case if we want to place font lower, we can rotate it in space to get the same perpendicular distance. For example, font placed 75 cm lower from user eyes level, and 75cm far from a user, rotated by 45° will be from the user's eyes also in 1 meter.

2) The font should be faced perpendicularly to the observer.

There are two examples of placing content.
1. On the flat surface:

‍

‍

2. Rotated around observer:

‍

Line length

As we know, 50–75 for desktop and 30–40 for mobile are preferable line length. Also, VR resolution of screens and self-awareness of user is worse what will make the ability to keep line worse. But to figure out preferable options, let's have a look at examples. Easy to the got idea that in virtual reality line length should depend on the size of the font itself, as even 60 letters in 3.45° size are already way too long.

‍

‍

3) Line length in VR should be around 20–40 symbols per line. With bigger font line should be shorter.

Typeface

If people still arguing is serif ok or not for desktop, for VR definitely better avoid using fonts with strokes. And any other nice font's with decorative features. The ideal typeface is sans with squarish shapes, as Exo 2, for example. Exceptions are big titles.
As we are getting more than the minimum required amount of pixels, we can experiment with styles and fonts a little bit. But not more than it's required by an atmosphere of VR scene.

‍

4) In VR better work sans typefaces.

‍

Weight

With such low resolution better avoid thin and light fonts. Regular and bold work fine. Also better use carefully black styles. Weight is slightly worse option to add contrast to different types of content. For this case, better adjust the size.

‍

5) Fonts in VR should be bolder than on screens.

‍

Line Height

On a desktop, the good idea is to keep line spacing between 1.2 and 1.5. On VR works the same approach. It also depends on line length. But as in VR for an observer is more complicated to keep focus, I would recommend shifting this window to 1–1.3. And of course, better avoid minimizing spacing less than 1.

‍

6) Line height for VR font should be around 1–1.5.

‍

Alignment

In desktop and mobile centre alignment is not preferable, and right alignment is a no-no (of course if it isn't Arabic language). But in VR any alignment is good is it's reasonable and explained. For example, if it's annotation to object, it can be placed almost from any side. For example, would look weird if the left aligned text would relate to an object that is placed on the right side.

‍

7) Alignment of fonts in virtual realty depends on context.

‍

Colour and contrast

Generally, this is an obvious one. In all this mess, any additional contrast is better.
People say that in desktop UI on white background better not to use pure black colour for texts. Dark grey improves readability and looks less contrast. I don't think that it'll work in VR as well. Poor resolution and bad focus of observer make such details unnoticeable.

‍

8) Make sure fonts have sufficient colour contrast in VR.

‍

Animation

This is interesting. On desktop blinking and moving of text is absolutely prohibited. But in VR, it should be not only allowed but even promoted as a way to guide user attention. Of course, there should be some limits. A label shouldn't distract, but small waving or any other simple animation rise chance that user will notice this text.

‍

9) To attract user attention font can be animated in VR.

‍

Actions

This easily deserves a separate article. For now let's keep in mind that some concepts that had established for years in desktop don't work in VR, for example, blue link. Also, things that moved to UI from the physical world can be useful in VR as well, like buttons.

‍

‍

10) It should be easy to define when text is actionable.

I feel that this research raised more questions than gave replies. But it's definitely the good beginning of a discussion.

Here is the scene with portals to all tested VR scenes

As fonts are not adapted for 3d space better try to avoid using them. In a case when it's impossible, we should pay more attention to how they are used and be sure that the user is able to read them.

And the most important thing: keep testing.

‍