Typographie des applications Windows

En tant que représentation visuelle du langage, la typographie a pour tâche principale de communiquer des informations. Son style ne devrait jamais faire obstacle à cet objectif. Dans cet article, nous décrirons comment appliquer un style à la typographie de votre application Windows pour aider les utilisateurs à comprendre facilement et efficacement le contenu.

Police

Vous devez utiliser une police dans l’interface utilisateur de votre application et nous vous recommandons de coller à la police par défaut pour les applications Windows, la variable d’interface utilisateur Segoe. Elle est conçue pour conserver une lisibilité optimale, quelles que soient les tailles et les densités en pixels. Elle se caractérise par une esthétique nette, légère et aérée en parfaite harmonie avec le contenu du système.

Pour afficher les langues autres que l’anglais ou sélectionner une autre police pour votre application, consultez Langues et Polices afin de connaître nos polices recommandées pour les applications Windows.

Choisissez une police pour votre interface utilisateur.

Ne mélangez pas plusieurs polices.

Axes de police variables

La police De la variable d’interface utilisateur Segoe contient deux axes pour un contrôle plus fin du texte. Cette police a un axe de poids (wght) avec des poids de Mince (100) à Gras (700). Il a également un axe de taille optique (opsz) pour la mise à l’échelle optique de 8pt à 36pt. Lorsque vous utilisez des contrôles communs XAML, la police de variable d’interface utilisateur Segoe est sélectionnée par défaut pour les langages pris en charge. Lorsque cette police ou une autre police variable avec un axe optique est utilisée, la taille optique correspond automatiquement à la taille de police demandée. Lors de l’utilisation du code HTML, la mise à l’échelle optique est également automatique, mais vous devez spécifier la police de variable d’interface utilisateur Segoe dans CSS.

Taille et mise à l’échelle

Les tailles de police utilisées dans les applications UWP sont automatiquement mises à l’échelle sur tous les appareils. L’algorithme de mise à l’échelle garantit qu’une police de 24 pixels sur un appareil Surface Hub placé à une distance de 3 mètres est aussi lisible qu’une police de 24 pixels sur un téléphone doté d’un écran 5 pouces distant de quelques centimètres.

En raison du mode de fonctionnement du système de mise à l’échelle, la conception est effectuée en pixels effectifs, et non en pixels physiques réels. En outre, il n’est pas nécessaire de modifier les tailles de police pour différentes tailles ou résolutions d’écran.

Suivez le dimensionnement de la rampe de type Windows.

N’utilisez pas de taille de police inférieure à 12 px.

Hiérarchie

Les utilisateurs s’appuient sur la hiérarchie visuelle lors de l’analyse d’une page : les en-têtes résument le contenu et le texte du corps fournit d’autres informations. Pour créer une hiérarchie visuelle précise dans votre application, suivez la gamme de caractères Windows.

Rampe de type

La gamme de caractères Windows établit des relations cruciales entre les styles de caractère sur une page, afin d’aider les utilisateurs à lire facilement le contenu. Toutes les tailles sont exprimées en pixels effectifs et sont optimisées pour les applications UWP s’exécutant sur tous les appareils.

Pour plus d’informations, consultez les instructions sur l’utilisation de la rampe de type XAML.

Alignment

La valeur TextAlignment par défaut est Left, et dans la plupart des cas, cette approche d’alignement à gauche et de non-alignement à droite garantit un ancrage cohérent du contenu et une disposition uniforme. Pour les langues RTL, voir Ajuster la disposition et les polices pour prendre en charge la globalisation.

<TextBlock TextAlignment="Left">

Nombre de caractères

Gardez à 50 à 60 lettres par ligne pour faciliter la lecture.

N’utilisez pas moins de 20 caractères ou plus de 60 caractères par ligne, car cela est difficile à lire.

Découpage et points de suspension

Lorsque la quantité de texte s’étend au-delà de l’espace disponible, nous vous recommandons de découper le texte et d’insérer des points de suspension [...], qui est le comportement par défaut de la plupart des contrôles de texte UWP.

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

Découpez du texte et habillage si plusieurs lignes sont activées.

N’utilisez pas de points de suspension pour éviter l’encombrement visuel.

Remarque

Si les conteneurs ne sont pas clairement définis (par exemple, sans couleur d’arrière-plan de différenciation), ou s’il existe un lien pour afficher plus de texte, utilisez des ellipses.

Langages

Segoe UI Variable est notre police pour l’anglais, les langues européennes, le grec et le russe. Pour les autres langues, consultez les recommandations suivantes.

Globalisation/localisation des polices

Utilisez les API de mappage de police LanguageFont pour l’accès par programmation à la famille de polices, à la taille, au poids et au style recommandés pour une langue particulière. L’objet LanguageFont permet d’accéder aux informations de police appropriées pour différentes catégories de contenu, notamment les en-têtes d’interface utilisateur, les notifications, le corps du corps et les polices de corps de document modifiables par l’utilisateur. Pour plus d’informations, consultez Ajuster la disposition et les polices pour prendre en charge la mondialisation.

Polices pour les langues non latines

Famille de polices	Styles	Notes
Ebrima	Standard, Gras	Police d’interface utilisateur pour les scripts africains (ADLaM, Ethiopic, N’Ko, Osmanya, Tifinagh, Vai).
Gadugi	Standard, Gras	Police d’interface utilisateur pour les scripts Amérique du Nord n (SYLLABE CANADIENNE, Cherokee, Osage).
Interface utilisateur de Leelawadee	Normal, Semilight, Bold	Police d’interface utilisateur pour les scripts d’Asie du Sud-Est (Buginese, Khmer, Lao, Thaï).
Malgun Gothique	Regular	Police d’interface utilisateur pour coréen.
Interface utilisateur Microsoft JhengHei	Normal, Gras, Clair	Police d’interface utilisateur pour le chinois traditionnel.
Interface utilisateur De Microsoft YaHei	Normal, Gras, Clair	Police d’interface utilisateur pour le chinois simplifié.
Texte du Myanmar	Regular	Police de secours pour le script myanmar.
Interface utilisateur nirmala	Normal, Semilight, Bold	Police d’interface utilisateur pour les scripts sud-asiatiques (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamoul, Telugu).
Segoe UI	Normal, Italique, Italique clair, Italique noir, Gras, Italique gras, Clair, Semi-lumière, Semibold, Noir	Police d’interface utilisateur pour l’arabe, l’Arménien, le Géorgien et l’Hébreu.
SimSun	Regular	Police d’interface utilisateur chinoise héritée.
IU gothique Yu	Clair, Semi-clair, Normal, Semi-gras, Gras	Police d’interface utilisateur pour le japonais.

Polices

Polices sans serif

Les polices sans serif sont un excellent choix pour les en-têtes et les éléments d’interface utilisateur.

Famille de polices	Styles	Notes
Arial	Normal, Italique, Gras, Italique gras, Noir	Prend en charge les scripts européens et moyen-orientaux (latin, grec, cyrillique, arabe, arménien et hébreu). Le poids noir prend uniquement en charge les scripts européens.
Calibri	Normal, Italique, Gras, Italique gras, Clair, Italique clair	Prend en charge les scripts européens et moyen-orientaux (latin, grec, cyrillique, arabe et hébreu). Arabe disponible uniquement dans les droites.
Consolas	Normal, Italique, Gras, Italique gras	Police de largeur fixe qui prend en charge les scripts européens (latin, grec et cyrillique).
Segoe UI	Normal, Italique, Italique clair, Italique noir, Gras, Italique gras, Clair, Semi-lumière, Semibold, Noir	Police d’interface utilisateur pour les scripts européens et moyen-orientaux (arabe, arménien, cyrillique, géorgien, grec, hébreu, latin) et également script Lisu.
Selawik	Normal, Semilight, Light, Bold, Semibold	Police open source compatible avec l’interface utilisateur Segoe, destinée aux applications sur d’autres plateformes qui ne souhaitent pas regrouper l’interface utilisateur Segoe. Obtenir Selawik sur GitHub.

Polices Serif

Les polices Serif sont bonnes pour présenter de grandes quantités de texte.

Famille de polices	Styles	Notes
Cambria	Regular	Police Serif qui prend en charge les scripts européens (latin, grec, cyrillique).
Courrier Nouveau	Normal, Italique, Gras, Italique gras	Police de largeur fixe Serif qui prend en charge les scripts européens et moyen-orientaux (latin, grec, cyrillique, arabe, arménien et hébreu).
Géorgie	Normal, Italique, Gras, Italique gras	Prend en charge les scripts européens (latin, grec et cyrillique).
Times New Roman	Normal, Italique, Gras, Italique gras	Police héritée qui prend en charge les scripts européens (latin, grec, cyrillique, arabe, arménien, hébreu).

Polices de variables

Les polices variables sont bonnes pour contrôler précisément l’apparence du texte.

Famille de polices	Axes	Notes
Tschschrift	Poids, Largeur	Police variable qui prend en charge latin, grec et cyrillique.
Segoe UI variable	Poids, taille optique	Police variable qui prend en charge latin, grec et cyrillique.

Symboles et icônes

Famille de polices	Styles	Notes
Ressources Segoe MDL2	Regular	Police d’interface utilisateur pour les icônes d’application. Pour plus d’informations, consultez l’article sur les ressources Segoe MDL2.
Segoe UI Emoji	Regular	Police d’interface utilisateur pour Emoji.
Symbole segoe UI	Regular	Police de secours pour les symboles.

Articles connexes

• Contrôles de texte
• Ressources de thème XAML
• Styles XAML
• Typographie Microsoft
• Polices de variables