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.