Distance indicator, Save & Load scene

Type size and distance information

The app was already showing the distance information — the distance from HoloLens to the text object. However, it was hard to see this information since the distance information was displayed on the toolbar. In the latest update, I have added this distance information as an annotation close to the text object, together with the font size information.

The Save and Load feature is finally ready. Now you can save out your layout composition and restore it later. These feature updates are available in the latest version in Windows Holographic Store.

Tips: Getting Beautiful Type for HoloLens in Unity

Text is the most important component in Typography Insight. To display text, there are two types of text components you can use in Unity — UI Text and 3D Text Mesh. Both are very blurry in default and you need to tweak some of the variables to get the sharp high-quality text. For UI Text, Unity provided this guideline for HoloLens but I wanted to figure out more accurate scaling factors to get proper text size.

I did an experiment with printed type ramp on the wall. From 2-meter distance, using Typography Insight for HoloLens with type ramp and debug menu, I overlaid and resized holographic text to match the physical one. With this experiment, I was able to find proper scaling factor. (2-meter is the recommended comfort distance for placing holographic objects)

Type experiment to get proper scaling factor

The scaling factors from this experiment are approximately 0.0005 for UI Text and 0.005 for 3D Text Mesh. Even though it might not be perfectly accurate, with these scaling factors, you can get the relevant type size which will be similar to physical type size at 2 meter distance. If you use this scaling factor, you can say 48pt type size at 2 meter distance are same in Unity and Adobe Illustrator.

For UI Text, you can adjust additional parameter ‘Dynamic Pixels Per Unit’ in Canvas to improve text rendering quality. However, if you increase this too much, you will get an unexpected type size and performance will degrade. With scaling factor 0.0005, DPPU value between 2–3 gave me decent rendering quality.

*For further details on text scaling factor, please refer to this README.md file in HoloToolkit. Font Scale and Font Sizes section describes how these values can be calculated by Points and Unity units.

Unity UI Text with different Dynamic Pixels Per Unit values

Unity 3D Text Mesh with different font sizes

Below is the comparison between UI Text and 3D Text Mesh. As you can see, using these scaling factors, you can expect the same size of the text. This size will be also same as the text from Illustrator or Photoshop.

UI Text and 3D Text size comparison

As you can expect, type sizes that we’ve been using on PC or tablet devices (typically between 12–32pt) look quite small at 2-meter distance. It depends on the characteristics of types but in general, recommended minimum type size for the legibility without stroke vibration is around 20pt, based on the scaling factor introduced above. If your app is supposed to be used at a closer distance, smaller types could be used.

For the font selection, Segoe UI (the default font for Windows) works well in most cases. However, I would recommend avoid using light or semilight for the type sizes under 42 pt since thin vertical strokes will vibrate and it will degrade legibility. In general, modern fonts with enough stroke thickness work well. For example, Helvetica and Arial look gorgeous and very legible in HoloLens with regular or bold weights.

So, that’s my journey so far. I look forward to seeing what you can create in Windows Mixed Reality!

Update: Type in Space for HoloLens 2 (2019)

Read design & development story on Type In Space made with MRTK v2

Update: Type in Space (2018)

I published a new HoloLens app ‘Type in Space’. This app is an evolved version of ‘Type Playground’ component from my original app Typography Insight for HoloLens(2016)

Type in Space for HoloLens (2018)

Video: Watch my presentation at AltspaceVR

Text Prefabs and sample layout in HoloToolkit

Text Prefabs under HoloToolkit/UI:

Sample layout Prefab under HoloToolkit-Examples/Text:

Resources for HoloLens app design & development

Holographic Academy — Tutorials

Windows Holographic — Documentations and guidelines

Recommended articles on HoloLens app design & development by designers at Microsoft

Links

Here are the links to the site and the app stores:

Typography Insight web site

Typography Insight for HoloLens (Windows Holographic Store)

Typography Insight for Windows 10 (Windows Store)

Typography Insight for iPhone (iTunes App Store)

Typography Insight for iPad (iTunes App Store)

*I work at Microsoft as a User Experience Designer. Typography Insight for HoloLens is my personal project. All experiments and related opinions are my own.

Read my other stories