입력 체계Typography

HoloLens의 입력 체계 예제

텍스트는 앱 환경에서 정보를 전달 하는 데 중요 한 요소입니다.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's an opportunity to affect the text and the overall user experience in an even greater way.

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're designing experiences for 3D, we use 2D for the type because it's more legible and easier to read.

HoloLens에서 덧셈 색 시스템을 기반으로 하는 holograms를 사용 하 여 유형이 생성 됩니다.In HoloLens, type is constructed with holograms using light based on the additive color system. 다른 holograms와 마찬가지로, 모든 각도에서 세계를 잠그고 관찰할 수 있는 실제 환경에 형식을 배치할 수 있습니다.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. 컨텍스트에 관계 없이 읽기 및 인식에 동일한 입력 규칙을 적용 합니다.Whatever the context, we apply the same typographic rules for reading and recognition.

Clear 계층 만들기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

단일 컨텍스트에서 두 개 이상의 다른 글꼴 패밀리를 사용 하지 마십시오.Avoid using more than two different font families in a single context. 글꼴이 너무 많으면 사용자 환경의 조화와 일관성이 손상 되어 정보를 사용 하기가 어려워집니다.Too many fonts 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. 맑은 고딕은 모든 Microsoft 디지털 디자인의 글꼴입니다.Segoe UI is the font for all Microsoft digital designs. Windows Mixed Reality 셸에서 일관 되 게 사용 됩니다.It's used consistently in the Windows Mixed Reality shell. Windows 디자인 도구 키트 페이지에서 맑은 고딕 글꼴 파일을 다운로드할 수 있습니다.You can download the Segoe UI font file from the Windows design toolkit page.

맑은 고딕 서체에 대 한 자세한 정보More information about the Segoe UI typeface

씬 글꼴 가중치 방지Avoid thin font weights

씬 수직선을 진동 하 고 가독성을 저하 시킬 수 있으므로 42 pt 아래의 형식 크기에 대 한 밝거나 글꼴 가중치를 사용 하지 마십시오.Avoid using light or semilight font weights for type sizes under 42 pt because 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 legible in HoloLens using regular or bold weights.

Color

HoloLens에서 holograms은 가감 시스템을 사용 하 여 생성 되므로 흰색 텍스트는 매우 읽기 쉽게 합니다.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. 사용자의 포커스를 개선 하 고 물리적 배경에서 혼란을 최소화 하기 위해 어두운 색 또는 컬러 백 분판에 흰색 텍스트를 사용 하는 것이 좋습니다.We recommend using white text on a dark or colored back plate 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. 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 won't see the black text without a colored back plate.

검정의 흰색 및 흰색 텍스트의 검정색 예Examples of white on black and black on white text
검정의 흰색 및 흰색 텍스트의 검정색 예Examples of white on black and black on white text

시스템 앱의 검정 텍스트 예-스토어 및 설정Examples of black text in the system apps - Store and Settings
시스템 앱의 검정 텍스트 예-스토어 및 설정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 small at a distance of 2 meters. 각 글꼴의 특성에 따라 달라 지지만 일반적으로 권장 되는 최소 보기 각도와 가독성을 위한 글꼴 높이는 사용자 연구 연구를 기반으로 하는 0.35 °-0.4 °/12.21-13.97 mm 주위에 있습니다.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.97 mm based on our user research studies. Unity 페이지의 텍스트 에 도입 된 배율 인수를 사용 하는 약 35-40 pt입니다.It's about 35-40 pt with the scaling factor introduced in Text in Unity page.

0.45 m (45 cm)에 가까운 상호 작용의 경우, 최소한의 읽기 쉬운 글꼴 보기 각도와 높이는 0.4 °-0.5 °/3.14 – 3.9 mm입니다.For the near interaction at 0.45 m(45 cm), the minimum legible font's viewing angle and the height are 0.4°-0.5° / 3.14–3.9mm. Unity의 텍스트에서 도입 된 배율 인수에 대 한 약 9-12 pt입니다.It's about 9-12 pt 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 (직접 조작 거리)45 cm (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 m2 m 0.35 °-0.4 °0.35°-0.4° 12.21 – 13.97 mm12.21–13.97mm 34.63-39.58 pt34.63-39.58 pt

편안 하 게 읽을 때의 글꼴 크기The comfortably legible font size

거리Distance 시야각Viewing angle 텍스트 높이Text height 글꼴 크기 * *Font size**
45 cm (직접 조작 거리)45 cm (direct manipulation distance) 0.65 °-0.8 °0.65°-0.8° 5.1-6.3 mm5.1-6.3 mm 14.47-17.8 pt14.47-17.8 pt
2 m2 m 0.6 °-0.75 °0.6°-0.75° 20.9-26.2 mm20.9-26.2 mm 59.4-74.2 pt59.4-74.2 pt

맑은 고딕 (Windows의 기본 글꼴)은 대부분의 경우 잘 작동 합니다.Segoe UI (the default font for Windows) works well in most cases. 씬 수직선 스트로크를 진동 하 고 가독성을 저하 시킬 수 있으므로 작은 크기로 밝은 색 또는 반투명 글꼴 패밀리를 사용 하지 마십시오.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 legible in HoloLens with regular or bold weights.

Unity의 텍스트 크기 계산에 대 한 자세한 내용은 unity의 텍스트 를 참조 하세요.For more detailed information about text size calculation in Unity, refer to Text in Unity

각도 보기 거리, 각도 및 텍스트 높이 보기Viewing Angle Viewing distance, angle, and text height



리소스Resources

Segoe 글꼴Segoe fonts

(Zip 파일)(Zip file)

HoloLens 글꼴HoloLens font

(Zip 파일)(Zip file)

이미지: HoloLens 글꼴은 Windows Mixed Reality에서 사용 되는 기호 문자 모양을 제공 합니다.Image: The HoloLens font gives you the symbol glyphs used in Windows Mixed Reality.

HoloLens 글꼴은 Windows Mixed Reality에서 사용 되는 기호 문자 모양을 제공 합니다.



참고 항목See also