TipografiaTypography

Exemplo de tipografia no HoloLens

O texto é um elemento importante para entregar informações em sua experiência de aplicativo.Text is an important element for delivering information in your app experience. Assim como a tipografia em telas 2D, a meta é ser claro e legível.Just like typography on 2D screens, the goal is to be clear and readable. Com o aspecto tridimensional da realidade misturada, há uma oportunidade de afetar o texto e a experiência geral do usuário de uma maneira ainda maior.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.

Quando falamos sobre o tipo em 3D, tendemos a pensar em texto com extrusão, volumétricos em 3D.When we talk about type in 3D, we tend to think extruded, volumetric 3D text. Exceto para alguns designs de logotipo e alguns outros aplicativos limitados, o texto extrudada tende a degradar a legibilidade do texto.Except for some logotype designs and a few other limited applications, extruded text tends to degrade the readability of the text. Embora estejamos criando experiências para 3D, usamos 2D para o tipo porque ele é mais legível e mais fácil de ler.Even though we're designing experiences for 3D, we use 2D for the type because it's more legible and easier to read.

No HoloLens, o tipo é construído com hologramas usando Light com base no sistema de cores aditivo.In HoloLens, type is constructed with holograms using light based on the additive color system. Assim como outros hologramas, o tipo pode ser colocado no ambiente real em que ele pode ser bloqueado pelo mundo e observado em qualquer ângulo.Just like other holograms, type can be placed in the actual environment where it can be world locked and observed from any angle. O efeito de da Parallax entre o tipo e o ambiente também adiciona profundidade à experiência.The parallax effect between the type and the environment also adds depth to the experience.

Tipografia em realidade misturadaTypography in mixed reality

Regras tipográficas em realidade misturada não são diferentes de nenhum outro lugar.Typographic rules in mixed reality are no different from anywhere else. O texto no mundo físico e no mundo virtual precisa ser legível e legível.Text in both the physical world and the virtual world needs to be legible and readable. O texto pode estar em uma parede ou sobreposto em um objeto físico.Text could be on a wall or superimposed on a physical object. Ele pode ser flutuante junto com uma interface de usuário digital.It could be floating along with a digital user interface. Seja qual for o contexto, aplicamos as mesmas regras tipográficas para leitura e reconhecimento.Whatever the context, we apply the same typographic rules for reading and recognition.

Criar hierarquia claraCreate clear hierarchy

Crie contraste e hierarquia usando diferentes tamanhos e pesos de tipo.Build contrast and hierarchy by using different type sizes and weights. Definir uma rampa de tipo e seguir em toda a experiência do aplicativo fornecerá uma excelente experiência do usuário com a hierarquia de informações consistente.Defining a type ramp and following it throughout the app experience will provide a great user experience with consistent information hierarchy.

Exemplos de rampa de tipoType ramp examples
Defina a rampa de tipo e siga-a em toda a experiência do aplicativoDefine your type ramp and follow it throughout the app experience

Limitar suas fontesLimit your fonts

Evite usar mais de duas famílias de fontes diferentes em um único contexto.Avoid using more than two different font families in a single context. Muitas fontes vão interromper a harmonia e a consistência da sua experiência e dificultar o consumo de informações.Too many fonts will break the harmony and consistency of your experience and make it harder to consume information. No HoloLens, como as informações são sobrepostas sobre o ambiente físico, o uso de muitos estilos de fonte diminuirá a experiência.In HoloLens, since the information is overlaid on top of the physical environment, using too many font styles will degrade the experience. Segoe UI é a fonte de todos os designs digitais da Microsoft.Segoe UI is the font for all Microsoft digital designs. Ele é usado consistentemente no Shell do Windows Mixed Reality.It's used consistently in the Windows Mixed Reality shell. Você pode baixar o arquivo de fonte Segoe UI na página do kit de ferramentas de design do Windows.You can download the Segoe UI font file from the Windows design toolkit page.

Mais informações sobre o tipo de Segoe UIMore information about the Segoe UI typeface

Evitar pesos de fontes finasAvoid thin font weights

Evite usar pesos de fontes leves ou semilight para tamanhos de tipo em 42 pt porque traços verticais finos irão vibrar e degradar a legibilidade.Avoid using light or semilight font weights for type sizes under 42 pt because thin vertical strokes will vibrate and degrade legibility. Fontes modernas com espessura de traço suficiente funcionam bem.Modern fonts with enough stroke thickness work well. Por exemplo, Helvetica e Arial são legíveis no HoloLens usando pesos regulares ou em negrito.For example, Helvetica and Arial are legible in HoloLens using regular or bold weights.

ColorColor

No HoloLens, como os hologramas são construídos com um sistema leve aditivo, o texto em branco é altamente legível.In HoloLens, since the holograms are constructed with an additive light system, white text is highly legible. Você pode encontrar exemplos de texto em branco no menu iniciar e na barra de aplicativos.You can find examples of white text on the Start menu and the App bar. Embora o texto em branco funcione bem sem uma chapa de apoio no HoloLens, um plano de fundo físico complexo poderia dificultar a leitura do tipo.Even though white text works well without a back plate on HoloLens, a complex physical background could make the type difficult to read. É recomendável usar o texto em branco em uma chapa de fundo escura ou colorida para melhorar o foco do usuário e minimizar a distração de um segundo plano físico.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.


É recomendável usar o texto em branco em uma chapa de fundo escura ou colorida. Exemplos de texto em branco em uma chapa de fundo escura ou colorida.We recommend using white text on a dark or colored back plate. Examples of white text on a dark or colored back plate.

Para usar texto escuro, você deve usar uma chapa de fundo brilhante para torná-la legível.To use dark text, you should use a bright back plate to make it readable. Em sistemas de cores aditivos, o preto é exibido como transparente.In additive color systems, black is displayed as transparent. Isso significa que você não verá o texto preto sem uma chapa de fundo colorida.This means you won't see the black text without a colored back plate.

Exemplos de branco em preto e preto em texto brancoExamples of white on black and black on white text
Exemplos de branco em preto e preto em texto brancoExamples of white on black and black on white text

Exemplos de texto preto nos aplicativos do sistema – armazenamento e configuraçõesExamples of black text in the system apps - Store and Settings
Exemplos de texto preto nos aplicativos do sistema – armazenamento e configuraçõesExamples of black text in the system apps - Store and Settings



Como você pode esperar, os tamanhos de tipo que usamos em um PC ou um dispositivo Tablet (normalmente entre 12 e 32pt) parecem pequeno em uma distância de 2 metros.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. Depende das características de cada fonte, mas, em geral, o ângulo mínimo recomendado de visualização e a altura da fonte para legibilidade estão em torno de 0.35 °-0.4 °/12.21-13.97 mm com base em nossos estudos de pesquisa de usuários.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. É cerca de 35-40 pt com o fator de dimensionamento introduzido no texto na página do Unity .It's about 35-40 pt with the scaling factor introduced in Text in Unity page.

Para a interação próxima em 0,45 m (45 cm), o ângulo de exibição da fonte mínimo legível e a altura são 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. É cerca de 9-12 pt com o fator de dimensionamento introduzido no texto no Unity.It's about 9-12 pt with the scaling factor introduced in Text in Unity.

Conteúdo de intervalo de interação próxima e longe em um intervalo de interação próximo e longeNear and far interaction range Content at near and far interaction range

O tamanho mínimo de fonte legívelThe minimum legible font size

DistânciaDistance Ângulo de exibiçãoViewing angle Altura do textoText height Tamanho da fonte * *Font size**
45 cm (distância de manipulação direta)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

O tamanho de fonte legível confortavelmenteThe comfortably legible font size

DistânciaDistance Ângulo de exibiçãoViewing angle Altura do textoText height Tamanho da fonte * *Font size**
45 cm (distância de manipulação direta)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 ° a 0,75 °0.6°-0.75° 20,9-26.2 mm20.9-26.2 mm 59.4-74.2 pt59.4-74.2 pt

Segoe UI (a fonte padrão do Windows) funciona bem na maioria dos casos.Segoe UI (the default font for Windows) works well in most cases. Evite usar famílias de fontes leves ou semileves em tamanho pequeno, uma vez que traços verticais finos serão vibrantes e diminuirá a legibilidade.Avoid using light or semi light font families in small size since thin vertical strokes will vibrate and it will degrade the legibility. Fontes modernas com espessura de traço suficiente funcionam bem.Modern fonts with enough stroke thickness work well. Por exemplo, Helvetica e Arial parecem grandioso e são legíveis no HoloLens com pesos normais ou em negrito.For example, Helvetica and Arial look gorgeous and are legible in HoloLens with regular or bold weights.

Para obter informações mais detalhadas sobre o cálculo do tamanho do texto no Unity, consulte texto no UnityFor more detailed information about text size calculation in Unity, refer to Text in Unity

Exibindo ângulo exibindo a distância, o ângulo e a altura do textoViewing Angle Viewing distance, angle, and text height



RecursosResources

Fontes SegoeSegoe fonts

(Arquivo zip)(Zip file)

Fonte do HoloLensHoloLens font

(Arquivo zip)(Zip file)

Imagem: a fonte do HoloLens fornece os glifos de símbolo usados na realidade mista do Windows.Image: The HoloLens font gives you the symbol glyphs used in Windows Mixed Reality.

A fonte do HoloLens fornece os glifos de símbolo usados na realidade misturada do Windows



Confira tambémSee also