Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

UWP que fait la police dans les fontes !

Les environnements de développement modernes ne s’imposent plus via des choix techniques à destination des informaticiens mais par des choix esthétiques à destination des utilisateurs. Ces aspects sont donc fortement règlementés autant que les API. Il en va ainsi des fontes utilisables dans vos programmes…

Design first

Lorsque je défend dans ces colonnes le concept de “design first” ce n’est pas uniquement par amour des belles choses, mais bien parce que l’ensemble de l’industrie informatique a basculé dans ce mode (et non cette mode !).

Désormais le look & feel fait bien plus pour l’adoption d’un OS ou d’une machine que la qualité des outils de développement. Et c’est la même chose pour les applications.

C’est pour cela qu’il faut aujourd’hui concevoir les applications en mode Design First, et ensuite s’inquiéter de l’implémentation.

Avec Microsoft nous avons l’avantage d’une société qui a un passé très marqué par la “developer-centric business culture”, la culture d’un business centré sur les développeurs. Ce qui fait que nous disposons des meilleurs outils de développement là où les autres doivent se contenter d’outils préhistoriques.

Mais même Microsoft s’est plié à cette contrainte du Design First. La codification de “Metro” fut une étape essentielle de ce changement.

Toutefois cela ne sert à rien si les développeurs ne suivent pas le design. Car l’OS n’est plus aujourd’hui une coquille pour tout et n’importe quoi, mais l’éditeur vend aussi une UX avec son OS. Et les applications doivent se conformer à cette UX pour qu’elles soient cohérentes et plaisantes pour l’utilisateur final.

Ainsi, bannissez par pitié les kits qui permettent d’avoir le look Material Design de Google par exemple sur Windows 10 ! J’aime Material Design mais faire une application avec ce look sur Windows Phone serait totalement incohérent. Comme l’inverse. On se doit de respecter l’OS sur lequel on se trouve. Ce qui avec UWP ne pose pas de problème puisque le même OS permet d’attaquer tous les forms factors sans être obligé de se mélanger avec d’autres OS… Le cross-form-factor remplace le cross-plateforme en quelque sorte.

Il a donc des règles et il faut les respecter, la créativité doit s’installer dans les bornes de ces règles. Ce qui n’est pas gênant car créer sous crainte est souvent ce qui donne les œuvres les plus belles !

La police des fontes vous a à l’œil !

Ne vous inquiétez le GIGN ne vas pas débarquer par les fenêtres parce que vous aurez utilisé du Comic Sans, même si une exécution sommaire serait une punition adaptée à un tel sacrilège, un crime lèse-design !

En revanche dans vos applications UWP Microsoft vous conseille très fortement de respecter un choix de fontes et de contextes dans lesquels l’utiliser…

La type ramp Windows 10

imageLa type ramp, qu’on pourrait traduire par … pas grand chose… la “rampe des fontes” ce qui n’éclaire pas beaucoup, donc mieux vaut garder l’expression américaine… On comprend dans cette notion de “rampe” qu’il y a à la fois un choix, une succession, une progression. Et c’est bien de cela qu’il s’agit en fait : une progression dans les tailles et les graisses selon le contexte.

La police Windows 10 pour les UI est le Segoe UI, pas une autre. Et cette fonte se décline en différentes tailles et graisses selon le contexte précis. Ce contexte se matérialise même par un nom de style XAML directement utilisable dans vos applications. Il est fortement conseillé là aussi d’utiliser ces noms de styles plutôt que la fonte directement. UWP peut évoluer et en utilisant les styles prédéfinis vous êtres certains que votre application suivra les changements en dehors de la certitude de respecter la charte graphique UWP.

Style Graisse Taille Style XAML
Header / Entête Light 45 epx HeaderTextBlockStyle
SubHeader / Sous Entête Light 34 SubHeaderTextBlockStyle
Title / Titre Semilight 24 TitleTextBlockStyle
Subtitle / Sous-titre Regular 20 SubtitleTextBlockStyle
Base Semibold 15 BaseTextBlackStyle
Body / Corps Regular 15 BodyTextBlockStyle
Caption / Légence Regular 12 CaptionTextBlockStyle

 

On notera la taille indiquée en “epx”, c’est à dire en “effective pixels” ou “pixels effectifs”, des pixels invariants peu importe la taille réelle du support et sa résolution, gros avantage de UWP.

Autres fontes

les choses ne sont pas si strictes que cela malgré tout. Et vous avez le droit d’utiliser d’autres polices que Segoe UI, mais là encore cela reste très codifié.

Windows 10 vous garantit que certaines polices seront présentes, en utiliser d’autres pourra poser des problèmes ou alourdir et ralentir votre application (téléchargement de la police notamment et mauvais affichage si ce téléchargement n’est pas possible). Il existe des polices spéciales pour les jeux de caractères étrangers non alphabétiques, je ne les listerai pas ici, la doc MSDN est là pour cela, mais il est intéressant de connaitre la liste des fontes directement exploitables en occident hors Segoe UI :

  • Arial (Regular, Italic, Bold, Bold Italic, Black)
  • Calibri (Regular, Italic, Bold, Bold Italic, Light, Light Italic)
  • Cambria (Regular)
  • Cambria Math (Regular)
  • Courier New (Regular, Italic, Bold, Boid italic)
  • Georgia (Regular, italic, Bold, Bold italic)
  • Lucida Console (Regular)
  • Segoe MDL2 Assets (Regular) police spécifique pour les icônes d’App
  • Segoe Print (Regular)
  • SimSun (Regular)
  • Times New Roman (Regular, Italic, Bold, Bold italic)
  • Trebuchet MS (Regular, Italic, Bold, Bold italic)
  • Verdana (Regular, Italic, Bold, Bold italic)
  • Webdings (Regular)
  • Wingdings (Regular)

Sorti de ce lot de polices assurément présentes, il y a donc des risques à prendre et à calculer…

La liste ci-dessus utilise chaque fonte (en 14) pour son nom (sauf les deux de symboles à la fin), donc pour voir cette liste correctement il faut que vous ayez les polices installées chez vous. Pas de problème si vous faites tourner Windows 10, sinon certaines vous manqueront et l’affichage ne sera pas conforme.

Conclusion

Dans une approche design first le choix des fontes est tout sauf anodin… Connaitre les quelques règles imposées par la plateforme, utiliser les bons styles XAML, savoir quelques fontes complémentaires peuvent être utilisées, tout cela est vraiment essentiel. Rien ne sert de partir sur un design si vous ne respectez pas au départ ces impératifs. La place disponible pour votre mise en page dépendra grandement de la longueur des textes et celle-ci est directement liée à celle de la fonte utilisée.

UWP ne s’écarte pas tant que cela de Metro notamment dans l’esprit. Et Metro mettait l’accent sur l’utilisation des mots et des fontes dans différentes tailles. UWP reste dans cette ligne là, à vous d’en faire l’usage le plus esthétique et le plus pratique possible !

Stay Tuned !

Faites des heureux, partagez l'article !
blog comments powered by Disqus