Recommandations en matière de typographie

Description

La typographie est au cœur du langage de conception Microsoft. Chacun des principes de conception Microsoft renforce l’importance de la typographie. Pour la première fois, les développeurs d’application disposent de cadres qui prennent en charge des fonctionnalités typographiques avancées.

Pratiques conseillées et déconseillées

• Utilisez une grille typographique pour disposer votre texte.
• Utilisez Unicode pour améliorer votre texte.
• Appliquez les fonctionnalités Microsoft OpenType de manière globale.
• Utilisez des majuscules en début de phrase.
• Utilisez un tiret demi-cadratin à la place d’un trait d’union dans les plages numériques.
• N’appliquez pas de ligatures discrétionnaires si vous n’utilisez pas les polices recommandées.
• N’utilisez pas de texte justifié.

Indications d’utilisation supplémentaires

Segoe UI

La police d’interface utilisateur Windows, Segoe UI, est apparue en même temps que Windows Vista/Office 2007. Il s’agit d’une police sans serif créée dans la tradition des polices de signalisation et de navigation. Depuis son introduction, Segoe UI a défini la personnalité de toutes les offres Microsoft. Elle influence l’aspect des systèmes d’exploitation, des applications et des périphériques, et est présente dans les logos, les marques, les publicités et les emballages. Cette police est la typographie par excellence de Microsoft.

Dans Windows 8, nous avons apportées des modifications à la gamme Segoe UI. Les modifications principales sont les suivantes :

• Les polices Segoe UI Light et Segoe UI Semibold ont été affinées pour améliorer leur rendu à l’écran.
• Nous avons amélioré la conception des chiffres par défaut ainsi que des lettres "Q" et "I" pour qu’ils soient adaptés à la version Windows Phone de Segoe. Vous pouvez continuer à utiliser les écrans Windows Vista avec un « jeu stylistique » OpenType (SS01).
• Dans les polices Segoe UI Light, Semilight et Semibold, nous avons appliqué un espacement proportionnel des nombres par défaut. Vous pouvez accéder aux nombres non proportionnels plus classiques dans les applications du Windows Store en C#/VB/C++ et XAML en affectant la valeur « Tabular » à la propriété jointe Typography.NumeralAlignment. Si vous utilisez JavaScript et HTML, affectez la valeur « TNUM » à font-feature-settings property pour appliquer la fonctionnalité OpenType d’espacement tabulaire (non proportionnels) des nombres.
• Étant donné que les concepteurs utilisent souvent Segoe UI Light avec des tailles inférieures à 20pt, ce qui est plus petit que ce pourquoi elle a été conçue, nous avons ajouté Segoe UI Semilight, une version légère de Segoe UI dont le rendu est impeccable à des petites tailles, même à 11pt. Nous vous recommandons d’utiliser cette police lorsque vous voulez donner à du texte de petite taille un aspect fin.
• Dans Windows Vista et Windows 7, Segoe UI prenait en charge le latin, le grec, le cyrillique et l’arabe (uniquement avec les styles normal et gras). Pour Windows 8, nous avons agrandi la palette des langues prises en charge avec la police Segoe UI en incluant l‘hébreu, l’arménien et le géorgien et nous avons amélioré l’arabe. Segoe UI comprend désormais un jeu de caractères couvrant toutes les principales langues européennes et du Moyen-Orient.
• Bien que l’italique ne soit pas utilisé pour l’interface utilisateur Windows, nous avons ajouté des variantes de l’italique pour les cinq épaisseurs de Segoe UI, spécialement pour les applications.
• Nous avons ajouté des variantes avancées d’OpenType aux polices, notamment des petites majuscules, des ligatures et des styles numériques pour toutes les épaisseurs.

Dans Windows 8.1, nous avons ajouté Segoe UI Black et Segoe UI Black Italic, avec une couverture des langues paneuropéennes, ce qui étend davantage la palette des choix de polices disponibles.

Polices pour d’autres langues

Windows 8 comprend également des polices alignées sur Segoe UI pour la plupart des autres langues. Ces polices sont disponibles en deux épaisseurs : normal et gras. Bien que nous n’ayons pas prévu une police alignée sur Segoe UI pour le japonais, notre police pour l’interface utilisateur japonaise, Meiryo UI, comporte des caractères et nombres latins de style Segoe UI regroupés dans un jeu stylistique OpenType (SS20).

Voici une liste des polices recommandées pour les langues et scripts courants suivants :

Notez que Windows 8.1 propose également les polices suivantes :

• Microsoft YaHei UI Light (utilisable à 20 points et plus)
• Microsoft JhengHei UI Light (utilisable à 20 points et plus)
• Leelawadee UI Semilight (utilisable à 11 points et plus)
• Nirmala UI Semilight (utilisable à 11 points et plus)

Si vous localisez votre application avec des polices intégrées, reportez-vous aux API Windows.Globalization.Fonts pour identifier les polices d’interface utilisateur et de document recommandées pour un système d’écriture donné.

Utilisation d’autres polices

L’association de Segoe UI avec Windows 8 et Microsoft présente des avantages et des inconvénients. En utilisant la police correctement vous apportez instantanément de la crédibilité à votre application. Mais cela peut vous empêcher d’insuffler votre propre style ou marque dans votre application.

Heureusement, Windows 8 est fourni avec d’autres polices de qualité optimale. Une police serif telle que Cambria couvre de nombreuses langues et offre un aspect traditionnel. Vos utilisateurs retrouveront Calibri, notre police de rédaction par défaut. Dans Windows 8, une épaisseur légère a été ajoutée à Calibri, ce qui constitue une bonne alternative sans-serif à Segoe UI. Comme Segoe UI, Cambria et Calibri comportent des fonctionnalités OpenType avancées. Dans Windows 8.1, nous avons également ajouté une nouvelle famille de polices appelée Sitka, qui est disponible dans différentes tailles.

Lorsque vous utilisez une police intégrée, testez-la sur un ordinateur comportant une nouvelle installation de Windows 8 pour vérifier que la police est disponible et qu’elle ne nécessite pas l’installation de Microsoft Office ou d’une autre application. Windows 8 et Windows 8.1 sont fournis avec le même jeu de polices, quelle que soit la langue ou l’édition.

Si le jeu principal des polices Windows ne vous fournit pas ce dont vous avez besoin, vous pouvez incorporer d’autres polices dans votre application. Cependant, sachez que cela peut produire des problèmes de rendu et de licence, notamment :

• La plupart des polices tierces n’ont pas le même niveau indicatif que de nombreuses polices intégrées à Windows. Aussi, testez-les soigneusement avec les tailles voulues.
• Bien que la plupart des licences de police permettent, dans une certaine mesure, l’incorporation de polices dans des documents, la plupart ne permettent pas la redistribution ou l’incorporation des polices dans une application ou un jeu. Avant d’incorporer une police, lisez attentivement les conditions de sa licence, et en cas de doute, contactez son créateur.

Choix des tailles et épaisseurs appropriées

Avec l’avènement de la PAO, il est devenu facile de se procurer des polices dans différentes tailles et épaisseurs. Les premiers éditeurs PAO utilisaient souvent une grande variété de tailles et d’épaisseurs de police dans le même document, une caractéristique de la typographie amateur. Trop de tailles et d’épaisseurs de police empêchent une hiérarchisation claire des informations. Pour cette raison, l’interface utilisateur de Windows 8 utilise uniquement quelques tailles et épaisseurs de police :

• Segoe UI Light : 42 points pour les titres
• Segoe UI Light : 20 points pour les en-têtes
• Segoe UI Light : 11 points pour les copies de texte de corps
• Segoe UI Regular : 9 points pour les légendes

Pour obtenir la gamme complète des caractères, voir Recommandations en matière de polices.

  La gamme de caractères Windows est optimisée pour du texte clair sur des fonds foncés et utilise par défaut des polices fines. Si votre application affiche surtout du texte foncé sur un arrière-plan 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 arrière-plan 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 Windows 8, minimisez la plage de tailles et de styles des caractères.

Disposition d’une page d’application

L’espace autour du texte est aussi important que la taille de la police, pour cette raison nous vous recommandons d’utiliser une grille typographique pour disposer votre texte. Pour en savoir plus sur l’utilisation de la grille Windows, voir Disposition d’une page d’application. En plus d’utiliser la grille, apportez une attention particulière aux marges et à l’espace autour des images et des illustrations. Une bonne disposition peut être gâchée si le texte n’entoure pas correctement une image ou si les marges des éléments de la page ne sont pas cohérentes.

8 conseils pour une bonne typographie

Une bonne typographie ne s’obtient pas en utilisant seulement la bonne police à la bonne taille avec un bon espacement. Bien qu’il existe de nombreux manuels sur la typographie (voir la section Suggestions de lecture), voici quelques conseils qui vous permettront d’obtenir la meilleure typographie possible.

1. Appliquez les fonctionnalités OpenType globalement

Si vous utilisez l’une des polices d’interface utilisateur recommandées, appliquez ces fonctionnalités OpenType à tout le texte : crénage (kern), ligatures discrétionnaires (dlig) et jeu stylistique 20 (SS20).

• Le crénage améliore l’espace entre les lettres de votre texte, et il est plus évident à des tailles plus grandes (à titre d’exemple, comparez le "To" (À) dans l’illustration avant et après plus bas).
• Les ligatures sont des éléments essentiels d’une typographie de qualité optimale, mais pour empêcher la réorganisation des boîtes de dialogue dans le contenu hérité, nous avons codé les ligatures standard en tant que ligatures discrétionnaires dans Segoe UI. Par conséquent, vous devez les activer pour les utiliser.
• Le jeu stylistique OpenType 20 vous permet d’accéder à vos formes de lettre et à votre espacement favoris. (Ce jeu stylistique est particulièrement utile pour les nombres.) De plus, lorsque vous appliquez ce jeu stylistique, il garantit un rendu cohérent du texte pour toutes les épaisseurs et pour tous les styles Segoe UI.

Si vous n’utilisez pas les polices d’interface utilisateur recommandées, il est préférable d’appliquer uniquement le crénage (kern) et les ligatures standard (liga). N’appliquez pas de ligatures discrétionnaires si vous avez décidé d’utiliser les polices recommandées.

<p class='note'>
    6/16/2012<br />
    To: Simon Daniels<br />
    Please find enclosed five flashing baffles.
</p>

.note {
    font-family: 'Segoe UI';
    -ms-font-feature-settings: 'kern' 1, 'dlig' 1, 'ss20' 1, 'lig' 1
}

Ces illustrations montrent le texte avant et après l’application des fonctionnalités OpenType.

Avant	Après

2. Exploitez la puissance d’Unicode

Utiliser les caractères appropriés au lieu de texte ASCII brut, est le meilleur moyen de donner un aspect plus professionnel à votre texte :

• Évitez les guillemets et les apostrophes droits.
• Utilisez le symbole de multiplication au lieu du "x" minuscule.
• Utilisez de préférence le symbole de rapport au lieu d’un signe deux-points (:) comme délimiteur de temps.
• Utilisez des tirets au lieu de traits d’union ou du signe moins (-).

Le trait d’union est très souvent incorrectement employé dans les plages numériques. Par conséquent, utilisez de préférence un tiret demi-cadratin. Pour un rendu typographique parfait, placez un espace ultrafin avant et après le tiret demi-cadratin. Enfin, avec des chiffres alignés ou du texte en minuscules et majuscules, élevez légèrement le tiret demi-cadratin pour qu’il soit placé au centre de la lettre optique.

Si votre application affiche du contenu qui échappe à votre contrôle, comme un flux d’informations, vous pouvez corriger automatiquement ce contenu à la volée à l’aide de techniques de recherche et de remplacement de chaînes de base.

Voici quelques exemples de l’utilisation de symboles Unicode pour améliorer votre texte.

Sans symboles Unicode	Avec des symboles Unicode	Points de code Unicode à utiliser
		U+201C, U+201D
		U+2019
		U+2236
		U+00D7
		U+00BD
		U+2026
		U+2013, U+200A (espace ultrafin)

Unicode comprend également des milliers de symboles, notamment 722 symboles emojis qui ont été ajoutés aux symboles standard. Vous pouvez utiliser plusieurs de ces symboles au lieu d’utiliser du texte et des bitmaps dans votre application. Pour obtenir la liste des symboles Unicode disponibles, voir la liste d’icônes Segoe UI Symbol.

3. Utilisez des majuscules en début de phrase

En cas de communication à l’aide de texte, l’approche applicable globalement consiste à utiliser, par convention, des majuscules en début de phrase. L’affection à du texte le style « Tout en majuscules » ou « Tout en minuscules » ne sera pas transcrite dans les systèmes d’écriture internationaux qui utilisent une seule casse. L’utilisation standard de majuscules en début de phrase rend votre application plus accessible à un public plus large.

4. Utilisez les fonctionnalités OpenType au cas par cas

Si vous suivez les trois premières règles, votre texte sera harmonieux. En revanche, si vous voulez aller plus loin, vous pouvez appliquer des fonctionnalités OpenType à certaines parties de texte. Par exemple, utilisez la fonctionnalité de petites majuscules OpenType pour entourer les acronymes. Cette fonctionnalité applique de véritables petites majuscules (et non des majuscules mises à l’échelle). Si votre contenu comporte des nombres, appliquez la fonctionnalité de chiffres minuscules au texte. Cette fonctionnalité utilise des chiffres de style ancien (ou minuscules) qui peuvent mieux convenir à votre contenu.

Voici un exemple :

<p style="font-family: ’Segoe UI’;" >
   In <span style="font-feature-settings: ’onum’ 1;">2012</span> <span style="font-feature-
   settings: ’c2sc’ 1;">NASA</span> sent <span style="font-feature-settings: ’onum’ 1;">5</span> 
   astronauts to the <span style="font-feature-settings: ’c2sc’ 1;">ISS</span>
</p>

Avant d’appliquer la fonctionnalité de chiffres minuscules :

Après :

5. Éditez

L’édition est un aspect de la typographie qui est souvent ignoré. De nombreux concepteurs ne trouvent pas utile de modifier le texte. Mais si le texte n’est pas bien rédigé et pas facile à comprendre, son aspect importe peu.

6. Utilisez le crénage, l’interlettrage, la coupure de mots et l’alignement à bon escient

Les créateurs de caractères vous le diront, l’espace entre les lettres est aussi important que leur forme. Le crénage (mentionné dans la première règle), ajuste l’espacement entre des paires spécifiques de lettres pour améliorer l’espacement entre les lettres. Nous vous recommandons de l’appliquer à tout votre contenu.

L’interlettrage, pour sa part, ajoute (ou supprime) équitablement de l’espace entre toutes les lettres d’une chaîne. Bien que l’espacement par défaut entre les lettres d’une police offre souvent une facilité de lecture optimale à une taille particulière, dans certains cas il peut être judicieux de l’élargir légèrement. Des valeurs d’interlettrage de .01em ou .02em peuvent être appropriées.

Avec du texte entièrement justifié, il est plus difficile d’obtenir un bon espacement. Lorsque du texte doit tenir dans un conteneur en étant justifié, son espacement en pâtit toujours. Le texte justifié comporte en général des « rivières » d’espace blanc (de grands espaces entre les mots) dans le contenu. Évitez de justifier totalement le texte et dans la mesure du possible conservez l’alignement à gauche. Enfin, recourez à la coupure de mots pour éviter que le bord droit du texte soit trop irrégulier.

7. Utilisez des contrôles basés sur des polices

L’un des secrets les mieux gardés de la typographie de Windows est qu’un grand nombre de boutons, d’icônes et de contrôles utilisés dans l’interface utilisateur sont basés sur des polices. Il n’y a aucune bitmap ni aucun graphique vectoriel évolutif (SVG, Scalable Vector Graphics), mais des glyphes mappés à la zone d’utilisation privée Unicode de la police Segoe UI Symbol. Diverses applications en démonstration utilisent la même approche pour afficher leurs icônes et leurs contrôles.

Les icônes et les contrôles basés sur des polices changent de taille comme les caractères normaux de polices. Ils peuvent être alignés avec d’autres éléments de texte et, grâce à l’application de plusieurs couches, ils peuvent apparaître en couleur. Windows 8.1 prend en charge les polices en couleur, ce qui étend davantage les possibilités pour les contrôles basés sur des polices.

8. Permettez au lecteur de personnaliser l’environnement de lecture

Fournissez aux utilisateurs des paramètres leur permettant de changer la taille du texte de corps, sans altérer les paramètres du système. Nous vous recommandons d’utiliser ces valeurs : petit (11pt), moyen (14pt) et grand (18pt). En outre, l’application doit pouvoir permettre aux utilisateurs de choisir entre du texte foncé sur un fond clair, qui offre la meilleure lisibilité possible, et du texte foncé sur un fond teinté ou du texte clair sur un fond foncé, qui peut permettre de réduire la fatigue oculaire dans certains environnements. Donner aux utilisateurs le choix entre différentes options de police de corps est idéal pour lire des contenus sur des périphériques de lecture électronique. Limitez la liste des options et faites en sorte qu’elles soient appropriées à chaque langue.

Quand vous créez une application de lecture, pensez à ajouter un menu volant dans la barre inférieure de l’application pour permettre aux utilisateurs de changer la taille du texte. Vous pouvez utiliser l’icône de taille de police Segoe UI Symbol pour créer une expérience prévisible et cohérente pour les utilisateurs. Pour une vue d’ensemble des icônes standard, voir la liste d’icônes Segoe UI Symbol.

L’image ci-dessous présente une nouvelle application avec un menu volant pour le redimensionnement du texte situé sur la barre de l’application.

Suggestions de lecture

En suivant les conseils de cette rubrique vous donnerez à votre application un aspect attrayant grâce à la typographie. Mais ce n’est rien par rapport à ce qu’il est possible de faire avec des polices modernes et la puissance d’OpenType. Si vous voulez en savoir plus, nous vous recommandons de lire ces ouvrages :

• The Elements of Typographic Style (en anglais) par Robert Bringhurst
• Inside Paragraphs: Typographic Fundamentals (en anglais) par Cyrus Highsmith
• Le détail en typographie par Jost Hochuli
• Thinking with Type (en anglais) par Ellen Lupton
• Stop Stealing Sheep (en anglais) par Erik Spiekermann et E.M. Ginger

L’article de IEBlogUsing the whole font (en anglais) donne de bonnes indications sur l’application de fonctionnalités OpenType CSS (Cascading Style Sheets) , et les démonstrations associées fournies par Monotype, FontShop et Font Bureau illustrent l’étendue des possibilités offertes par cette technologie.

Pour les concepteurs

Recommandations en matière de polices

Étiquette (ou bloc de texte)

Recommandations en matière d’icônes Segoe UI Symbol

Disposition d’une page d’application

Recommandations en matière de menus volants (applications du Windows Store)

Pour les développeurs (HTML)

font-feature-settings property

Pour les développeurs (XAML)

Windows.Globalization.Fonts

Propriété attachée Typography.NumeralAlignment