タイポグラフィTypography

テキストは、アプリのエクスペリエンスに情報を提供するための重要な要素です。Text is an important element for delivering information in your app experience. 2D 画面のタイポグラフィと同じように、目標は明確で読みやすくすることです。Just like typography on 2D screens, the goal is to be clear and readable. 混合現実の3次元の側面により、テキストと全体的なユーザーエクスペリエンスをさらに大きくすることができます。With the three-dimensional aspect of mixed reality, there is an opportunity to affect the text and the overall user experience in an even greater way.

HoloLens でのタイポグラフィの例Typography example in HoloLens
HoloLens でのタイポグラフィの例Typography example in HoloLens

3D で型について話をするときは、押し出し、容量の3D テキストを考えてみる傾向があります。When we talk about type in 3D, we tend to think extruded, volumetric 3D text. 一部ののロゴデザインやその他の限られたアプリケーションを除き、押し出しテキストはテキストの読みやすさを低下させる傾向があります。Except for some logotype designs and a few other limited applications, extruded text tends to degrade the readability of the text. 3D のエクスペリエンスを設計する場合でも、読みやすく、読みやすくなるため、型に2D を使用します。Even though we are designing experiences for 3D, we use 2D for the type because it is more legible and easier to read.

HoloLens では、加法色システムに基づいた光を使用したホログラムで型が構築されます。In HoloLens, type is constructed with holograms using light based on the additive color system. 他のホログラムと同じように、type を実際の環境に配置して、世界中でロックし、任意の角度から観察することができます。Just like other holograms, type can be placed in the actual environment where it can be world locked and observed from any angle. 型と環境の間の視差効果によっても、エクスペリエンスの深さが向上します。The parallax effect between the type and the environment also adds depth to the experience.

Mixed reality でのタイポグラフィTypography in mixed reality

混合現実の表記規則は、他の場所とは異なります。Typographic rules in mixed reality are no different from anywhere else. 物理的な世界と仮想環境の両方のテキストは、読みやすく、読みやすいものである必要があります。Text in both the physical world and the virtual world needs to be legible and readable. テキストは、壁上にあるか、物理オブジェクトに重ねて表示されます。Text could be on a wall or superimposed on a physical object. デジタルユーザーインターフェイスと共に使用することもできます。It could be floating along with a digital user interface. 文脈に関係なく、読み取りと認識に対して同じタイポグラフィルールを適用します。Regardless of the context, we apply the same typographic rules for reading and recognition.

明確階層の作成Create clear hierarchy

さまざまな種類のサイズと重みを使用して、コントラストと階層を作成します。Build contrast and hierarchy by using different type sizes and weights. アプリのエクスペリエンス全体で型の傾斜を定義し、それに従うことで、一貫性のある情報階層で優れたユーザーエクスペリエンスを実現できます。Defining a type ramp and following it throughout the app experience will provide a great user experience with consistent information hierarchy.

型の傾斜の例Type ramp examples
アプリケーションエクスペリエンス全体で、型の傾斜を定義し、それに従うDefine your type ramp and follow it throughout the app experience

フォントを制限するLimit your fonts

1つのコンテキストで2つ以上の異なるフォントファミリを使用することは避けてください。Avoid using more than two different font families in a single context. これにより、お客様のエクスペリエンスのハーモニーと一貫性が損なわれ、情報を使用することが難しくなります。This will break the harmony and consistency of your experience and make it harder to consume information. HoloLens では、情報は物理環境の上に重なっているため、使用するフォントスタイルが多すぎるとエクスペリエンスが低下します。In HoloLens, since the information is overlaid on top of the physical environment, using too many font styles will degrade the experience. Segoe UI は、すべての Microsoft デジタルデザインのフォントです。Segoe UI is the font for all Microsoft digital designs. Windows Mixed Reality シェルでは一貫して使用されます。It is used consistently in the Windows Mixed Reality shell. Segoe UI フォントファイルは、 Windows design toolkit のページからダウンロードできます。You can download the Segoe UI font file from the Windows design toolkit page.

Segoe UI タイプフェイスに関する詳細情報More information about the Segoe UI typeface

細いフォントの太さを避けるAvoid thin font weights

細い垂直線はバイブレーションになり、読みにくくなるため、42 pt 未満の型サイズに対しては薄いまたは semilight のフォントの重みを使用しないようにします。Avoid using light or semilight font weights for type sizes under 42pt since thin vertical strokes will vibrate and degrade legibility. ストロークの太さが十分にある最新のフォントがうまく機能します。Modern fonts with enough stroke thickness work well. たとえば、Helvetica, と Arial は、標準または太字の重みを使用して HoloLens で非常に読みやすくなっています。For example, Helvetica and Arial are very legible in HoloLens using regular or bold weights.

Color

HoloLens では、ホログラムは加法の光源システムを使用して構築されるため、白のテキストは非常に読みやすくなります。In HoloLens, since the holograms are constructed with an additive light system, white text is highly legible. ホワイトテキストの例については、[スタート] メニューとアプリバーを参照してください。You can find examples of white text on the Start menu and the App bar. HoloLens でバックプレートを使用しなくても白のテキストは適切に機能しますが、複雑な物理的背景によって型が読みづらくなる可能性があります。Even though white text works well without a back plate on HoloLens, a complex physical background could make the type difficult to read. ユーザーのフォーカスを改善し、物理的な背景からの邪魔を最小限に抑えるには、濃い色または色付きの背景色で白いテキストを使用することをお勧めします。To improve the user's focus and minimize the distraction from a physical background, we recommend using white text on a dark or colored back plate.


ダークカラーまたは色付きの背景プレートでは、白いテキストを使用することをお勧めします。ダークカラーまたは色付きの背景プレートの白いテキストの例。 We recommend using white text on a dark or colored back plate. Examples of white text on a dark or colored back plate.

ダークテキストを使用するには、明るい背景プレートを使用して読み取り可能にする必要があります。To use dark text, you should use a bright back plate to make it readable. 加法色のシステムでは、黒は透明として表示されます。In additive color systems, black is displayed as transparent. これは、色付きの背景プレートを使用せずに黒のテキストを表示できないことを意味します。This means you will not be able to see the black text without a colored back plate.

黒のテキストの例 Black text examples
白の場合の白の例と白のテキストの黒Examples of white on back and black on white text

黒のテキストの例 Black text examples
システムアプリの黒いテキストの例-ストアと設定Examples of black text in the system apps - Store and Settings

ご想像のとおり、PC またはタブレットデバイスで使用する種類のサイズ (通常は 12 ~ 32pt) は2メートルの距離で非常に小さくなります。As you can expect, type sizes that we use on a PC or a tablet device (typically between 12–32pt) look quite small at a distance of 2 meters. これは、各フォントの特性によって異なりますが、一般的には、ユーザー研究の研究に基づいて、推奨される最小の表示角度と、読みやすくするためのフォントの高さは、0.35 °-0.4 °/12.21-13.97mm にあります。It depends on the characteristics of each font, but in general the recommended minimum viewing angle and the font height for legibility are around 0.35°-0.4°/12.21-13.97mm based on our user research studies. Unity ページのテキストで導入されたスケールファクターを使用して、約 35 ~ 40pt です。It is about 35-40pt with the scaling factor introduced in Text in Unity page.

0.45 m (45cm) でのほぼ相互作用の場合、フォントの表示角度と高さの最小値は0.4 °-0.5 °/3.14 – 3.9 mm です。For the near interaction at 0.45m(45cm), the minimum legible font's viewing angle and the height are 0.4°-0.5° / 3.14–3.9mm. これは、 Unity のテキストで導入されたスケールファクターを使用した12ポイントです。It is about 9-12pt with the scaling factor introduced in Text in Unity.

近距離および遠くの相互作用範囲のコンテンツとほぼの相互作用範囲 Near and far interaction range Content at near and far interaction range

最小のフォントサイズの最小値The minimum legible font size

単位Distance 表示角度Viewing angle テキストの高さText height フォントサイズ * *Font size**
45cm (直接操作距離)45cm (direct manipulation distance) 0.4 °-0.5 °0.4°-0.5° 3.14 ~ 3.9 mm3.14–3.9mm 8.9 – 11.13 pt8.9–11.13pt
2分2m 0.35 °-0.4 °0.35°-0.4° 12.21 – 13.97 mm12.21–13.97mm 34.63-39.58 pt34.63-39.58pt

判読しやすいフォントサイズThe comfortably legible font size

単位Distance 表示角度Viewing angle テキストの高さText height フォントサイズ * *Font size**
45cm (直接操作距離)45cm (direct manipulation distance) 0.65 °-0.8 °0.65°-0.8° 5.1-6.3 mm5.1-6.3mm 14.47-17.8 pt14.47-17.8pt
2分2m 0.6 °-0.75 °0.6°-0.75° 20.9-26.2 mm20.9-26.2mm 59.4-74.2 pt59.4-74.2pt

Segoe UI (Windows の既定のフォント) は、ほとんどの場合に適しています。Segoe UI (the default font for Windows) works well in most cases. ただし、薄い垂直方向のストロークはバイブレーションので、読みやすさが低下するので、小さいサイズの明るいフォントや半明るいフォントファミリは使用しないようにしてください。However, avoid using light or semi light font families in small size since thin vertical strokes will vibrate and it will degrade the legibility. ストロークの太さが十分にある最新のフォントがうまく機能します。Modern fonts with enough stroke thickness work well. たとえば、Helvetica, と Arial は、通常または太字の重みを使用して HoloLens で非常に読みやすくなります。For example, Helvetica and Arial look gorgeous and are very legible in HoloLens with regular or bold weights.

* * Unity でのテキストサイズの計算の詳細については、 unity のページテキストを参照してください。**For more detailed information about text size calculation in Unity, please refer to the page Text in Unity

角度 表示距離、角度、およびテキストの高さを表示するViewing Angle Viewing distance, angle, and text height

リソースResources

HoloLens フォントは、Windows Mixed Reality で使用される記号のグリフを提供します。 The HoloLens font gives you the symbol glyphs used in Windows Mixed Reality
HoloLens フォントは、Windows Mixed Reality で使用される記号のグリフを提供します。The HoloLens font gives you the symbol glyphs used in Windows Mixed Reality.

関連項目See also