Tipografia no Windows

Artigo
11/05/2024

Várias palavras renderizadas em Segoe UI Variable

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

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

Dica

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

Usando a variável fluente Segoe

O Segoe UI Variable suporta dois eixos para um controle mais preciso do texto: peso e tamanho óptico.

O eixo de peso (wght) é incremental com pesos de Fino (100) a Negrito (700).
O eixo de tamanho óptico (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 escala óptica de 8 pt a 36 pt).

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.

A palavra 'Segoe' renderizada na variável Segoe UI com vários aspectos do tipo de letra destacados

Pesos

Nome do peso	Valor do eixo de peso	Visual
Claro	300
Semileve	350
Regular	400
Semibold	600
Negrito	700

Eixo óptico

Uma letra minúscula renderizada na variável Segoe UI com contornos das diferentes formas que ela pode ter com base no contexto em que está sendo renderizada

Práticas recomendadas de tipografia no Windows 11

Windows 11 usa a variável de interface do usuário Segoe com os seguintes atributos com base no contexto em que o texto está sendo exibido.

Atributo	Valor	Observações
Peso	Regular, seminegrito	Use peso normal para a maioria dos textos, use seminegrito para títulos
Alinhamento	Esquerda, Centro	Alinhar à esquerda por padrão, Alinhar ao centro apenas em casos raros, como texto abaixo dos ícones
Valores mínimos	14px Seminegrito, 12px Regular	Textos menores que esses tamanhos e pesos são ilegíveis em alguns idiomas
Caixa	Caso da frase	Use maiúsculas e minúsculas para todo o texto da interface do usuário, incluindo títulos
Truncation	Reticências e recorte	Use reticências na maioria dos casos; O recorte é usado apenas em casos raros

Exemplos

Abra o aplicativo Galeria do WinUI 3 e veja os princípios de tipografia em ação.

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

Tipografia em aplicativos do Windows

imagem Hero

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.

Texto de amostra da fonte Segoe UI Variable.

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.

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 alguns centímetros de distância.

distâncias de exibição em diferentes dispositivos.

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.

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.

Captura de tela de três linhas de texto em que o tamanho da fonte fica menor de uma linha para a próxima.

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 do Windows em execução em todos os tamanhos de tela.

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

Exemplo	Weight	Tamanho/altura da linha
	Pequeno	12/16 epx
	Texto	14/20 epx
	Texto seminegrito	14/20 epx
	Texto	18/24 epx
	Exibir seminegrito	20/28 epx
	Exibir seminegrito	28/36 epx
	Exibir seminegrito	40/52 de epx
	Exibir seminegrito	68/92 epx

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.

Mostra o texto nivelado à esquerda.

<TextBlock TextAlignment="Left">

Contagem de caracteres

Quarta captura de tela de uma barra verde que tem uma marca de seleção verde e a palavra O que fazer nela. Mantenha de 50 a 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 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.

Mostra um quadro de dispositivos com alguns recortes 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 O que fazer nela. Recorte o texto e quebre se várias linhas estiverem habilitadas.

não 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 Fonte Segoe Fluent Icons .
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.

Compartilhar via

Tipografia no Windows