AR Fonts

Last month I got an amazing opportunity to work on an AR app. My first design project involving augmented reality, so naturally I tried to find as much information on AR design as possible 🙂 What came across through many different sources was that since AR is such a new field, there aren’t many established guidelines or best practices out there. So I wanted to share some of my experiences here. I hope you’ll find them helpful!

In this post I’ll concentrate on fonts. In AR there are a few obvious challenges when it comes to displaying text:

  1. You can’t control the background. What ever your platform, user could be pointing the device at any kind of scenery from brightly lit class room to a dark forest. Therefore readability can easily become an issue.
  2. You can’t control how elements are viewed. User should be able to spot text elements regardless of the view angle. And in some cases, distance too.
  3. Performance is crucial to the overall user experience. A  smoothly running experience is increasingly important (and challenging  to create) in AR.

Faced with obstacles number 1 and 2, you might consider using 3D fonts. They stand out from many backgrounds and would be pretty easy to spot from different angles if you e.g. want text to appear when your app detects certain real-life objects. Sounds all reasonable if you have enough computing power.

The danger is, that with everything else going on in the AR experience (your phone/headset might be using motion detection, gesture recognition and other fancy technologies), rendering 3D objects smoothly could be a problem.

My AR project’s platform was smartphone, so I’ll show you how I got around these problems when designing a phone app:

Text Boxes

Create a controlled background for your 2D text by placing it on a filled text box. I found using a slightly translucent box useful, because you never know what kind of objects will lay behind and you don’t want to accidentally cover anything important.

In our project, we used text boxes that lock onto the screen, i.e. when object is detected and text appears, text box stays parallel to the screen even if user changes view angle or points the screen away from target. This way we got away with using less power-consuming 2D fonts and made sure view angle doesn’t affect readability.

When phone’s camera doesn’t detect the object any more, text boxes can disappear. Or you can place X icons on them and let the user close them when he’s done.

Outlined fonts

Another option would be using outlined fonts. These kind of gimmicky fonts haven’t been too popular amongst designers, but maybe in AR they could finally find their purpose. Using contrasting outline and fill colors definitely helps your text remain readable on various backgrounds.

As above, this approach works when locked onto the screen, which is good for the app’s performance.