Typographie dans Windows 11

  • Article

Plusieurs mots affichés en Segoe UI Variable

En tant que représentation visuelle du langage, la typographie a pour tâche principale de communiquer des informations. Le système typographique de Windows 11 vous aide à créer une structure et une hiérarchie dans votre contenu pour optimiser la clarté et la lisibilité de l’IU.

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.

Métriques

Le mot « Segoe » rendu dans la variable d’interface utilisateur Segoe avec plusieurs aspects de la police mise en surbrillance

Poids

Nom du poids Valeur de l’axe de poids Visuels
Clair 300 Le mot « Segoe » rendu dans la variable d’interface utilisateur Segoe light
Semi-clair 350 Le mot « Segoe » rendu dans la variable d’interface utilisateur Segoe semi-light
Regular 400 Le mot « Segoe » rendu dans la variable d’interface utilisateur Segoe standard
Semi-bold 600 Le mot « Segoe » rendu dans la variable d’interface utilisateur Segoe semi-bold
Gras 700 Le mot « Segoe » rendu en gras dans la variable d’interface utilisateur Segoe

Axe optique

Lettre minuscule rendue dans la variable d’interface utilisateur Segoe avec des contours des différentes formes qu’il peut avoir en fonction du contexte dans lequel il est rendu

La variable d’interface utilisateur Segoe prend en charge deux axes : poids et taille optique. L’axe de poids est incrémentiel, tandis que l’axe de taille optique est automatique et activé par défaut. L’axe des tailles optiques contrôle la forme et la taille des compteurs dans la police, afin de hiérarchiser la lisibilité aux petites tailles et à la personnalité des grandes tailles.

Utilisation de la variable Segoe Fluent

Rampe de type

Windows 11 utilise les valeurs suivantes pour différents types de texte dans l’interface utilisateur.

Exemple Poids Taille/hauteur de ligne
Exemple de texte de légende Petite 12/16 epx
Exemple de texte du corps Détails 14/20 epx
Exemple de texte fort du corps Texte semi-bolé 14/20 epx
Exemple de texte volumineux du corps Détails 18/24 epx
Exemple de texte de sous-titre Afficher les points-virgules 20/28 epx
Exemple de texte de titre Afficher les points-virgules 28/36 epx
Exemple de texte volumineux de titre Afficher les points-virgules 40/52 epx
Exemple de texte d’affichage Afficher les points-virgules 68/92 epx

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

Conseil

Ouvrez l’application galerie WinUI 3 et consultez les principes typographiques en action.

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.