Tipografia em 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 visão atualizada do Segoe clássico e usa a tecnologia de fonte variável para fornecer dinamicamente uma grande legibilidade em tamanhos muito pequenos e contornos aprimorados em tamanhos de exibição.

Métricas

A palavra 'Segoe' renderizada em Segoe UI Variable com vários aspectos da face de tipo realçado

Pesos

Nome do peso Valor do eixo de peso Visual
Claro 300 A palavra 'Segoe' renderizada em Segoe UI Variable light
Semilight 350 A palavra 'Segoe' renderizada no semileve Segoe UI Variable
Normal 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 Segoe UI Variable bold

Eixo óptico

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

Segoe UI Variable dá suporte a 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 na personalidade em tamanhos grandes.

Usando a variável Segoe Fluent

Rampa de tipos

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 Small 16/12 epx
Exemplo de corpo de texto Texto 14/20 epx
Exemplo de texto forte do corpo Semibold de texto 14/20 epx
Exemplo de corpo de texto grande Texto 18/24 epx
Exemplo de texto de subtítulo Exibir semibold 20/28 epx
Exemplo de texto do título Exibir semibold 28/36 epx
Exemplo de texto grande do título Exibir semibold 40/52 epx
Exemplo de texto de exibição Exibir semibold 68/92 epx

Práticas recomendadas de tipografia em Windows 11

Windows 11 usa Segoe UI Variable com os atributos a seguir com base no contexto no qual o texto está sendo exibido.

Atributo Valor Observações
Weight Regular, Semibold Use peso regular para a maioria dos textos, use Semibold para títulos
Alinhamento Esquerda, Centro Alinhar à esquerda por padrão, Alinhar centralizar somente em casos raros, como o texto abaixo dos ícones
Valores mínimos Semibold 14px, 12px Regular Texto menor que esses tamanhos e pesos são ilegíveis em alguns idiomas
Capitalização Caso de sentença Usar maiúsculas e minúsculas de frase para todo o texto da interface do usuário, incluindo títulos
Truncation Reticências e recorte Use reticências na maioria dos casos; recorte é usado apenas em casos raros

Exemplos

Dica

Abra o aplicativo Galeria do WinUI 3 e veja 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