文字体裁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 のエクスペリエンスを設計して、2 D 型のため、使用がより読みやすく、読みやすくします。Even though we are designing experiences for 3D, we use 2D for the type because it is more legible and easier to read.

HoloLens では、種類はホログラム加法色のシステムに基づく light を使用してで構築されます。In HoloLens, type is constructed with holograms using light based on the additive color system. 他のホログラムと同じように型配置できる実際の環境で世界がロックされており、あらゆる角度から観察されたこと。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.

複合現実での文字体裁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 デザイン ツールキット ページします。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

予想されることができますの 2 m 離れた距離にある非常に小さく、PC またはタブレット デバイス (通常は 12: 32 ポイント) 間を参照してくださいで使用するサイズを入力します。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. 35 40 pt を以下の詳細についてで導入されたスケール ファクター Unity 内のテキストページ。It is about 35-40pt with the scaling factor introduced in Text in Unity page.

0.45m(45cm) でほぼ相互作用は、読みやすいフォントの最小の表示の角度と高さは 0.4 °-mm 0.5 °/3.14 – 3.9 です。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. 9-12 ポイントの詳細についてで導入されたスケール ファクター Unity 内のテキストします。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**
45 cm (直接操作までの距離)45cm (direct manipulation distance) 0.4°-0.5°0.4°-0.5° 3.14 – 3.9 mm3.14–3.9mm 8.9 – 11.13pt8.9–11.13pt
2 分2m 0.35°-0.4°0.35°-0.4° 12.21 – 13.97 mm12.21–13.97mm 34.63-39.58pt34.63-39.58pt

快適に読みやすいフォント サイズThe comfortably legible font size

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