Fontes

Nota

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossa diretrizes de design atuais.

Os usuários interagem mais com o texto do que com qualquer outro elemento no Microsoft Windows. Segoe UI (pronuncia-se "SEE-go") é a fonte do sistema Windows. O tamanho da fonte padrão foi aumentado para 9 pontos.

A fonte da interface do usuário do Segoe.

Segoe UI e Segoe não são a mesma fonte. A interface do usuário do Segoe é a fonte do Windows destinada a cadeias de caracteres de texto da interface do usuário. Segoe é uma fonte de identidade visual usada pela Microsoft e parceiros para produzir material para impressão e publicidade.

A interface do usuário do Segoe é uma face de tipo acessível, aberta e amigável e, como resultado, tem melhor legibilidade do que Tahoma, Microsoft Sans Serif e Arial. Tem as características de um humanista sans serif: as larguras variadas de suas capitais (E e S estreitos, por exemplo, em comparação com Helvetica, onde as larguras são mais parecidas, bastante largas); o estresse e as formas de letras de sua minúscula; e seu verdadeiro itálico (em vez de um "oblíqua" ou romano inclinado, como muitos sans serifs de aparência industrial). A face de tipo destina-se a dar o mesmo efeito visual na tela e na impressão. Foi projetado para ser um humanista sans serif sem caráter forte ou peculiaridade distraidora.

A interface do usuário do Segoe é otimizada para ClearType, que está ativada por padrão no Windows. Com o ClearType habilitado, a interface do usuário do Segoe é uma fonte elegante e legível. Sem ClearType habilitado, a interface do usuário do Segoe é apenas marginalmente aceitável. Esse fator determina quando você deve usar a interface do usuário do Segoe.

A interface do usuário do Segoe inclui caracteres latinos, gregos, cirílicos e árabes. Há novas fontes, também otimizadas para ClearType, criadas para outros conjuntos e usos de caracteres. Eles incluem Meiryo para japonês, malgun gótico para coreano, Microsoft JhengHei para chinês (tradicional), Microsoft YaHei para chinês (simplificado), Gisha para hebraico e Leelawadee para tailandês, e as fontes da Coleção ClearType projetadas para uso de documentos.

Meiryo inclui caracteres latinos baseados em Verdana. Malgun Gothic, Microsoft JhengHei e Microsoft YaHei usam uma interface do usuário personalizada do Segoe. O uso de versões itálicas dessas fontes não é recomendado. Malgun Gothic, Microsoft JhengHei e Microsoft YaHei são fornecidos apenas em estilos regulares e em negrito, o que significa que os caracteres itálicos são sintetizados inclinando os estilos verticalmente. Embora Meiryo inclua itálicos verdadeiros e itálicos ousados, esses estilos só se aplicam aos caracteres latinos que os caracteres japoneses permanecem eretos quando o estilo itálico é aplicado.

Uma variação do Meiryo, chamada de interface do usuário do Meiryo, é preferida nas faixas de opções interface do usuário de comando.

Para dar suporte a localidades que usam esses conjuntos de caracteres, a interface do usuário do Segoe é substituída pelas fontes corretas, dependendo de cada localidade durante o processo de de localização.

Para licenciar a interface do usuário do Segoe e outras fontes da Microsoft para distribuição com um programa baseado no Windows, entre em contato com Monotype.

Observação: as Diretrizes de relacionadas a de estilo e tom e de texto da interface do usuário são apresentadas em artigos separados.

Conceitos de design

Fontes, tipos de tipo, tamanhos de ponto e atributos

Na tipografia tradicional, uma fonte descreve uma combinação de uma face de tipo, um tamanho de ponto e atributos. Uma face de tipo é a aparência da fonte. Segoe UI, Tahoma, Verdana e Arial são todos tipos de tipo. O tamanho do ponto refere-se ao tamanho da fonte, medido da parte superior dos ascendentes até a parte inferior dos descendentes, menos o espaçamento interno (chamado de líder). Um ponto é aproximadamente 1/72 polegadas. Por fim, uma fonte pode ter atributos de negrito ou itálico.

Informalmente, as pessoas geralmente usam a fonte no lugar da tipface conforme feito neste artigo, mas tecnicamente, a interface do usuário do Segoe é uma face de tipo, não uma fonte. Cada combinação de atributos é uma fonte exclusiva (por exemplo, a interface do usuário segoe de 9 pontos regular, a interface do usuário do Segoe de 10 pontos em negrito e assim por diante).

Serif e sans serif

As faces de tipo são serif ou sans serif. Serif refere-se a pequenas curvas que geralmente terminam os traços de letras em uma fonte. Uma face de tipo sans serif não tem serifs.

Os leitores geralmente preferem fontes serif usadas como texto do corpo em um documento. Os serifs fornecem uma sensação de formalidade e elegância a um documento. Para o texto da interface do usuário, a necessidade de uma aparência limpa e a menor resolução de monitores de computador torna as faces de tipo sans serif a melhor opção.

Contraste

O texto é mais fácil de ler quando há uma grande diferença entre a luminância do texto e a tela de fundo. O texto preto em um plano de fundo branco fornece o texto escuro de maior contraste em um plano de fundo muito claro também pode fornecer alto contraste. Essa combinação é melhor para superfícies de interface do usuário primárias.

O texto claro em um plano de fundo escuro oferece bom contraste, mas não tão bom quanto o texto escuro em um plano de fundo claro. Essa combinação funciona bem para superfícies de interface do usuário secundárias, como painéis de tarefas do Explorer, que você deseja desenfatizar em relação às superfícies primárias da interface do usuário.

Se você quiser garantir que os usuários leiam seu texto, use o texto escuro em um plano de fundo claro.

Acessibilidades

O texto pode usar as seguintes recursos para indicar como ele é usado:

• Ponteiro. O ponteiro da barra de I ("seleção de texto") indica que o texto é selecionável, enquanto o ponteiro de seta para a esquerda ("seleção normal") indica que o texto não está.
• Acento circunflexo. Quando o texto tem o foco de entrada, o cursor é a barra vertical piscando que indica o ponto de inserção/seleção em texto selecionável ou editável.
• Caixa. Uma caixa em torno de texto que indica que ele é editável. Para reduzir o peso da apresentação, a caixa poderá ser exibida dinamicamente somente quando o texto editável for selecionado.
• Cor do primeiro plano. Cinza claro indica que o texto está desabilitado. Cores não cinza, especialmente azul e roxo, indicam que o texto é um link.
• Cor da tela de fundo. Um plano de fundo cinza claro sugere fracamente que o texto é somente leitura, mas, na prática, o texto somente leitura pode ter qualquer plano de fundo de cor.

Essas funcionalidades são combinadas para os seguintes significados:

• Editável. Texto exibido em uma caixa, com um ponteiro de seleção de texto, um cursor (em foco de entrada) e geralmente em um plano de fundo branco.
• Somente leitura, selecionável. Texto com um ponteiro selecionado e um cursor (no foco de entrada).
• Somente leitura, não selecionável. Texto com um ponteiro de seta.
• Desactivado. Texto cinza claro com um ponteiro de seta, às vezes em um plano de fundo cinza.

O texto somente leitura tradicionalmente tem um plano de fundo cinza, mas um plano de fundo cinza não é necessário. Na verdade, um plano de fundo cinza pode ser indesejável, especialmente para grandes blocos de texto, pois sugere que o texto está desabilitado e desencoraja a leitura.

Acessibilidade e a fonte, os tamanhos e as cores do sistema

As diretrizes para tornar o texto acessível a usuários com deficiências ou deficiências podem ser resumidas a uma regra simples: respeitar as configurações do usuário sempre usando a fonte, os tamanhos e as cores do sistema.

se fizer apenas uma coisa...

Respeite as configurações do usuário sempre usando a fonte, os tamanhos e as cores do sistema.

Desenvolvedores: Do código, você pode determinar as propriedades da fonte do sistema (incluindo seu tamanho) usando a função de API GetThemeFont. Você pode determinar as cores do sistema usando a função de API GetThemeSysColor.

Como você não pode fazer suposições sobre as configurações de tema do sistema dos usuários, você deve:

• Sempre baseie suas cores de fonte e planos de fundo fora das cores do tema do sistema. Nunca crie suas próprias cores com base em valores RGB fixos (vermelho, verde, azul).
• Sempre corresponda as cores de texto do sistema com as cores de plano de fundo correspondentes. Por exemplo, se você escolher COLOR_STATICTEXT para a cor do texto, também deverá escolher COLOR_STATIC para a cor da tela de fundo.
• Sempre crie novas fontes com base nas variações proporcionais da fonte do sistema. Dadas as métricas de fonte do sistema, você pode criar variações em negrito, itálico, maior e menor.

Uma maneira simples de garantir que seu programa respeite as configurações dos usuários é testar usando um tamanho de fonte diferente e um esquema de cores de alto contraste. Todo o texto deve redimensionar e exibir corretamente no esquema de cores escolhido.

Padrões de uso

O texto tem vários padrões de uso:

Uso	Descrição
texto da barra de título Texto na barra de título que identifica a janela.
instruções principais Texto que explica o que fazer em uma página, janela ou caixa de diálogo.
instruções secundárias Texto complementar que explica o que fazer em uma página, janela ou caixa de diálogo.
de texto normal Texto comum (somente leitura) exibido em uma interface do usuário.
de texto enfatizado O texto em negrito é usado para facilitar a análise do texto e chamar a atenção para o texto que os usuários devem ler. O texto itálico é usado para se referir ao texto literalmente (em vez de aspas) e enfatizar palavras específicas.
de texto editável O texto que os usuários podem editar é mostrado em uma caixa. para reduzir o peso da apresentação, a caixa poderá ser exibida somente quando o texto editável for selecionado.
texto desabilitado Texto que não se aplica ao contexto atual, como rótulos para controles desabilitados. O texto desabilitado indica que os usuários (normalmente) não devem se preocupar em ler o texto.
links do Texto usado para navegar até outra página, janela ou tópico de ajuda ou iniciar um comando.
de cabeçalho do grupo Texto usado para agrupar itens em um modo de exibição de lista.
nome do arquivo Texto do nome do arquivo (somente no modo de exibição de conteúdo).
de texto do documento Texto usado em documentos (em oposição ao texto da interface do usuário).
títulos do documento Texto usado como um título dentro de um documento.

Diretrizes

Fontes e cores

• As seguintes fontes e cores são padrões para Windows Vista e Windows 7.

Padrão	Símbolo de tema	Fonte, Cor
	CaptionFont	9 pt. preto (nº 000000) Interface do usuário do Segoe
	MainInstruction	12 pt. azul (#003399) Interface do usuário do Segoe
	Instrução	9 pt. preto (nº 000000) Interface do usuário do Segoe
	BodyText	9 pt. preto (nº 000000) Interface do usuário do Segoe
	BodyText	9 pt. preto (nº 000000) Interface do usuário do Segoe, negrito ou itálico
	BodyText	9 pt. preto (#000000) Interface do usuário do Segoe, em uma caixa
	Desactivado	9 pt. cinza escuro (#323232) Interface do usuário do Segoe
	HyperLinkText	9 pt. azul (#0066CC) Interface do usuário do Segoe
	Quente	9 pt. azul claro (#3399FF) Interface do usuário do Segoe
		11 pt. azul (#003399) Interface do usuário do Segoe
		11 pt. preto (nº 000000) Interface do usuário do Segoe
	(nenhum)	9 pt. preto (nº 000000) Calibri
	(nenhum)	17 pt. preto (nº 000000) Calibri

• Escolher fontes e otimizar layouts de janela com base na tecnologia de interface do usuário e na versão de destino do Windows:

Tecnologia de interface do usuário	Versão de destino do Windows	Fontes para usar e otimizar para
Windows Presentation Foundation	Todo	Use partes de tema do WPF.
Win32 ou WinForms	Windows Vista ou posterior	Use a fonte de interface do usuário segoe apropriada.
	Componentes extensíveis ou pré-Windows Vista	Para direcionar o Windows XP e o Windows 2000, use a pseudo fonte ms shell Dlg 2 de 8 pontos, que é mapeada para Tahoma. Para direcionar versões anteriores do Windows, use a pseudo fonte do MS Shell Dlg de 8 pontos, que é mapeada para Tahoma no Windows 2000 e Windows XP, e para MS Sans Serif no Windows 95, Windows 98, Windows Millennium Edition e Windows NT 4.0.

• Desenvolvedores do :
  • Para elementos que usam layout fixo (como modelos de diálogo do Windows e WinForms), codifique a fonte apropriada da tabela anterior.
  • Para elementos que usam layout dinâmico (como o Windows Presentation Foundation), use as fontes de tema. Use APIs de tema como DrawThemeText para desenhar texto com base no símbolo do tema. Certifique-se de ter uma alternativa com base nas métricas do sistema caso o serviço de tema não esteja em execução.
• Para a interface do usuário do Segoe, use um tamanho de fonte de 9 pontos ou maior. A fonte da interface do usuário do Segoe é otimizada para esses tamanhos, portanto, evite usar tamanhos menores.
• Sempre corresponda as cores de texto do sistema com as cores de plano de fundo correspondentes. Por exemplo, se você escolher COLOR_STATICTEXT para a cor do texto, também deverá escolher COLOR_STATIC para a cor da tela de fundo.
• Sempre crie novas fontes com base nas variações proporcionais da fonte do sistema. Dadas as métricas de fonte do sistema, você pode criar variações em negrito, itálico, maior e menor.
• Exiba grandes blocos de texto somente leitura (como termos de licença) em um plano de fundo claro em vez de um plano de fundo cinza. Planos de fundo cinza sugerem que o texto está desabilitado e desencoraja a leitura.
• Considere um comprimento máximo de linha de 65 caracteres para facilitar a leitura do texto. (Os caracteres incluem letras, pontuação e espaços.)

Atributos

• A maioria do texto da interface do usuário deve ser simples sem nenhum atributo. Os atributos podem ser usados da seguinte maneira:
  • Ousado. Use em rótulos de controle para facilitar a análise do texto. Use com moderação para chamar a atenção para os usuários de texto que devem ler. Usar muito negrito diminui seu impacto.
  • Itálico. Use para fazer referência ao texto literalmente em vez de aspas. Use com moderação para enfatizar palavras específicas. Use para prompts em caixas de texto e listas suspensas editáveis.
  • Itálico em negrito. Não use.
  • Sublinhar. Não use, exceto para links. Em vez disso, use itálico para dar ênfase.
• Nem todas as fontes dão suporte a negrito e itálico, portanto, elas nunca devem ser cruciais para entender o texto.