Tipografia em aplicativos do Windows
Como a representação visual da linguagem, a principal tarefa da tipografia é informar. 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 seu aplicativo e recomendamos manter a fonte padrão para aplicativos do Windows, Segoe UI Variable. 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.
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.
Escolha uma fonte para sua interface do usuário.
Não misture várias fontes.
Eixos de fonte variável
A fonte Segoe UI Variable contém dois eixos para um controle mais preciso do texto. Essa fonte tem um eixo de peso (wght
) com pesos de Fino (100) a Negrito (700). Ele também possui um eixo de tamanho óptico (opsz
) para escala óptica de 8pt a 36pt. Ao usar controles comuns XAML, a fonte Variável da Interface do Usuário Segoe será selecionada por padrão para idiomas com suporte. Quando essa fonte ou outra fonte variável com um eixo óptico é 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 Segoe UI Variable em 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.
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.
Siga o dimensionamento de rampa do tipo Windows.
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.
Rampa de tipo
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.
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.
<TextBlock TextAlignment="Left">
Contagem de caracteres
Mantenha de 50 a 60 letras por linha para facilitar a leitura.
Não use menos de 20 caracteres ou mais de 60 caracteres por linha, pois isso é difícil de ler.
Recorte e reticências
Quando a quantidade de texto se estende além do espaço disponível, recomendamos recortar o texto e inserir reticências [...], que é o comportamento padrão da maioria dos controles de texto UWP.
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
Recorte o texto e quebre se várias linhas estiverem habilitadas.
Não use reticências para evitar confusão 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.
Globalizando/localizando fontes
Use as APIs de mapeamento de fontes LanguageFont para acesso programático à família de fontes, tamanho, peso e estilo recomendados para um idioma específico. O objeto LanguageFont fornece acesso às informações de fonte corretas para várias categorias de conteúdo, incluindo cabeçalhos de interface do usuário, notificações, corpo de texto 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 (Canadian Syllabics, Cherokee, Osage). |
Interface do usuário do Leelawadee | Regular, Semileve, Negrito | Fonte de interface do usuário para scripts do Sudeste Asiático (Buginese, Khmer, Laos, Thai). |
Gótico Malgun | Regular | Fonte da interface do usuário para coreano. |
Interface do usuário do Microsoft JhengHei | Regular, Negrito, Leve | Fonte da interface do usuário para chinês tradicional. |
Interface do usuário do Microsoft YaHei | Regular, Negrito, Leve | Fonte da interface do usuário para chinês simplificado. |
Texto de Mianmar | Regular | Fonte de fallback para script Myanmar. |
Nirmala UI | Regular, Semileve, Negrito | Fonte de interface do usuário para scripts do sul da Ásia (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, Preto Itálico, Negrito, Negrito Itálico, Claro, Semileve, Seminegrito, Preto | Fonte da interface do usuário para árabe, armênio, georgiano e hebraico. |
SimSun | Regular | Uma fonte de interface do usuário chinesa herdada. |
Yu Gothic UI | Leve, semileve, regular, seminegrito e negrito | Fonte da interface do usuário para japonês. |
Fontes
Fontes sem serifa
As fontes sem serifa são uma ótima opção 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 | Suporta scripts europeus e do Oriente Médio (latim, grego, cirílico, árabe, armênio e hebraico). O peso preto suporta apenas scripts europeus. |
Calibri | Regular, Itálico, Negrito, Negrito Itálico, Claro, Itálico Claro | Suporta scripts europeus e do Oriente Médio (latim, grego, cirílico, árabe e hebraico). Árabe disponível apenas nos montantes. |
Consolas | Regular, Itálico, Negrito, Negrito Itálico | Fonte de largura fixa que suporta scripts europeus (latim, grego e cirílico). |
Segoe UI | Regular, Itálico, Itálico Claro, Preto Itálico, Negrito, Negrito Itálico, Claro, Semileve, Seminegrito, Preto | Fonte de interface do usuário para scripts europeus e do Oriente Médio (árabe, armênio, cirílico, georgiano, grego, hebraico, latim) e também script Lisu. |
Selawik | Regular, Semileve, Claro, Negrito, Seminegrito | Uma fonte de código aberto que é metricamente 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. Obtenha a Selawik no GitHub. |
Fontes com serifa
As fontes com serifa são boas para apresentar grandes quantidades de texto.
Família de fontes | Estilos | Observações |
---|---|---|
Cambria | Regular | Fonte com serifa que suporta scripts europeus (latim, grego, cirílico). |
Courier Novo | Regular, Itálico, Negrito, Negrito Itálico | Fonte de largura fixa com serifa compatível com scripts europeus e do Oriente Médio (latim, grego, cirílico, árabe, armênio e hebraico). |
Geórgia | Regular, Itálico, Negrito, Negrito Itálico | Suporta scripts europeus (latim, grego e cirílico). |
Times New Roman | Regular, Itálico, Negrito, Negrito Itálico | Fonte legada que suporta scripts europeus (latim, grego, cirílico, árabe, armênio, hebraico). |
Fontes variáveis
Fontes variáveis são boas para controlar com precisão a aparência do texto.
Família de fontes | Eixos | Observações |
---|---|---|
Bahnschrift | Peso, largura | Fonte variável compatível com latim, grego e cirílico. |
Variável Segoe UI | Peso, tamanho óptico | Fonte variável compatível com latim, grego e cirílico. |
Símbolos e ícones
Família de fontes | Estilos | Observações |
---|---|---|
Ativos de Segoe MDL2 | Regular | Fonte da interface do usuário para ícones de aplicativos. Para obter mais informações, consulte o artigo Ativos Segoe MDL2. |
Segoe UI Emoji | Regular | Fonte da interface do usuário para Emoji. |
Símbolo da interface do usuário do Segoe | Regular | Fonte de fallback para símbolos. |
Artigos relacionados
Windows developer
Comentários
https://aka.ms/ContentUserFeedback.
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulteEnviar e exibir comentários de