Typographie des applications Windows
En tant que représentation visuelle du langage, la main tâche de la typographie est de communiquer des informations. Son style doit toujours être aligné sur 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 vous en tenir à la police par défaut pour les applications Windows, Segoe UI Variable. 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 Segoe UI Variable contient deux axes pour un contrôle plus fin du texte. Cette police a un axe de poids (wght) avec des pondérations allant de Thin (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 XAML courants, la police De la variable d’interface utilisateur Segoe est sélectionnée par défaut pour les langues prises 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 segoe UI Variable 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 une 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.
Gamme de caractères
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 conseils sur l’utilisation de la rampe de type XAML .
Alignement
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
Conservez 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étourage et ellipses
Lorsque la quantité de texte s’étend au-delà de l’espace disponible, nous vous recommandons de 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"/>
Couper du texte et encapsuler si plusieurs lignes sont activées.
N’utilisez pas de points de suspension pour éviter l’encombrement visuel.
Notes
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.
Languages
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.
Polices de globalisation/localisation
Utilisez les API de mappage de police LanguageFont pour l’accès par programmation à la gamme de polices, à la taille, à l’épaisseur et au style recommandés pour une langue particulière. L’objet LanguageFont assure l’accès aux informations de police appropriées pour diverses catégories de contenu, notamment les en-têtes d’interface utilisateur, les notifications, le texte de corps et les polices de corps de document modifiables par l’utilisateur. Pour plus d’informations, voir Ajuster la disposition et les polices pour prendre en charge la globalisation.
Polices pour les langues non latines
| Famille de polices | Styles | Remarques |
|---|---|---|
| Ebrima | Normal, Gras | Police d’interface utilisateur pour les scripts africains (ADLaM, Ethiopic, N’Ko, Osmanya, Tifinagh, Vai). |
| Gadugi | Normal, Gras | Police d’interface utilisateur pour les scripts nord-américains (syllabe canadienne, cherokee, osage). |
| Leelawadee UI | Normal, Semi-fin, Gras | Police d’interface utilisateur pour les scripts d’Asie du Sud-Est (Buginais, Khmer, Lao, Thaï). |
| Malgun Gothic | Normale | Police d’interface utilisateur pour le coréen. |
| Microsoft JhengHei UI | Normal, Gras, Fin | Police d’interface utilisateur pour le chinois traditionnel. |
| Microsoft YaHei UI | Normal, Gras, Fin | Police d’interface utilisateur pour le chinois simplifié. |
| Myanmar Text | Normale | Police de substitution pour le script du Myanmar. |
| Nirmala UI | Normal, Semi-fin, Gras | Police d’interface utilisateur pour les scripts d’Asie du Sud (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamoul, Télougou). |
| Segoe UI | Normal, Italique, Italique fin, Italique noir, Gras, Italique gras, Fin, Semi-fin, Semi-gras, Noir | Police d’interface utilisateur pour l’arabe, l’arménien, le géorgien et l’hébreu. |
| SimSun | Normale | Police Chinese UI héritée. |
| Yu Gothic UI | Clair, Semi-clair, Normal, Semi-gras, Gras | Police d’interface utilisateur pour le japonais. |
Fonts
Polices sans-serif
Les polices sans-serif sont un excellent choix pour les titres et les éléments d’interface utilisateur.
| Famille de polices | Styles | Remarques |
|---|---|---|
| Arial | Normal, Italique, Gras, Italique gras, Noir | Prend en charge les scripts européens et du Moyen-Orient (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, Fin, Italique fin | Prend en charge les scripts d’Europe et du Moyen-Orient (latin, grec, cyrillique, arabe et hébreu). Arabe disponible uniquement en écriture verticale. |
| Consolas | Normal, Italique, Gras, Italique gras | Police de largeur fixe qui prend en charge les scripts d’Europe (latin, grec et cyrillique). |
| Segoe UI | Normal, Italique, Italique fin, Italique noir, Gras, Italique gras, Fin, Semi-fin, Semi-gras, Noir | Police d’interface utilisateur pour les scripts d’Europe et du Moyen-Orient (arabe, arménien, cyrillique, géorgien, grec, hébreu, latin) et le script lisu. |
| Selawik | Normal, Semi-fin, Fin, Gras, Semi-gras | 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. Obtenez Selawik sur GitHub. |
Polices serif
Les polices serif sont parfaites pour présenter de grandes quantités de texte.
| Famille de polices | Styles | Remarques |
|---|---|---|
| Cambria | Normale | Police serif qui prend en charge les scripts d’Europe (latin, grec et cyrillique). |
| Courier New | Normal, Italique, Gras, Italique gras | Police de largeur fixe serif qui prend en charge les scripts européens et du Moyen-Orient (latin, grec, cyrillique, arabe, arménien et hébreu). |
| Géorgie | Normal, Italique, Gras, Italique gras | Prend en charge les scripts d’Europe (latin, grec et cyrillique). |
| Times New Roman | Normal, Italique, Gras, Italique gras | Police héritée qui prend en charge les scripts d’Europe (latin, grec, cyrillique, arabe, arménien, hébreu). |
Polices variables
Les polices variables permettent de contrôler précisément l’apparence du texte.
| Famille de polices | Axes | Notes |
|---|---|---|
| Bahnschrift | Poids, Largeur | Police variable qui prend en charge le latin, le grec et le cyrillique. |
| Segoe UI variable | Poids, taille optique | Police variable qui prend en charge le latin, le grec et le cyrillique. |
Symboles et icônes
| Famille de polices | Styles | Remarques |
|---|---|---|
| Segoe MDL2 Assets | Normale | Police d’interface utilisateur pour les icônes d’application. Pour plus d’informations, consultez l’article Ressources Segoe MDL2 . |
| Segoe UI Emoji | Normale | Police d’interface utilisateur pour Emoji. |
| Segoe UI Symbol | Normale | Police de secours pour les symboles. |