Tipografia no Windows 11

  • Artigo

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 11 ajuda você a criar estrutura e hierarquia em seu conteúdo para maximizar a legibilidade na 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.

Métricas

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 A palavra 'Segoe' renderizada em Segoe UI Variable light
Semileve 350 A palavra 'Segoe' renderizada na semiluz variável da interface do usuário do Segoe
Regular 400 A palavra 'Segoe' renderizada na variável Segoe UI regular
Semibold 600 A palavra 'Segoe' renderizada em Segoe UI Variable semibold
Negrito 700 A palavra 'Segoe' renderizada em negrito variável da interface do usuário do Segoe

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

Segoe UI Variable suporta dois eixos: peso e tamanho óptico. O eixo de peso é incremental, enquanto o eixo de tamanho óptico é automático e ativado por padrão. O eixo de tamanho óptico controla a forma e o tamanho dos contadores na fonte, para priorizar a legibilidade nos tamanhos pequenos e a personalidade nos tamanhos grandes.

Usando a variável fluente Segoe

Rampa de tipo

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

Exemplo Peso Tamanho/altura da linha
Exemplo de texto de legenda Pequeno 12/16 epx
Exemplo de corpo de texto Texto 14/20 epx
Exemplo de texto forte no corpo Texto seminegrito 14/20 epx
Exemplo de corpo de texto grande Texto 18/24 epx
Exemplo de texto de legenda Exibir seminegrito 20/28 epx
Exemplo de texto do título Exibir seminegrito 28/36 epx
Exemplo de texto grande de título Exibir seminegrito 40/52 de epx
Exemplo de texto de exibição Exibir seminegrito 68/92 epx

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
Weight 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

Dica

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