Tipografia no Windows

Como representação visual da linguagem, a principal tarefa da tipografia é comunicar informação. O sistema de tipos do Windows ajuda você a criar estrutura e hierarquia em seu conteúdo para maximizar a legibilidade e legibilidade em sua interface do usuário.

Segoe UI Variable é a nova fonte do sistema para Windows. É uma visão atualizada do clássico Segoe e usa tecnologia de fonte variável para fornecer dinamicamente grande legibilidade em tamanhos muito pequenos e contornos aprimorados em tamanhos de exibição.

Sugestão

Este artigo descreve como a linguagem Fluent Design é aplicada a aplicativos do Windows. Para obter mais informações, consulte Design fluente - tipografia.

Usando a variável Segoe Fluent

Segoe UI Variable suporta dois eixos para um controle mais fino do texto: peso e tamanho ótico.

• O eixo de peso (wght) é incremental com graus de espessura de Thin (100) a Bold (700).
• O eixo de tamanho ótico (opsz) é automático e ativado por padrão. Ele controla a forma e o tamanho dos contadores na fonte, para priorizar a legibilidade nos tamanhos pequenos e a personalidade nos tamanhos grandes (para dimensionamento ótico de 8pt a 36pt).

Ao usar os controlos comuns do XAML, a fonte Segoe UI Variable será selecionada por padrão para os idiomas suportados . Quando esta fonte ou outra fonte variável com um eixo ótico é usada, o tamanho ótico corresponderá automaticamente ao tamanho de fonte solicitado. Ao usar HTML, o dimensionamento ótico também é automático, mas você precisará especificar a fonte Segoe UI Variable em CSS.

Pesos

Nome do peso	Valor do eixo de peso	Visuais
Luz	300
Seminegrito	350
Regular	400
Seminegrito	600
Negrito	setecentos

Eixo ótico

Práticas recomendadas de tipografia no Windows 11

O Windows 11 usa a variável Segoe UI com os seguintes atributos com base no contexto em que o texto está sendo exibido.

Atributo	Valor	Observações
Peso	Regular, Seminegrito	Use o peso regular para a maioria do texto, use Seminegrito para títulos
Alinhamento	Esquerda, Centro	Alinhar à esquerda por padrão, alinhar ao centro apenas em casos raros, como texto abaixo de ícones.
Valores mínimos	14px Semibold, 12px Regular	Textos menores que esses tamanhos e pesos são ilegíveis em alguns idiomas
Invólucro	Caso de sentença	Usar caixa de frase para todo o texto da interface do usuário, incluindo títulos
Truncamento	Elipses e recorte	Use elipses na maioria dos casos; O clipping só é usado em casos raros

Exemplos

Abra o aplicativo WinUI 3 Gallery e veja Princípios de tipografia em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Tipografia em aplicativos do Windows

Como representação visual da linguagem, a principal tarefa da tipografia é comunicar informação. Seu estilo nunca deve atrapalhar esse objetivo. Neste artigo, discutiremos como estilizar a tipografia em seu aplicativo do Windows para ajudar os usuários a entender o conteúdo de forma 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. Ele foi projetado para manter a legibilidade ideal entre tamanhos e densidades de pixels 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 seu aplicativo, consulte Idiomas e fontes para nossas fontes recomendadas para aplicativos do Windows.

Tamanho e dimensionamento

Os tamanhos de fonte em aplicativos XAML são dimensionados automaticamente em todos os dispositivos. O algoritmo de dimensionamento garante que uma fonte de 24 px em uma tela grande a 10 metros de distância seja tão legível quanto uma fonte de 24 px em uma tela pequena a poucos centímetros de distância.

Devido ao funcionamento do sistema de dimensionamento, você está projetando em pixels efetivos, não em pixels físicos reais, e não deve ter que alterar tamanhos de fonte para diferentes tamanhos de tela ou resoluções.

Hierarquia

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

Tipo rampa

A rampa de tipos do Windows estabelece relações cruciais entre os estilos de texto 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 do Windows executados em todos os tamanhos de tela.

O Windows 11 usa os seguintes valores para vários tipos de texto na interface do usuário.

Exemplo	Peso	Tamanho/altura da linha
	Pequeno	12/16 EPX
	Texto	14/20 EPX
	Texto em seminegrito	14/20 EPX
	Texto	18/24 EPX
	Mostrar meio-negrito	20/28 EPX
	Mostrar meio-negrito	28/36 EPX
	Mostrar meio-negrito	40/52 EPX
	Mostrar meio-negrito	68/92 EPX

Confira as orientações sobre como usar a rampa de tipo XAML para mais detalhes.

Alinhamento

O padrão de TextAlignment é à esquerda e, na maioria dos casos, alinhamento à esquerda e à direita irregular fornecem ancoragem consistente do conteúdo e um layout uniforme. Para idiomas RTL, consulte Ajustando layout e fontes para dar suporte à globalização.

<TextBlock TextAlignment="Left">

Contagem de carateres

Mantenha entre 50 e 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"/>

Clipe de texto e molde se várias linhas estiverem habilitadas.

Não use elipses para evitar confusão visual.

Observação

Se os contêineres não estiverem bem definidos (por exemplo, sem diferenciação da cor do plano de fundo) ou quando houver um link para ver mais texto, use reticências.

Idiomas

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

Globalização/localização de fontes

Utilize as APIs de mapeamento de fontes LanguageFont para ter acesso programático à família de fontes, tamanho, peso e estilo recomendados para uma língua específica. 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 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, Ousado	Fonte da interface do usuário para scripts africanos (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi	Regular, Ousado	Fonte de interface de usuário para scripts norte-americanos (Canadian Syllabics, Cherokee, Osage).
Leelawadee UI	Regular, Semileve, Ousado	Fonte da interface do usuário para scripts do Sudeste Asiático (Buginese, Khmer, Lao, Thai).
Malgun Gótico	Regular	Fonte da interface do utilizador em coreano.
Interface do usuário do Microsoft JhengHei	Regular, Negrito, Fino	Fonte da interface de utilizador para chinês tradicional.
Interface do usuário do Microsoft YaHei	Regular, Negrito, Fino	Fonte para a interface do utilizador em Chinês Simplificado.
Texto Mianmar	Regular	Fonte de fallback para script Myanmar.
Nirmala UI	Regular, Semileve, Ousado	Fonte de interface de 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 antiga fonte de interface do usuário chinesa.
Yu Gothic UI	Leve, Semileve, Regular, Seminegrito, Ousado	Fonte da interface do usuário para japonês.

Fontes

Fontes Sans-serif

As fontes Sans-serif são uma ótima opção para cabeçalhos e elementos da 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). Black weight 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 elementos verticais.
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 da interface do usuário para scripts europeus e do Oriente Médio (árabe, armênio, cirílico, georgiano, grego, hebraico, latim) e também para o script Lisu.
Selawik	Regular, Semileve, Leve, Negrito, Seminegrito	Uma fonte de código aberto que é metricamente compatível com Segoe UI, destinada a aplicações noutras plataformas que não querem integrar Segoe UI. Obter Selawik no GitHub.

Fontes Serif

As fontes serifadas são boas para apresentar grandes quantidades de texto.

Família de fontes	Estilos	Observações
Cambria	Regular	Fonte Serif que suporta scripts europeus (latim, grego, cirílico).
Courier Novo	Regular, Itálico, Negrito, Negrito Itálico	Fonte de largura fixa Serif que suporta 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 herdada 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 que suporta latim, grego e cirílico.
Variável Segoe UI	Peso, tamanho ótico	Fonte variável que suporta latim, grego e cirílico.

Símbolos e ícones

Família de fontes	Estilos	Observações
Segoe MDL2 Ativos	Regular	Fonte da interface do usuário para ícones de aplicativos. Para obter mais informações, consulte o artigo sobre a fonte Segoe Fluent Icons.
Segoe UI Emoji	Regular	Fonte da interface do usuário para Emoji.
Símbolo Segoe UI	Regular	Fonte de substituição para símbolos.

Artigos relacionados

• Controles de texto
• recursos de tema XAML
• Estilos de XAML
• Tipografia Microsoft
• Fontes variáveis