La typographie dans Metro

Comme je l’avais abordé dans mon précédent article sur Metro, le langage graphique de Windows Phone 7, la typographie est un élément clé de la conception des applications. Les éléments textuels servent à afficher des informations mais font également partie de la décoration des applications. Dans cet article je couvrirai les différents cas d’utilisation de typographie et les recommandations de Microsoft sur les polices, graisses et casses pour que vos applications paraissent le plus native possible !

La police de caractères de Metro

Windows Phone 7 intègre par défaut la police de caractère Segoe WP qui est utilisée dans tout le reste du système. Quand vous concevez une application, c’est également cette police de caractère qui est utilisée par défaut. Vous pouvez intégrer vos propres polices, et les polices standards telles qu’Arial, Times, etc. sont également disponibles mais dans le cas d’une application il est fortement conseillé de rester sur Segoe WP car Metro est fortement basé dessus. Dans le cas d’un jeu XNA en revanche, vous pouvez utiliser n’importe quelle police si elle va dans l’esprit de votre jeu.

La police Segoe WP se décline en 6 variations de graisses, du plus au moins épais :

• Segoe WP Black
• Segoe WP Bold
• Segoe WP SemiBold
• Segoe WP Regular (par défaut)
• Segoe WP SemiLight
• Segoe WP Light

Pour une raison que j’ignore, le guide « UI Design and Interaction Guide for Windows Phone 7 », véritable guide sur l’interface Metro, ne mentionne pas Segoe WP Light dans les différents styles de Segoe WP, mais on peut quand même l’utiliser dans ses interfaces. A savoir après si cela est « bien » au sens de Metro…

Les titres de page ou de sections dans les applications Windows Phone 7 sont généralement en Segoe WP SemiLight. Comme vous pouvez le remarquer, j’ai mis tout le titre en bas de casse. C’est notre première règle typographique de Metro : quand vous utilisez du Segoe WP SemiLight ou Light, tout le texte doit être en bas de casse.

Autre constatation, certains éléments sont entièrement en bas de casse tandis que d’autre sont entièrement en capitales : c’est par exemple le cas du titre de l’application, situé au-dessus du titre de page, ou bien de tout élément en Segoe WP Black.

Comment utiliser les ressources du système

Pour ce qui est des tailles, Metro recommande de ne pas utiliser de taille de police en dessous de 15 pts. Vous pouvez choisir vous-même les tailles de vos blocs de texte, mais plutôt que de mettre des tailles en valeur absolue, vous pouvez également utiliser dans vos applications les styles prédéfinis de Metro. Ces tailles sont contenues dans un fichier de ressources ; vous pouvez donc y accéder par l’extension StaticResource. Par exemple :

<TextBlock Foreground="{StaticResource PhoneAccentBrush}" FontFamily="Segoe WP" FontSize="{StaticResource PhoneFontSizeMediumLarge}" Text="important notice in segoe wp bold" FontWeight="Bold"/>

Le tableau ci-dessous (extrait de la MSDN library), récapitule toutes les tailles de police du fichier de ressources Metro. Notez bien qu’elle est donnée en point et non en pixel. Pour rappel, un point est égal à 1/72^ème de pouce alors que l’unité de mesure de la police dans Silverlight est égale à 1/96^ème de pouce, la conversion pour passer de points à pixel est donc de 96/72 soit 4/3.

Nom (clé dans le dictionnaire des ressources)	Définition	Taille
PhoneFontSizeSmall	Petite police	14 pts (18,666666 px)
PhoneFontSizeNormal	Police normale	15 pts (20 px)
PhoneFontSizeMedium	Police moyenne	17 pts (22,666666 px)
PhoneFontSizeMediumLarge	Police assez grande	19 pts (25,333333 px)
PhoneFontSizeLarge	Police grande	24 pts (32 px)
PhoneFontSizeExtraLarge	Police très grande	32 pts (42,666666 px)
PhoneFontSizeExtraExtraLarge	Police très très grande	54 pts (72 px)
PhoneFontSizeHuge	Police énorme	140 pts (186,666666 px)

De la même manière on peut utiliser le fichier de ressources pour les brushes, couleurs, polices, et marges. Par exemple on peut utiliser comme couleur de texte, la couleur de thème choisie par l’utilisateur. Cela permet de garder l’utilisateur dans son univers, et d’accentuer une phrase donnée. Toutes les clés de ressources et leur description sont accessibles sur la MSDN library à l’adresse suivante : http://msdn.microsoft.com/en-us/library/ff769552(VS.92).aspx

Enfin, sont également disponibles des styles de TextBlock prêt à être utilisés pour remplir certaines fonctions définies, telles que le titre d’une page. Dans ce cas, vous n’avez qu’à remplir la propriété Style. Par exemple :

<TextBlock x:Name="PageTitle" Text="semi light"  Style="{StaticResource PhoneTextTitle1Style}" />

Le tableau suivant (toujours issu de la même source) récapitule tous les Styles de TextBlock disponibles.

Name	Description
PhoneTextBlockBase	FontFamily: PhoneFontFamilyNormal FontSize: PhoneFontSizeSmall Foreground: PhoneTextBoxBrush Margin: PhoneHorizontalMargin
PhoneTextNormalStyle	FontFamily: PhoneFontFamilyNormal FontSize: PhoneFontSizeNormal Foreground: PhoneForegroundBrush
PhoneTextTitle1Style	FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeExtraExtraLarge Foreground: PhoneForegroundBrush
PhoneTextTitle2Style	FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge Foreground: PhoneForegroundBrush
PhoneTextTitle3Style	FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeMedium Foreground: PhoneForegroundBrush
PhoneTextLargeStyle	FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge Foreground: PhoneForegroundBrush
PhoneTextExtraLargeStyle	FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeExtraLarge Foreground: PhoneForegroundBrush
PhoneTextGroupHeaderStyle	FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge Foreground: PhoneSubtleBrush
PhoneTextSmallStyle	FontFamily: PhoneFontFamilyNormal FontSize: PhoneFontSizeSmall Foreground: PhoneSubtleBrush
PhoneTextContrastStyle	FontFamily: PhoneFontFamilySemiBold FontSize: PhoneFontSizeNormal Foreground: PhoneContrastForegroundBrush
PhoneTextAccentStyle	FontFamily: PhoneFontFamilySemiBold FontSize: PhoneFontSizeNormal Foreground: PhoneAccentBrush

Les nouveaux contrôles des outils de développement

Le 16 septembre sortiront les outils de développement de Windows Phone 7 en RTM. Parmi les nouveautés, on pourra trouver entre autres les fameux contrôles Panorama et Pivot que tout le monde attend. Jeff Wilcox a écrit sur son blog un aperçu de ces deux nouveaux contrôles : http://www.jeff.wilcox.name/2010/08/looking-ahead-at-panorama-and-pivot/

Dans les deux captures on remarque l’utilisation de la police Segoe WP SemiLight et toujours en bas de casse.

1 Le contrôle Panorama

2 Le contrôle Pivot

Pour conclure, on peut remarquer que Metro implique quelques règles typographiques assez particulières, voire déconcertantes pour certaines personnes. Il ne faut pas les prendre à la légère car c’est ce genre de détails subtils qui font la richesse de Metro. Soignez donc vos textes, et utilisez dès que vous le pouvez les ressources du système pour rendre votre application aussi cohérente que possible !