10 Rules of Using Fonts in Virtual Reality
On a desktop, a text is the biggest part of the content. And 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 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 made some research to figure out basement rules of using fonts in virtual reality.
I would like to start with a size of a font. With current hardware and especially resolutions of screens it’s extremely important.
Unfortunately, usual metrics as pixels and ems don’t work in a 3d space. For defining a size of an object in 3d is used the perceived size that’s measured in degrees.
Yeah, looks weird. But as we know optimal font size for mobile and the average distance of phone screen from eyes we are able to count 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 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 perceived size of 16 px font of mobile phone evals to 0.55°.
Let’s figure out what should be the size of text in VR when it’ll be placed in 1 meter distance from an observer with 0.55° of perceived size. There is the 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 observer will use cardboard goggles? It’s also easy to count. As the field of view on 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 take 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.
What means that font with the size of 16 physical pixels, in daydream headset will have perceived 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 the perceived size of 3.46°. And placed in 1 meter text should be 6.04 cm height.
This is how will look 3 types of fonts in VR:
Left: 6.6px on mobile screen, 0.55° perceived view, 0.96cm height in 1 meter
Front: 16px on 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. 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 3 fof 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 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:
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 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.
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 its required by an atmosphere of VR scene.
4) In VR better work sans typefaces.
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 size.
5) Fonts in VR should be bolder than on screens.
On desktop 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.
In desktop and mobile center alignment is not preferable, and right alignment is 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 object that is placed on right side.
7) Alignment of fonts in virtual realty depends on context.
Color and contrast
Generally, this is 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 color 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 color contrast in VR.
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 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.
This easily deserves 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 physical world can be useful in VR as well, as buttons.
10) It should be easy to define when text is actionable.
I feel that this research raised more questions that 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 how they are used and be sure that user is able to read them.
And the most important thing: keep testing.
If you’ll find out any other rules feel free to leave a comment or contact me on twitter.