Tipografia em aplicativos do Windows
Como representação visual da linguagem, a tarefa main 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 é recomendável manter a fonte padrão para aplicativos do 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.
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 fino do texto. Essa fonte tem um eixo de peso (wght
) com pesos de Fino (100) a Negrito (700). Ele também tem um eixo de tamanho óptico (opsz
) para dimensionamento óptico de 8pt a 36pt. Ao usar controles comuns XAML, a fonte Variável segoe UI 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 Segoe UI Variable 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.
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 de tipo do 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 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.
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 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 elipses
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"/>
Recortar texto e encapsular se várias linhas estiverem habilitadas.
Não use reticências para evitar desordens visuais.
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 (Canadian Syllabics, 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 | Dá suporte a 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. Obtenha Selawik no 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 latino, grego e cirílico. |
Variável Segoe UI | Peso, tamanho óptico | Fonte variável que dá suporte a latino, 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 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. |
Artigos relacionados
Windows developer
Comentários
https://aka.ms/ContentUserFeedback.
Brevemente: Ao longo de 2024, vamos descontinuar progressivamente o GitHub Issues como mecanismo de feedback para conteúdos e substituí-lo por um novo sistema de feedback. Para obter mais informações, veja:Submeter e ver comentários