Tipografia em aplicativos do Windows

hero image

Como representação visual da linguagem, a tarefa principal da tipografia é comunicar informações. Seu estilo nunca deve atrapalhar essa meta. Neste artigo, abordaremos como definir o estilo de tipografia em seu aplicativo do Windows para ajudar os usuários a entenderem o conteúdo de modo fácil e eficiente.

Fonte

Você deve usar uma fonte em toda a interface do usuário do aplicativo e recomendamos manter a fonte padrão para aplicativos Windows, Variável de interface do usuário do Segoe. Ela foi projetado para manter a legibilidade ideal em todos os tamanhos e densidades de pixel, e oferece uma estética limpa, leve e aberta que complementa o conteúdo do sistema.

Sample text of Segoe UI Variable font.

Para exibir idiomas diferentes do inglês ou selecionar uma fonte diferente para o seu aplicativo, confira Idiomas e Fontes e veja as fontes recomendadas para aplicativos do Windows.

First screenshot of a green bar that has a green check mark and the word Do in it. Escolha uma fonte para sua interface do usuário.

don't Não misture várias fontes.

Eixos de fonte variável

A fonte Variável de Interface do Usuário do Segoe contém dois eixos para um controle mais fino do texto. Essa fonte tem um eixo de peso (wght) com pesos de Thin (100) a Negrito (700). Ele também tem um eixo de tamanho óptico (opsz) para dimensionamento óptico de 8pt para 36pt. Ao usar controles comuns XAML, a fonte Variável de Interface do Usuário do Segoe será selecionada por padrão para idiomas com suporte. Quando essa fonte ou outra fonte variável com um eixo óptico for usada, o tamanho óptico corresponderá automaticamente ao tamanho da fonte solicitado. Ao usar HTML, o dimensionamento óptico também é automático, mas você precisará especificar a fonte Variável de Interface do Usuário do Segoe no CSS.

Tamanho e dimensionamento

Os tamanhos de fonte em aplicativos UWP são ajustados automaticamente em todos os dispositivos. O algoritmo de dimensionamento garante que uma fonte de 24 px no Surface Hub a 3 m de distância seja tão legível quanto uma fonte de 24 px no telefone de 5 polegadas a alguns centímetros de distância.

viewing distances for different devices.

Devido ao funcionamento do sistema de dimensionamento, você está projetando em pixels efetivos e não em pixels físicos reais, e não precisa alterar os tamanhos da fonte de acordo com diferentes telas ou resoluções.

Second screenshot of a green bar that has a green check mark and the word Do in it.Siga o dimensionamento da rampa de tipo Windows.

don't Não use um tamanho de fonte menor que 12 px.

Hierarquia

Os usuário dependem de uma hierarquia visual ao examinar uma página: os cabeçalhos resumem o conteúdo e o texto do corpo fornece mais detalhes. Para criar uma hierarquia visual clara em seu aplicativo, siga a rampa de tipos do Windows.

Screenshot of three lines of text where the font size gets smaller from one line to the next.

Rampa de tipos

A rampa de tipos do Windows estabelece relações essenciais entre os estilos de tipo em uma página, ajudando os usuários a ler o conteúdo facilmente. Todos os tamanhos estão em pixels efetivos e são otimizados para aplicativos UWP executados em todos os dispositivos.

The Windows type ramp.

Confira as diretrizes sobre como usar a rampa de tipo XAML para obter mais detalhes.

Alinhamento

O TextAlignment padrão é à esquerda e, na maioria dos casos, essa abordagem com recuo à esquerda e irregular à direita fornece ancoragem consistente de conteúdo e um layout uniforme. Para os idiomas da direita para a esquerda, confira Ajustando layout e fontes para dar suporte à globalização.

Shows flush-left text.

<TextBlock TextAlignment="Left">

Contagem de caracteres

Fourth screenshot of a green bar that has a green check mark and the word Do in it. Mantenha 50 a 60 letras por linha para facilitar a leitura.

don't Não use menos de 20 caracteres ou mais de 60 caracteres por linha, pois isso é difícil de ler.

Recorte e elipses

Quando a quantidade de texto se estende além do espaço disponível, recomendamos cortar o texto e inserir reticências [...], que é o comportamento padrão da maioria dos controles de texto UWP.

Shows a device frame with some text clipping.

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

Fifth screenshot of a green bar that has a green check mark and the word Do in it. Recortar texto e encapsular se várias linhas estiverem habilitadas.

don't Não use reticências para evitar desordem visual.

Observação

se os contêineres não estão bem definidos (por exemplo, sem cor de diferenciação da tela de fundo) ou quando há um link para ver mais texto, use as reticências.

Idiomas

Segoe UI Variable é nossa fonte para inglês, idiomas europeus, grego e russo. Para outros idiomas, confira as recomendações a seguir.

Fontes de globalização/localização

Use as APIs de mapeamento de fonte LanguageFont para acesso via programação à família de fontes, tamanho, peso e estilo recomendados para um idioma específico. O objeto LanguageFont oferece acesso às informações corretas de fonte para várias categorias de conteúdo, incluindo cabeçalhos de interface do usuário, notificações, texto do corpo e fontes de corpo de documento editáveis pelo usuário. Para obter mais informações, consulte Ajustando layout e fontes para dar suporte à globalização.

Fontes para idiomas não latinos

Família de fontes Estilos Observações
Ebrima Regular, negrito Fonte de interface do usuário para scripts africanos (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi Regular, negrito Fonte de interface do usuário para scripts norte-americanos (Syllabics canadense, Cherokee, Osage).
Leelawadee UI

Regular, semileve, negrito Fonte de interface do usuário para scripts do Sudeste Asiático (Buginese, Khmer, Lao, Tailandês).
Malgun Gothic

Regular Fonte de interface do usuário para coreano.
Microsoft JhengHei UI

Regular, negrito, claro Fonte de interface do usuário para chinês tradicional.
Microsoft YaHei UI

Regular, negrito, claro Fonte de interface do usuário para chinês simplificado.
Myanmar Text

Regular Fonte de fallback para script de Myanmar.
Nirmala UI

Regular, semileve, negrito Fonte de interface do usuário para scripts sul-asiáticos (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Segoe UI

Regular, itálico, itálico claro, itálico preto, negrito, negrito itálico, claro, semileve, seminegrito, preto Fonte de interface do usuário para árabe, armênio, georgiano e hebraico.
SimSun

Regular Uma fonte de interface do usuário chinesa herdada.
Interface do usuário Yu Gothic

Leve, semileve, regular, seminegrito e negrito Fonte de interface do usuário para japonês.

Fontes

Fontes sans-serif

As fontes sans-serif são uma excelente escolha para títulos e elementos de interface do usuário.

Família de fontes Estilos Observações
Arial Regular, itálico, negrito, negrito itálico, preto Apoia scripts europeus e do Oriente Médio (latino, grego, cirílico, árabe, armênio e hebraico). O peso negro dá suporte apenas a scripts europeus.
Calibri Regular, itálico, negrito, negrito itálico, leve, itálico leve Dá suporte a scripts da Europa e do Oriente Médio (latino, grego, cirílico, árabe e hebraico). Árabe disponível apenas em linha reta.
Consolas Regular, itálico, negrito, negrito itálico Fonte de largura fixa que oferece suporte a scripts europeus (latino, grego e cirílico).
Segoe UI Regular, itálico, itálico claro, itálico preto, negrito, negrito itálico, claro, semileve, seminegrito, preto Fonte de interface do usuário para scripts da Europa e do Oriente Médio (árabe, armênio, cirílico, georgiano, grego, hebraico, latino) e também script Lisu.
Selawik Regular, semileve, claro, negrito, seminegrito Uma fonte de software livre que é métricamente compatível com a interface do usuário do Segoe, destinada a aplicativos em outras plataformas que não desejam agrupar a interface do usuário do Segoe. Obter Selawik em GitHub.

Fontes serif

As fontes serif são adequadas para apresentar grandes quantidades de texto.

Família de fontes Estilos Observações
Cambria Regular Fonte serif que oferece suporte a scripts europeus (latino, grego, cirílico).
Courier New Regular, itálico, negrito, negrito itálico Fonte de largura fixa Serif que dá suporte a scripts europeus e do Oriente Médio (latino, grego, cirílico, árabe, armênio e hebraico).
Geórgia Regular, itálico, negrito, negrito itálico Dá suporte a scripts europeus (latino, grego e cirílico).
Times New Roman Regular, itálico, negrito, negrito itálico Fonte herdada que oferece suporte a scripts europeus (latino, grego, cirílico, árabe, armênio, hebraico).

Fontes variáveis

Fontes variáveis são boas para controlar precisamente a aparência do texto.

Família de fontes Eixos Observações
Bahnschrift Peso, Largura Fonte variável que dá suporte a latim, grego e cirílico.
Variável Segoe UI Peso, tamanho óptico Fonte variável que dá suporte a latim, grego e cirílico.

Ícones e símbolos

Família de fontes Estilos Observações
Ativos de Segoe MDL2 Regular Fonte de interface do usuário para ícones de aplicativos. Para obter mais informações, consulte o artigo de ativos do Segoe MDL2 .
Emoji Segoe da interface do usuário Regular Fonte de interface do usuário para Emoji.
Segoe UI Symbol Regular Fonte de fallback para símbolos.