Recommandations en matière de polices

Applies to Windows only

Une utilisation appropriée des polices, aussi bien en termes de taille, d’épaisseur, de couleurs, d’interlettrage que d’espace, permet de conférer à votre application du Windows Store une apparence nette et sobre qui en facilite l’utilisation. Suivez ces recommandations pour sélectionner des polices et spécifier leur taille et leur couleur.

Il existe des ressources de style pour vous aider à respecter plus facilement ces recommandations :

Si vous recherchez une liste d’icônes Segoe UI Symbol, voir Guidelines for Segoe UI Symbol icons.

Pratiques conseillées et déconseillées

Pour parvenir à la simplicité et à la clarté, il convient de porter une attention particulière aux détails typographiques. Lors du développement de l’interface utilisateur de votre application, nous vous recommandons d’appliquer les règles suivantes :

  • Utilisez les polices recommandées.
    • Utilisez Segoe UI (principale police Windows) pour les éléments de l’interface utilisateur, tels que les boutons et les sélecteurs de dates. Segoe UI prend en charge les alphabets latin, cyrillique, grec, arabe, hébreu, arménien et géorgien.
    • Utilisez Calibri pour le texte lu et écrit par l’utilisateur, par exemple dans les courriers électroniques et les conversations en ligne. Calibri prend en charge les alphabets latin, grec et cyrillique. Voir Pour la lecture et l’écriture dans la section Indications d’utilisation supplémentaires ci-dessous.
    • Utilisez Cambria pour les blocs de texte plus grands, par exemple pour un magazine ou un lecteur de flux RSS. Cambria prend en charge les alphabets latin, grec et cyrillique. Voir Pour la lecture dans la section Indications d’utilisation supplémentaires ci-dessous.

    Remarque  D’autres langues et systèmes d’écriture utilisent des polices différentes pouvant nécessiter des tailles et des espacements différents. Pour localiser votre application avec des polices intégrées, utilisez les API Windows.Globalization.Fonts qui vous permettent d’identifier les polices correctes de l’interface utilisateur et des documents dans une langue donnée.

  • Pour vos éléments d’interface utilisateur, utilisez ces styles et tailles de polices :
    • Utilisez Segoe UI Semilight 11 pts pour le texte normal.
    • Utilisez Segoe UI 9 pts (la taille la plus petite) pour les éléments de texte courts, tels que les légendes de bouton.
    • Utilisez Segoe UI Light 20 pts pour les éléments de texte tenant sur une seule ligne, mais qui doivent se détacher et attirer l’attention de l’utilisateur. Si la valeur 20 pts est trop grande, utilisez plutôt Segoe UI Semilight 16 pts. Par exemple, la police en 16 pts est plus adaptée si vous avez une liste étoffée comportant de nombreux éléments. Toutefois, n’utilisez pas la police Segoe UI 20 pts et 16 pts sur la même page.
    • Utilisez Segoe UI Light 42 pts pour les éléments d’interface utilisateur saillants constitués d’un ou deux mots sur une seule ligne.

    Pour obtenir des recommandations plus détaillées en matière de jeu stylistique et de taille, d’opacité, d’espace entre les lettres de Segoe UI, voir Indications d’utilisation supplémentaires.

  • Utilisez des contrastes (d’épaisseur, de taille et d’emplacement) pour distinguer les éléments d’une page qui doivent être mis en valeur, si nécessaire.
  • Utilisez les opacités suivantes :
    • Le texte principal a une opacité de 100 %.
    • Le texte secondaire a une opacité de 60%.
    • Le texte dans l’état pointage a une opacité de 80%.
    • Le texte en noir et blanc dans l’état appuyé a une opacité de 40%. Le texte dans d’autres couleurs a une opacité de 60%.

    Pour obtenir des exemples de polices Segoe UI de différentes tailles et opacités, voir Gamme de caractères Segoe UI dans la rubrique Indications d’utilisation supplémentaires.

  • Indiquez les éléments sélectionnés au clavier en utilisant des carrés de 2 pixels qui alternent le noir et le blanc.

    En-tête avec un arrière-plan foncé avec éléments sélectionnés au clavier

  • Si un en-tête ou sous-en-tête de page est trop long à afficher, utilisez des points de suspension (U+2026), et non trois points. N’ajoutez pas d’espace entre la fin du texte d’en-tête et les points de suspension. En-tête long avec points de suspension
  • Suivez les recommandations en matière de disposition pour les applications du Windows Store. Pour plus d’informations, voir Disposition d’une page d’application.
  • N’utilisez pas de polices en italique.

Indications d’utilisation supplémentaires

Épaisseurs prédéfinies de Segoe UI

Segoe UI est non seulement la police du système la plus reconnaissable, mais il s’agit également de la police la plus étroitement associée à la nouvelle interface utilisateur Windows. Utilisez Segoe UI pour tous les éléments de l’interface utilisateur.

Les feuilles de style des applications du Windows Store proposent cinq versions différentes de Segoe UI, chacune avec une épaisseur différente :

  • Segoe UI Light

    Segoe UI avec une épaisseur de 200.

  • Segoe UI Semilight

    Segoe UI avec une épaisseur de 300.

  • Segoe UI

    Segoe UI avec l’épaisseur standard de 400.

  • Segoe UI Semibold

    Segoe UI avec une épaisseur de 600.

  • Segoe UI Bold

    Segoe UI avec une épaisseur de 700.

Pour utiliser ces épaisseurs prédéfinies, attribuez à la famille de polices l’un des noms de polices Segoe UI. Pour les applications en JavaScript et HTML, utilisez la propriété font-family des feuilles de style en cascade (CSS). En C#/VB/C++ ou XAML, utilisez FontFamily.


<p style="font-family: 'Segoe UI Semibold'">Semibold text</p>


<TextBlock x:Name="semiBold" Text="Semibold font." FontFamily="Segoe UI Semibold"/>


Gamme de caractères Segoe UI

Le tableau ci-dessous indique les tailles, les épaisseurs et les couleurs à utiliser pour les différentes parties de l’interface utilisateur. Pour chaque partie de l’interface utilisateur, il indique les couleurs à utiliser en fonction de la feuille de style choisie (foncée ou claire).

  • Le texte principal a une opacité de 100 %.
  • Le texte secondaire a une opacité de 60%.
  • Le texte dans l’état pointage a une opacité de 80%.
  • Le texte en noir et blanc dans l’état appuyé a une opacité de 40%. Le texte dans d’autres couleurs a une opacité de 60%.

(La « légende d’illustration » de chaque entrée identifie le style du texte de l’image qui suit ce tableau.)

Affichage par défautÉtat inactifÉtat pointage (opacité : 80%)État appuyé (opacité : 40%)
En-tête de page
  • Ne pas utiliser quand la largeur de l’application est inférieure ou égale à 500 pixels
  • Famille de polices : Segoe UI Light
  • Taille de police : 42 pts
  • Légende d’illustration : A

Texte d’en-tête de page avec la feuille de style foncée

rgba(255, 255, 255, 1.0)

Texte d’en-tête de page dans l’état « pointage »

rgba(255, 255, 255, 0.8)

Texte d’en-tête de page dans l’état « appuyé »

rgba(255, 255, 255, 0.4)

Texte d’en-tête de page avec la feuille de style claire

rgba(0, 0, 0, 1.0)

Texte d’en-tête de page dans l’état « pointage »

rgba(0, 0, 0, 0.8)

Texte d’en-tête de page dans l’état « appuyé »

rgba(0, 0, 0, 0.4)

Sous-en-tête de page
  • Famille de polices : Segoe UI Light
  • Taille de police : 20 pts
  • Légende d’illustration : B

Sous-en-tête dans la feuille de style foncée

rgba(255, 255, 255, 1.0)

Sous-en-tête dans l’état « pointage »

rgba(255, 255, 255, 0.8)

Sous-en-tête dans l’état « appuyé »

rgba(255, 255, 255, 0.4)

Sous-en-tête dans la feuille de style claire

rgba(0, 0, 0, 1.0)

Sous-en-tête dans l’état « pointage »

rgba(0, 0, 0, 0.8)

Sous-en-tête de page dans l’état « appuyé »

rgba(0, 0, 0, 0.4)

Sous-en-tête interactif
  • Famille de polices : Segoe UI Light
  • Taille de police : 20 pts
  • Glyphe : Segoe UI Symbol U+E26B
  • Espace entre le texte et le glyphe : 10 pixels
Sous-en-tête interactif dans la feuille de style foncée

rgba(255, 255, 255, 1.0)

Sous-en-tête interactif dans la feuille de style foncée, état « pointage »

rgba(255, 255, 255, 0.8)

Sous-en-tête interactif dans la feuille de style foncée, état « appuyé »

rgba(255, 255, 255, 0.4)

Sous-en-tête interactif dans la feuille de style claire

rgba(0, 0, 0, 1.0)

Sous-en-tête interactif dans la feuille de style claire, état « pointage »

rgba(0, 0, 0, 0.8)

Sous-en-tête interactif dans la feuille de style claire, état « appuyé »

rgba(0, 0, 0, 0.4)

Titre/en-tête d’élément
  • Petit sous-en-tête
  • Famille de polices : Segoe UI Semibold
  • Taille de police : 11 pts
  • Légende d’illustration : C

Titre d’élément dans la feuille de style foncée

rgba(255, 255, 255, 1.0)

Titre d’élément dans l’état « pointage »

rgba(255, 255, 255, 0.8)

Titre d’élément dans l’état « appuyé »

rgba(255, 255, 255, 0.4)

Titre d’élément dans la feuille de style claire

rgba(0, 0, 0, 1.0)

Titre d’élément dans l’état « pointage »

rgba(0, 0, 0, 0.8)

Titre d’élément dans l’état « appuyé »

rgba(0, 0, 0, 0.4)

Titre/en-tête d’élément secondaire
  • Famille de polices : Segoe UI Semibold
  • Taille de police : 11 pts
  • Légende d’illustration : D

Titre d’élément dans la feuille de style foncée

rgba(255, 255, 255, 0.6)

Titre d’élément dans l’état « pointage »

rgba(255, 255, 255, 0.8)

Titre d’élément dans l’état « appuyé »

rgba(255, 255, 255, 0.4)

Titre d’élément dans la feuille de style claire

rgba(0, 0, 0, 0.6)

Titre d’élément dans l’état « pointage »

rgba(0, 0, 0, 0.8)

Titre d’élément dans l’état « appuyé »

rgba(0, 0, 0, 0.4)

Navigation
  • Titre/en-tête d’élément, navigation
  • Famille de polices : Segoe UI
  • Taille de police : 11 pts

Élément de navigation dans la feuille de style foncée

rgba(255, 255, 255, 1.0)

Élément de navigation dans l’état « pointage »

rgba(255, 255, 255, 0.8)

Élément de navigation dans l’état « appuyé »

rgba(255, 255, 255, 0.4)

Élément de navigation dans la feuille de style claire

rgba(0, 0, 0, 1.0)

Élément de navigation dans l’état « pointage »

rgba(0, 0, 0, 0.8)

Élément de navigation dans l’état « appuyé »

rgba(0, 0, 0, 0.4)

Corps de texte
  • Famille de polices : Segoe UI Semilight
  • Taille de police : 11 pts
  • Légende d’illustration : E

Corps de texte dans la feuille de style foncée

rgba(255, 255, 255, 1.0)

Non applicable

Non applicable

Corps de texte dans la feuille de style claire

rgba(0, 0, 0, 1.0)

Non applicable

Non applicable

Liens
  • Famille de polices : Segoe UI Semilight
  • Taille de police : 11 pts
  • Légende d’illustration : F

Lien dans la feuille de style foncée

rgba(148, 102, 255, 1.0)

Lien dans l’état « pointage »

rgba(148, 102, 255, 0.8)

Lien dans l’état « appuyé »

rgba(148, 102, 255, 0.6)

Lien dans la feuille de style claire

rgba(79,26,203, 1.0)

Lien dans l’état « pointage »

rgba(79,26,203, 0.8)

Lien dans l’état « appuyé »

rgba(79,26,203, 0.6)

Informations tertiaires
  • Famille de polices : Segoe UI
  • Taille de police : 9 pts
  • Légende d’illustration : G

Informations tertiaires dans la feuille de style foncée

rgba(255, 255, 255, 1.0)

Informations tertiaires dans l’état « pointage »

rgba(255, 255, 255, 0.8)

Informations tertiaires dans l’état « appuyé »

rgba(255, 255, 255, 0.4)

Informations tertiaires dans la feuille de style claire

rgba(0, 0, 0, 1.0)

Informations tertiaires dans l’état « pointage »

rgba(0, 0, 0, 0.8)

Informations tertiaires dans l’état « appuyé »

rgba(0, 0, 0, 0.4)

Informations tertiaires secondaires
  • Famille de polices : Segoe UI
  • Taille de police : 9 pts
  • Légende d’illustration : H

Informations tertiaires dans la feuille de style foncée

rgba(255, 255, 255, 0.6)

Informations tertiaires dans l’état « pointage »

rgba(255, 255, 255, 0.8)

Informations tertiaires dans l’état « appuyé »

rgba(255, 255, 255, 0.4)

Informations tertiaires dans la feuille de style claire

rgba(0, 0, 0, 0.6)

Informations tertiaires dans l’état « pointage »

rgba(0, 0, 0, 0.8)

Informations tertiaires dans l’état « appuyé »

rgba(0, 0, 0, 0.4)

 

Vous pouvez voir quelles disposition et typographie d’application du Windows Store s’appliquent à un article de blog dans cette illustration :

Exemple d’utilisation des styles typographiques recommandés.

Remarque  La gamme de caractères Windows est optimisée pour du texte clair sur des arrière-plans foncés et utilise des polices fines. Si votre application affiche surtout du texte foncé sur un fond clair, il est préférable de ne pas utiliser cette gamme, car des polices telles que Segoe UI Light ou Semilight ne s’affichent pas bien dans des petites tailles (texte gris foncé sur un fond gris clair). Les plus grosses épaisseurs de police, comme Regular ou Semibold, conviennent mieux pour du texte foncé sur un arrière-plan clair.

Si vous décidez de ne pas suivre la gamme de caractères recommandée, minimisez la plage de tailles et de styles des caractères.

interlettrage Segoe UI (espacement entre les lettres)

L’interlettrage (espacement global entre les lettres) dans l’interface utilisateur est important pour la lisibilité générale du texte, particulièrement lorsque ce dernier est affiché sur des arrière-plans foncés ou complexes.

Si les ajustements de suivi sont généralement très subtiles, presque imperceptibles, sauf dans les cas où les lettres sont très grandes, ces petits ajustements peuvent faire une grande différence sur le plan de la lisibilité d’un paragraphe ou d’une page.

Le suivi est mesuré en unités proportionnelles et non en unités fixes comme le pixel ou le millimètre. L’unité proportionnelle, un em, est égale à la taille de la police en points. Par exemple, la largeur d’un em pour une police de 11 pts est de 11 points. Pour définir l’interlettrage, définissez la propriété CSS letter-spacing.

Nous recommandons ces valeurs d’interlettrage pour Segoe UI, en fonction de la taille et de l’épaisseur de police :

TailleÉpaisseurValeur d’interlettrage (espacement entre les lettres)
42 ptsFine0,00 em
20 ptsNormale0,01 em
Toutes les autresToutes0,02 em

 

Lorsque vous utilisez les feuilles de style de la Bibliothèque Windows pour JavaScript, ces valeurs d’interlettrage sont définies automatiquement.

Nous vous recommandons de conserver les valeurs d’interlettrage par défaut des polices Cambria ou Calibri.

Modifications dans Windows 8 du jeu stylistique Segoe UI

Windows 8 utilise une version de Segoe UI comprenant plusieurs caractères par défaut remodelés, de nouvelles épaisseurs, de nouvelles variantes Microsoft OpenType, ainsi qu’une prise en charge linguistique étendue. Notez que ces caractères remodelés ne changent pas les largeurs de caractères des styles normal et gras. Cela signifie que vous n’avez pas besoin de réorganiser les boîtes de dialogue, les contenus et les sites Web existants lorsque vous utilisez la nouvelle version de Segoe UI.

Cette illustration présente les principaux caractères ayant fait l’objet d’un remodelage.

Segoe UI dans Windows 7Segoe dans Windows 7
Segoe UI dans Windows 8Segoe dans Windows 8

 

Vous pouvez utiliser les caractères Windows 7 en utilisant le jeu stylistique OpenType SS01. Pour utiliser ce jeu dans une application utilisant les feuilles de styles en cascade (CSS), attribuez à la propriété -ms-font-feature-settings la valeur 'ss01' 1, comme illustré dans cet exemple :


<p style="font-family: 'Segoe UI'; -ms-font-feature-settings: 'ss01' 1;">
    Windows 7 Segoe UI
</p>

Si votre application est en C#/VB/C++ et XAML, utilisez la méthode Typography.SetStylisticSet1 pour attribuer la valeur true à StylisticSet1 attached property pour dependency object souhaité.

Vous pouvez également utiliser le jeu stylistique SS20, qui intègre le style et l’espacement préférés. Cette illustration met en relief les différences entre la police Segoe UI par défaut de Windows 8 et les versions SS01 et SS20.

Windows 8 (par défaut)Police Segoe UI par défaut
SS01 (compatible avec Segoe UI de Windows 7)Police Segoe UI de Windows 7
SS20 (style et espacement préférés)Police Segoe UI SS20

 

Si vous n’êtes pas intéressé par la compatibilité descendante, utilisez le jeu stylistique SS20.

Pour la lecture : Cambria

La plupart des médias d’impression utilisant des polices serif, les utilisateurs s’attendent à trouver une police de ce type dans les livres ou les magazines. Cambria est une police serif conçue pour une lecture à l’écran prolongée. Utilisez Cambria pour afficher de grandes quantités de texte, comme le contenu d’un livre ou d’un magazine.

Remarque   Bien que Cambria soit la police par défaut pour le contenu non mis en forme des livres électroniques, les applications de lecture peuvent permettre au lecteur de modifier la police. On s’attend également à ce que davantage de contenu de livre électronique soit mis en forme avec une police intégrée, spécifiée par le concepteur.

Pour la lecture des applications, suivez les recommandations suivantes :

  • Maintenez les colonnes de texte suffisamment étroites en faisant en sorte que les lignes de texte ne soient pas trop longues, pour assurer une lecture confortable. La grille typographique comporte les spécifications nécessaires.
  • Divisez un texte long en chapitres ou en sections.
  • Permettez au lecteur de reprendre la lecture là où il l’a quittée.

Lorsque vous utilisez la police Cambria, utilisez les tailles de police suivantes : 9 pts, 11 pts et 20 pts. Vous pouvez utiliser les épaisseurs de police normale et grasse. Nous vous recommandons de conserver les valeurs d’interlettrage par défaut.

Contrairement à la police Segoe UI, la Bibliothèque WinJS ne propose pas différentes versions de Cambria pour différentes épaisseurs de police. En revanche, vous pouvez définir l’épaisseur de police en attribuant la valeur normal ou bold à la propriété CSS font-weight ou FontWeight pour les applications en XAML. Voici un exemple des tailles et des épaisseurs recommandées pour la police Cambria.

Épaisseurs et tailles standard de la police Cambria

Pour la lecture et l’écriture : Calibri

Calibri est une famille de polices sans-serif conçue pour la lecture de textes longs à l’écran. Utilisez Calibri pour le texte écrit ou modifié par l’utilisateur, notamment dans les clients de messagerie ou de conversation. Il s’agit de la police utilisée par défaut dans Microsoft Outlook, Microsoft Word et Microsoft PowerPoint.

Lorsque vous utilisez Calibri, définissez sa taille de police et son épaisseur à 13 et normal, respectivement. Nous vous recommandons de conserver les valeurs d’interlettrage par défaut de Calibri.

Voici un exemple relatif à la police Calibri :

Police Calibri avec une taille de police de 13 pts et une épaisseur de police normale

Remarque  Calibri 13 pts ayant la même hauteur-x que Segoe UI 11 pts, elles ne sont pas dépareillées lorsqu’elles sont utilisées dans une même ligne.

Rubriques associées

Pour les concepteurs
Disposition d’une page d’application
Recommandations en matière de typographie
Étiquette (ou bloc de texte)
Icônes Segoe UI Symbol
Pour les développeurs (HTML)
WinJS style sheets
Démarrage rapide : ajout de contrôles et de styles WinJS
Disposition d’une page d’application
Icônes Segoe UI Symbol
font-family property
letter-spacing property
-ms-font-feature-settings
Pour les développeurs (XAML)
Référence aux ressources de thème XAML
Disposition d’une page d’application
Icônes Segoe UI Symbol
TextBlock.FontFamily property
Exemples
Exemple d’affichage de texte XAML
Style CSS : personnalisation de votre application exemple
Exemple de mappage de police de langue

 

 

Afficher:
© 2014 Microsoft