Tipografia no Windows

Várias palavras renderizadas no Segoe UI Variable

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

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 Windows aplicações. 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.

A palavra 'Segoe' renderizada em Segoe UI Variable com vários aspetos do tipo de letra destacados

Pesos

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

Eixo ótico

Uma letra minúscula

Boas práticas de tipografia no Windows 11

O Windows 11 utiliza a Variável UI Segoe com os seguintes atributos consoante o contexto em que o texto está a ser 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

A aplicação WinUI 3 Gallery inclui exemplos interativos da maioria dos controlos, funcionalidades e funcionalidades do WinUI. Descarrega a aplicação no Microsoft Store ou obtém o código-fonte no GitHub

Tipografia nas Aplicações Windows

imagem do herói

Como representação visual da linguagem, a principal tarefa da tipografia é comunicar informação. Seu estilo nunca deve atrapalhar esse objetivo. Neste artigo, vamos discutir como estilizar a tipografia na sua aplicação Windows para ajudar os utilizadores a compreender o conteúdo de forma fácil e eficiente.

Fonte

Deve usar uma fonte em toda a interface da sua app, e recomendamos manter a fonte padrão para Windows apps, 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.

Texto de exemplo da fonte Segoe UI Variable.

Para mostrar línguas não inglesas ou para selecionar uma fonte diferente para a sua aplicação, consulte Languages e Fonts para as nossas fontes recomendadas para Windows apps.

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.

distâncias de visualização para diferentes dispositivos.

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 na sua aplicação, siga a rampa de tipos do Windows.

Captura de ecrã de três linhas de texto em que o tamanho do tipo de letra fica menor de uma linha para a seguinte.

Tipo rampa

A rampa de tipos do Windows estabelece relações cruciais entre os estilos de tipo numa página, ajudando os utilizadores a ler o conteúdo facilmente. Todos os tamanhos estão em píxeis efetivos e otimizados para aplicações do Windows em execução em todos os tamanhos de ecrã.

O Windows 11 utiliza os seguintes valores para vários tipos de texto na interface.

Exemplo	Peso	Tamanho/altura da linha
	Pequeno	12/16 EPX
	Texto	14/20 EPX
	Texto em seminegrito	14/20 EPX
	Texto	18/24 EPX
	Texto em seminegrito	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

Estes estilos de tipo estão disponíveis como recursos estáticos XAML que seguem as convenções de rampa de tipos XAML , por isso pode usá-los diretamente na sua aplicação.

Observação

Os estilos negrito e itálico não fazem parte da hierarquia de tipos do Windows. Use Semibold em vez de Bold para dar ênfase. O itálico é excluído porque pode reduzir a legibilidade e a leitura, especialmente para pessoas com dislexia.

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.

Mostra texto alinhado à esquerda.

<TextBlock TextAlignment="Left">

Contagem de carateres

Quarta captura de ecrã de uma barra verde que tem uma marca de seleção verde e a palavra 'Do' nela. Mantenha entre 50 e 60 letras por linha para facilitar a leitura.

Não 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 ultrapassa o espaço disponível, recomendamos recortar o texto e inserir reticências [...], que é o comportamento padrão da maioria dos controlos de texto do WinUI.

Mostra um quadro de dispositivo com algum recorte de texto.

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

Quinta captura de tela de uma barra verde que tem uma marca de seleção verde e a palavra Fazer nela. Clipe de texto e molde se várias linhas estiverem habilitadas.

Não 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.
Microsoft JhengHei UI	Regular, Negrito, Fino	Fonte da interface de utilizador para chinês tradicional.
Microsoft YaHei UI	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. Obtenha 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
Ícones fluentes de Segoe	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.

Comentários

Esta página foi útil?

Last updated on 2026-03-11