Typographie dans Windows
En tant que représentation visuelle du langage, la typographie a pour tâche principale de communiquer des informations. Le système de type Windows vous permet de créer une structure et une hiérarchie dans votre contenu afin d’optimiser la lisibilité et la lisibilité dans votre interface utilisateur.
La variable d’interface utilisateur Segoe est la nouvelle police système pour Windows. Il s’agit d’une prise actualisée de Segoe classique et utilise la technologie de police variable pour fournir dynamiquement une grande lisibilité à des tailles très petites et des contours améliorés aux tailles d’affichage.
Conseil
Cet article décrit comment le langage Fluent Design est appliqué aux applications Windows. Pour plus d’informations, consultez Fluent Design - Typography.
Utilisation de la variable Segoe Fluent
La variable d’interface utilisateur Segoe prend en charge deux axes pour un contrôle plus fin du texte : poids et taille optique.
- L’axe de poids (
wght) est incrémentiel avec des poids de Mince (100) à Gras (700). - L’axe de taille optique (
opsz) est automatique et activé par défaut. Il contrôle la forme et la taille des compteurs dans la police, afin de hiérarchiser la lisibilité aux petites tailles et à la personnalité aux grandes tailles (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.
Poids
| Nom du poids | Valeur de l’axe de poids | Visuels |
|---|---|---|
| Clair | 300 |  |
| Semi-clair | 350 |  |
| Regular | 400 |  |
| Semi-bold | 600 |  |
| Gras | 700 |  |
Axe optique
Meilleures pratiques typographiques dans Windows 11
Windows 11 utilise la variable d’interface utilisateur Segoe avec les attributs suivants en fonction du contexte dans lequel le texte est affiché.
| Attribut | Valeur | Notes |
|---|---|---|
| Poids | Standard, Semibold | Utilisez un poids normal pour la plupart des textes, utilisez Semibold pour les titres |
| Alignment | Gauche, Centre | Aligner à gauche par défaut, Aligner le centre uniquement dans de rares cas, tels que du texte sous les icônes |
| Valeurs minimales | 14px Semibold, 12px Regular | Le texte inférieur à ces tailles et poids est lisible dans certaines langues |
| Gaine | Cas de phrase | Utiliser la casse de phrase pour tout le texte de l’interface utilisateur, y compris les titres |
| Troncation | Points de suspension et découpage | Utilisez des points de suspension dans la plupart des cas ; Le découpage n’est utilisé que dans de rares cas |
Exemples
L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.
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.
Taille et mise à l’échelle
Les tailles de police dans les applications XAML sont automatiquement mises à l’échelle sur tous les appareils. L’algorithme de mise à l’échelle garantit qu’une police de 24 px sur un grand écran de 10 pieds est aussi lisible qu’une police de 24 px sur un petit écran de quelques pouces.
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.
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 en pixels effectifs et sont optimisées pour les applications Windows s’exécutant sur toutes les tailles d’écran.
Windows 11 utilise les valeurs suivantes pour différents types de texte dans l’interface utilisateur.
| Exemple | Poids | Taille/hauteur de ligne |
|---|---|---|
 |
Petite | 12/16 epx |
 |
Détails | 14/20 epx |
 |
Texte semi-bolé | 14/20 epx |
 |
Détails | 18/24 epx |
 |
Afficher les points-virgules | 20/28 epx |
 |
Afficher les points-virgules | 28/36 epx |
 |
Afficher les points-virgules | 40/52 epx |
 |
Afficher les points-virgules | 68/92 epx |
Pour plus d’informations, consultez les instructions 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
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 la police Segoe Fluent Icons. |
| Segoe UI Emoji | Regular | Police d’interface utilisateur pour Emoji. |
| Symbole segoe UI | Regular | Police de secours pour les symboles. |
Articles connexes
Windows developer