Fonts

Article
06/13/2023

Notes

Ce guide de conception a été créé pour Windows 7 et n’a pas été mis à jour pour les versions plus récentes de Windows. La plupart des conseils s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas nos conseils de conception actuels.

Les utilisateurs interagissent avec le texte plus qu’avec n’importe quel autre élément dans Microsoft Windows. L’interface utilisateur Segoe (prononcé « SEE-go ») est la police système Windows. La taille de police standard a été augmentée à 9 points.

illustration de l’alphabet dans la police segoe ui

Police de l’interface utilisateur Segoe.

Segoe UI et Segoe ne sont pas la même police. L’interface utilisateur Segoe est la police Windows destinée aux chaînes de texte de l’interface utilisateur. Segoe est une police de marque utilisée par Microsoft et ses partenaires pour produire du matériel pour l’impression et la publicité.

L’interface utilisateur Segoe est une police accessible, ouverte et conviviale, et par conséquent a une meilleure lisibilité que Tahoma, Microsoft Sans Serif et Arial. Il a les caractéristiques d’un sans serif humaniste : les largeurs variables de ses majuscules (étroites E et S, pour instance, comparées à Helvetica, où les largeurs sont plus semblables, assez larges), la contrainte et les formes de lettres de ses minuscules; et sa vraie italique (plutôt qu’un roman oblique ou incliné, comme beaucoup de sans-serifs d’aspect industriel). La police de caractères est destinée à donner le même effet visuel à l’écran et à l’impression. Il a été conçu pour être un sans serif humaniste sans caractère fort ni bizarrerie distrayante.

L’interface utilisateur De Segoe est optimisée pour ClearType, qui est activé par défaut dans Windows. Avec ClearType activé, l’interface utilisateur Segoe est une police élégante et lisible. Si ClearType n’est pas activé, l’interface utilisateur de Segoe n’est que marginalement acceptable. Ce facteur détermine quand vous devez utiliser l’interface utilisateur De Segoe.

Segoe UI comprend des caractères latins, grecs, cyrilliques et arabes. Il existe de nouvelles polices, également optimisées pour ClearType, créées pour d’autres jeux de caractères et utilisations. Il s’agit notamment de Meiryo pour le japonais, malgun gothique pour le coréen, Microsoft JhengHei pour le chinois (traditionnel), Microsoft YaHei pour le chinois (simplifié), Gisha pour l’hébreu et Leelawadee pour le thaï, ainsi que les polices ClearType Collection conçues pour l’utilisation de documents.

Meiryo comprend des caractères latins basés sur Verdana. Malgun Gothic, Microsoft JhengHei et Microsoft YaHei utilisent une interface utilisateur Segoe personnalisée. L’utilisation de versions italiques de ces polices n’est pas recommandée. Malgun Gothic, Microsoft JhengHei et Microsoft YaHei sont fournis dans des styles réguliers et gras uniquement, ce qui signifie que les caractères italiques sont synthétisés en obliquement des styles droits. Bien que Meiryo inclut des italiques vrais et gras italiques, ces styles ne s’appliquent qu’aux caractères latins, les caractères japonais restent droits lorsque le style italique est appliqué.

Une variante de Meiryo, appelée interface utilisateur Meiryo, est recommandée dans l’interface utilisateur de la commande ribbons .

Pour prendre en charge les paramètres régionaux à l’aide de ces jeux de caractères, l’interface utilisateur De Segoe est remplacée par les polices appropriées en fonction de chaque paramètre régional pendant le processus de localisation .

Pour obtenir une licence de l’interface utilisateur Segoe et d’autres polices Microsoft à des fins de distribution avec un programme Windows, contactez Monotype.

Note: Les recommandations relatives au style, au ton et au texte de l’interface utilisateur sont présentées dans des articles distincts.

Principes de conception

Polices, polices, tailles de points et attributs

Dans la typographie traditionnelle, une police décrit une combinaison d’une police, d’une taille de point et d’attributs. Une police de type est l’apparence de la police. Segoe UI, Tahoma, Verdana et Arial sont tous des polices de caractères. La taille de point fait référence à la taille de la police, mesurée du haut des ascendants au bas des descendeurs, moins l’espacement interne (appelé début). Un point est d’environ 1/72 pouce. Enfin, une police peut avoir des attributs en gras ou en italique.

De manière informelle, les utilisateurs utilisent souvent la police à la place de la police de type, comme cela a été fait dans cet article, mais techniquement, l’interface utilisateur Segoe est une police de type, pas une police. Chaque combinaison d’attributs est une police unique (par exemple, l’interface utilisateur Segoe à 9 points régulière, l’interface utilisateur Segoe à 10 points en gras, et ainsi de suite).

Serif et sans serif

Les polices sont soit serif, soit sans serif. Serif fait référence aux petits tours qui terminent souvent les traits de lettres dans une police. Une police sans serif n’a pas de serifs.

Les lecteurs préfèrent généralement les polices de empattement utilisées comme corps de texte dans un document. Les empattements procurent un sentiment de formalité et d’élégance à un document. Pour le texte de l’interface utilisateur, la nécessité d’une apparence propre et la résolution inférieure des moniteurs d’ordinateur font des polices sans serif le meilleur choix.

Comparez

Le texte est plus facile à lire lorsqu’il existe une grande différence entre la luminance du texte et l’arrière-plan. Le texte noir sur un arrière-plan blanc offre le contraste le plus élevé de texte foncé sur un arrière-plan très clair peut également fournir un contraste élevé. Cette combinaison est idéale pour les surfaces d’interface utilisateur principales.

Le texte clair sur un arrière-plan foncé offre un bon contraste, mais pas aussi bon que le texte foncé sur un arrière-plan clair. Cette combinaison fonctionne bien pour les surfaces d’interface utilisateur secondaires, telles que Explorer volets office, que vous souhaitez mettre en évidence par rapport aux surfaces d’interface utilisateur primaires.

Si vous souhaitez vous assurer que les utilisateurs lisent votre texte, utilisez du texte sombre sur un arrière-plan clair.

Affordances

Le texte peut utiliser les affordances suivantes pour indiquer comment il est utilisé :

Pointeur. Le pointeur de la barre I (« sélection de texte ») indique que le texte est sélectionnable, tandis que le pointeur pointant vers la gauche (« sélection normale ») indique que le texte ne l’est pas.
Caret. Lorsque le texte a le focus d’entrée, le caret est la barre verticale clignotante qui indique le point d’insertion/sélection dans le texte sélectionnable ou modifiable.
Boîte. Zone autour du texte qui indique qu’il est modifiable. Pour réduire le poids de la présentation, la zone peut être affichée dynamiquement uniquement lorsque le texte modifiable est sélectionné.
Couleur de premier plan. Le gris clair indique que le texte est désactivé. Les couleurs non grises, en particulier le bleu et le violet, indiquent que le texte est un lien.
Couleur d’arrière-plan. Un arrière-plan gris clair suggère faiblement que le texte est en lecture seule, mais dans la pratique, le texte en lecture seule peut avoir n’importe quel arrière-plan de couleur.

Ces affordances sont combinées pour les significations suivantes :

Modifiable. Texte affiché dans une zone, avec un pointeur de sélection de texte, une carete (sur le focus d’entrée) et généralement sur un arrière-plan blanc.
En lecture seule, sélectionnable. Texte avec un pointeur de sélection et une carete (sur le focus d’entrée).
En lecture seule, non sélectionnable. Texte avec un pointeur de flèche.
Désactivé. Texte gris clair avec un pointeur de flèche, parfois sur un arrière-plan gris.

Le texte en lecture seule a traditionnellement un arrière-plan gris, mais un arrière-plan gris n’est pas nécessaire. En fait, un arrière-plan gris peut être indésirable, en particulier pour les grands blocs de texte, car il suggère que le texte est désactivé et décourage la lecture.

Accessibilité et police système, tailles et couleurs

Les instructions pour rendre le texte accessible aux utilisateurs handicapés ou handicapés peuvent être réduites à une règle simple : Respecter les paramètres de l’utilisateur en utilisant toujours la police système, les tailles et les couleurs.

Si vous ne faites qu’une seule chose...

Respectez les paramètres de l’utilisateur en utilisant toujours la police système, les tailles et les couleurs.

Développeurs: À partir du code, vous pouvez déterminer les propriétés de police système (y compris sa taille) à l’aide de la fonction API GetThemeFont. Vous pouvez déterminer les couleurs système à l’aide de la fonction API GetThemeSysColor.

Étant donné que vous ne pouvez pas faire d’hypothèses sur les paramètres de thème système des utilisateurs, vous devez :

Basez toujours vos couleurs de police et arrière-plans sur les couleurs de thème système. Ne créez jamais vos propres couleurs en fonction de valeurs RVB fixes (rouge, vert, bleu).
Toujours faire correspondre les couleurs de texte système avec leurs couleurs d’arrière-plan correspondantes. Par exemple, si vous choisissez COLOR_STATICTEXT pour la couleur du texte, vous devez également choisir COLOR_STATIC pour la couleur d’arrière-plan.
Créez toujours des polices basées sur des variantes de taille proportionnelle de la police système. Compte tenu des métriques de police système, vous pouvez créer des variantes en gras, en italique, plus grandes et plus petites.

Un moyen simple de vous assurer que votre programme respecte les paramètres des utilisateurs consiste à tester à l’aide d’une taille de police différente et d’un jeu de couleurs à contraste élevé. Tout le texte doit être redimensionné et affiché correctement dans le jeu de couleurs choisi.

Modèles d’usage

Le texte a plusieurs modèles d’utilisation :

Usage	Description
Barre de titre Texte Texte dans la barre de titre qui identifie la fenêtre.
Instructions principales Texte qui explique ce qu’il faut faire dans une page, une fenêtre ou une boîte de dialogue.
Instructions secondaires Texte supplémentaire qui explique ce qu’il faut faire dans une page, une fenêtre ou une boîte de dialogue.
Texte normal Texte ordinaire (en lecture seule) affiché dans une interface utilisateur.
Texte mis en évidence Le texte en gras est utilisé pour faciliter l’analyse du texte et attirer l’attention sur le texte que les utilisateurs doivent lire. Le texte italique est utilisé pour faire référence au texte littéralement (au lieu de guillemets) et pour mettre en évidence des mots spécifiques.
Texte modifiable Le texte que les utilisateurs peuvent modifier s’affiche dans une zone. pour réduire le poids de la présentation, la zone peut être affichée uniquement lorsque le texte modifiable est sélectionné.
Texte désactivé Texte qui ne s’applique pas au contexte actuel, comme les étiquettes pour les contrôles désactivés. le texte désactivé indique que les utilisateurs (normalement) ne doivent pas s’embêter à lire le texte.
Liens Texte utilisé pour accéder à une autre page, fenêtre ou rubrique d’aide, ou lancer une commande.
En-tête de groupe Texte utilisé pour regrouper des éléments dans un affichage de liste.
Nom de fichier Texte du nom de fichier (en mode contenu uniquement).
Texte du document Texte utilisé dans les documents (par opposition au texte de l’interface utilisateur).
En-têtes de document Texte utilisé comme en-tête dans un document.

Consignes

Polices et couleurs

Les polices et couleurs suivantes sont des valeurs par défaut pour Windows Vista et Windows 7.

Modèle	Symbole de thème	Police, Couleur
	CaptionFont	9 pts noir (#000000) Segoe UI
	MainInstruction	12 pts bleu (#003399) Segoe UI
	Instruction	9 pts noir (#000000) Segoe UI
	BodyText	9 pts noir (#000000) Segoe UI
	BodyText	9 pts noir (#000000) Interface utilisateur Segoe, gras ou italique
	BodyText	9 pts noir (#000000) Segoe UI, dans une zone
	Désactivé	9 pts gris foncé (#323232) Interface utilisateur Segoe
	HyperLinkText	9 pts bleu (#0066CC) Segoe UI
	Chaud	9 pts bleu clair (#3399FF) Segoe UI
		11 pts bleu (#003399) Segoe UI
		11 pts noir (#000000) Segoe UI
	(aucun)	9 pts noir (#000000) Calibri
	(aucun)	17 pts noir (#000000) Calibri

Choisissez des polices et optimisez les dispositions des fenêtres en fonction de la technologie d’interface utilisateur et de la version cible de Windows :

Technologie de l’interface utilisateur	Version de Windows cible	Polices à utiliser et à optimiser
Windows Presentation Foundation	Tous	Utilisez des parties de thème WPF.
Win32 ou WinForms	Windows Vista ou version ultérieure ;	Utilisez la police d’interface utilisateur Segoe appropriée.
	Composants extensibles ou pré-Windows Vista	Pour cibler Windows XP et Windows 2000, utilisez la pseudo-police MS Shell Dlg 2 à 8 points, qui correspond à Tahoma. Pour cibler les versions antérieures de Windows, utilisez la pseudo-police MS Shell Dlg 8 points, qui correspond à Tahoma sur Windows 2000 et Windows XP, et à MS Sans Serif sur Windows 95, Windows 98, Windows Millennium Edition et Windows NT 4.0.

Développeurs:
- Pour les éléments qui utilisent une disposition fixe (tels que les modèles de boîte de dialogue Windows et WinForms), codez en dur la police appropriée du tableau précédent.
- Pour les éléments qui utilisent une disposition dynamique (comme Windows Presentation Foundation), utilisez les polices de thème. Utilisez des API de thème telles que DrawThemeText pour dessiner du texte en fonction du symbole de thème. Veillez à disposer d’une alternative basée sur les métriques système si le service de thème n’est pas en cours d’exécution.
Pour l’interface utilisateur De Segoe, utilisez une taille de police de 9 points ou plus. La police de l’interface utilisateur Segoe est optimisée pour ces tailles. Évitez donc d’utiliser des tailles plus petites.
Toujours faire correspondre les couleurs de texte système avec leurs couleurs d’arrière-plan correspondantes. Par exemple, si vous choisissez COLOR_STATICTEXT pour la couleur du texte, vous devez également choisir COLOR_STATIC pour la couleur d’arrière-plan.
Créez toujours des polices basées sur des variantes de taille proportionnelle de la police système. Compte tenu des métriques de police système, vous pouvez créer des variantes en gras, en italique, plus grandes et plus petites.
Affichez de grands blocs de texte en lecture seule (tels que les termes du contrat de licence) sur un arrière-plan clair au lieu d’un arrière-plan gris. Les arrière-plans gris suggèrent que le texte est désactivé et décourage la lecture.
Envisagez une longueur de ligne maximale de 65 caractères pour faciliter la lecture du texte. (Les caractères incluent des lettres, des signes de ponctuation et des espaces.)

Attributs

La plupart du texte de l’interface utilisateur doit être brut sans attributs. Les attributs peuvent être utilisés comme suit :
- Gras. Utilisez dans les étiquettes de contrôle pour faciliter l’analyse du texte. Utilisez avec parcimonie pour attirer l’attention sur le texte que les utilisateurs doivent lire. L’utilisation d’une trop grande quantité d’gras réduit son impact.
- Italique. Utilisez pour faire référence au texte littéralement au lieu de guillemets. Utilisez avec parcimonie pour mettre en évidence des mots spécifiques. Utilisez pour les invites dans les zones de texte et les listes déroulantes modifiables.
- Italique gras. Ne pas utiliser.
- Souligner. N’utilisez pas, sauf pour les liens. Utilisez plutôt l’italique pour l’accentuation.
Toutes les polices ne prennent pas en charge l’gras et l’italique. Elles ne doivent donc jamais être essentielles à la compréhension du texte.

Partager via