Avant d’utiliser les polices proposées par Google dans le Google font directory, j’ai décidé de les tester une par une, sur OS-X et sur Windows afin d’évaluer leur lisibilité. Cet article propose un récapitulatif des résultats sous forme de pdf téléchargeable gratuitement (Français/Anglais) ainsi qu’une analyse détaillée…

Webdesign et typographie

2010 aura incontestablement été l’année de la typographie sur le web. Le nombre de services dédiés (ou non d’ailleurs) à l’usage de polices sur le web (via @font-face) a explosé ces derniers mois (Typekit, FontDeck, Typotheque, FontsLive, Fontspring, TypeFront, Roshe Blau Chaussures premium De Teal Fbrglss Platinum Femme midnight Pour Print Course One Nike 64HcTZyUZ, Ascender fonts, Kernest, Webink etc.) c’est un véritable raz-de marée d’outils au service du travail typographique sur le web.

Alors qu’il était déjà difficile d’utiliser intelligemment les polices de la petite liste dite « web-safe », celà devient carrément compliqué de s’y retrouver sans être typographe avec ces milliers de polices à portée de main… Sachant qu’en rêgle générale, plus nous avons de choix possibles, plus nous avons du mal à choisir, alors autant revenir aux bases pour faire des choix cohérents.

Dans ce que je peux comprendre du travail typographique d’un webdesigner, la base d’un caractère de labeur c’est avant tout d’être lisible sur plusieurs résolutions, systèmes d’exploitation, dans différents corps de texte etc. Une police qui correspond parfaitement à votre stratégie de communication mais qui s’avère illisible sur Windows XP sera malheureusement inutilisable. Rappelons que Windows XP est encore utilisé par environ 60% des utilisateurs (statistiques Juin 2010 – MarketShare)

Evaluation de la lisibilité

J’ai donc décidé de me lancer dans une petite série de tests basiques pour évaluer la lisibilité des polices proposées par Google dans son « Google font directory ». Je me suis placé dans un environnement relativement clair, sur fond neutre et j’ai essayé de lire un texte à une quarantaine de centimètres de mon écran.

Puisque la qualité du rendu dépend beaucoup du système d’exploitation j’ai testé les polices sur Mac OS-X mais également sur Windows (XP et Vista). (Wn Femmes trainer Pour Crulen Fm Tazon Cross Chaussures Puma Argent Blanc 6 nOHS1Bx fonctionne très bien pour l’émulation d’OS). J’ai évalué la lisibilité des polices à la lecture d’un long texte « compact » et non pour du titrage. Les valeurs de corps de texte s’échelonnent de 9 à 18pt.

Aqua Rapide Chaussures Sport De Aquatiques Nautique Surf Yoga Aux Chaussettes Pour Swim World Pieds Beach Femmes Joinfree Nus Schage Pool gqwqOnx4z

Pour visualiser facilement toutes les polices dans tous les corps différents, j’ai customisé l’outil de test réalisé par l’agence Miura afin de concevoir une page de test appropriée : texte en Français (extrait d’un brouillon d’article pour les cahiers de GUTemberg : « Pour une typologie de la feuille Aldine » par Max Caflish, 20Sept.2001), suppression des parties inutiles, modification du code Javascript, modification des css pour gagner en clarté.

PDF récapitulatif des résultats de test

Afin de visualiser rapidement l’ensemble des résultats, je les ai regroupé dans un pdf, une sorte de Google fonts legibility cheat sheet disponible gratuitement ici en version Fr et En :

Cliquez sur les visuels pour télécharger les pdf

Version française :

English version :

PDF : Résultats de test de lisibilité des polices Google (FR) PDF : Google fonts legibility test results (EN)

Explication des résultats

Il existe une énorme différence de rendu selon si l’on se trouve sur OS-X ou sur Windows. Pour illustrer mon propos voici un screenshot du rendu de la police Molengo en 12pt sur Firefox 3.6.6 sur ces deux systèmes :

Cliquer sur l’image pour agrandir

Nous pouvons constater des problèmes de rendu sur Windows XP : l’approche de certains caractères semble inappropriée (approche à droite du « e » et à gauche du « s »). Le lissage des caractères est différent entre les deux systèmes. Sur windows l’aspect est plus net alors que sur OS-X les caractères sont très lissés et plus noirs.

Cette différence de rendu est lié à au hinting (instructions mathématiques permettant d’adapter le tracé d’un caractère à une grille de pixels). Le hinting est est processus complexe que je n’expliquerai pas ici mais vous pouvez trouver de très bons articles à ce sujet sur le net.

Il faut simplement avoir en tête que le rendu d’une police dépend de plusieurs facteurs : de son tracé, de son format et des instructions qu’elle contient, du système d’exploitation, du programme qui va afficher la police (ex : un navigateur, un logiciel de traitement de texte etc.).

Sur OS-X, le rendu est bien plus « lisse » que sur Windows (XP-Vista) simplement parce que le système de hinting OS-X est différent. Cela peut-être lié à la police mais ce n’est pas forcément le cas. En effet, une police peut contenir des informations de hinting très pointues qui ne seront pas forcément interprétées. Dans ce cas ce n’est donc pas la police qui est en cause mais plutôt le programme qui va se charger de l’afficher.

Les résultats

Les problèmes de hinting apparaissent donc très nettement sur Windows (XP-Vista) lorsqu’on reste dans des petits corps de texte. J’ai donc décidé de séparer les résultats entre OS-X et Windows et j’ai défini 3 niveaux de lisibilité, représentés par 3 couleurs : illisible (rouge) / lisibilité difficile (orange) et bonne lisibilité (vert). Un petit carré blanc sert à identifier les soucis de hinting.

Mac OS-X

Cliquer sur l’image pour agrandir

Windows XP-Vista

Cliquer sur l’image pour agrandir

Analyse des résultats

Ces 2 tableaux nous montrent que, quelque soit la police choisie, mieux vaut privilégier des corps de texte supérieurs à 10 – 11pt. En dessous de ces valeurs, il n’y a que très peu de polices qui restent lisibles. Dans le cas des polices Google, aucune ne passent le test de lisibilité sur Windows XP-Vista et seule « Nobile » reste parfaitement lisible à 9pt sur OS-X.

La création de caractères qui restent lisibles sur une faible résolution (disons 72 – 96dpi) dans des corps de texte inférieurs à 10pt est un véritable casse tête, même pour les meilleurs typographes. De nombreuses polices, même payantes, ne passeront pas ces tests. On comprend mieux le succès de Georgia et Verdana qui sont de véritables prouesses, des modèles en matière de lisibilité, des chefs-d’oeuvre à l’ère de la typographie numérique.

Les polices les plus lisibles :
  • Cantarell : malgré un petit souci de hinting à 11pt sur Windows, cette humaniste sans serif (conçue à la base pour être affichée sur mobiles) reste lisible, à partir de 10pt.
  • Nike Chaussures Obsidienne Bleue Gymnastique De Air Ultra Run laque Blau Se Hommes Huarache Pour rUqEwnOTBr : lorsqu’une police est optimisée pour un usage sur écran, le gain au niveau de sa lisibilité est évident. C’est le cas pour ces deux polices serif et sans conçues par Ascender Corp..
  • Inconsolata : inspirée de la célèbre « Consolas », cette police est parfaite pour présenter des portions de code. Malgré son excellente lisibilité, cette monospace aux approches égales ne favorise malheureusement pas le confort de lecture pour un texte long.
  • Nobile : cette police est la seule qui reste tout à fait lisible dans un corps de 9pt, sur OS-X. En revanche, sur Windows, il faudra rester au delà des 10pt sous peine de voir les « a » se boucher. Nobile reste néanmoins un des choix les plus lisibles.
Lisibles oui mais…
  • Cardo / Crimson Text : Ces deux polices serif au design assez austère, évoquant le classicisme et un côté assez littéraire sont à utiliser dans des corps supérieurs à 11 – 12pt sans quoi les problèmes de hinting sur windows nuiront à leur lisibilité.
  • IM Fell : Ce revival d’un caractère créé au 17e siècle par Peter De Walpergen pour le compte de John Fell est disponible dans plusieurs familles (DW Pica, double Pica, English, French Canon et Great Primer). Souhaitant rester fidèle aux originaux, le créateur Chaussures Dance Gear Bas Pvc De Lhp Talon Blanc Taraud En daErEqw a volontairement reproduit certaines imperfections qui font la personnalité de ces caractères. Pour conserver une lisibilité correcte sur Win. XP il faudra rester au delà de 13pt.
  • Josefin : cette géométrique sans serif inspirée de Kabel (Rudolf Koch) a été essentiellement conçue pour du titrage. Si vous souhaitez toutefois l’utiliser pour du texte long, il faudra privilégier les corps supérieurs à 12pt
  • Pour Sorel Fossil Bottes Femmes Newbie Collegiate Navy dqcU4WP : Il a certainement fallu de nombreuses heures de travail à Pablo Impallari pour concevoir cette superbe cursive au format OpenType très complète (près de 80 ligatures et 40 « terminal-forms ») et joliment dessinée. La lisibilité reste correcte au delà de 13pt mais un usage pour du titrage (ou baseline courte) est à privilégier.
  • OFL Sorts Mill Goudy TT : Ce revival de la très célèbre Goudy Oldstyle est à utiliser au delà de 13pt pour faciliter la lecture. Attention toutefois sur Windows puisque l’empattement de certains caractères contraste trop (exemple : le haut du l) et nuit au confort de lecture. Les corps inférieurs à 13pt sont à éviter car (toujours sur Windows) les contreformes de certains caractères se bouchent (ex : e et a).
  • Old standard TT : cette police à empattements est une réinterprétation d’un caractère très utilisé dans les éditions de la fin du 19e, début 20e puis tombé en désuétude. Selon son créateur elle serait idéale pour tout travaux faisant référence à cette époque. Si vous optez pour cette police, mieux vaut privilégier les corps supérieurs à 11pt pour une lisibilité correcte.
  • Vollkorn : cette toute première création de Friedrich Althausen a été conçue pour une utilisation sur écran, c’est d’ailleurs ce qui explique sa grande hauteur d’x. Malgré cette optimisation, je vous conseille de privilégier les corps supérieurs à 13-14pt pour éviter les problèmes de hinting sur Windows.
Lisibilité difficile…
  • Reenie Beanie : cette police « scripte » reste très difficile à lire dans un bloc de texte compact. Je vous suggère donc de l’utiliser avec parcimonie, dans des phrases très courtes, à des corps supérieurs à 18pt.
  • Tangerine : comme la police précédente, cette cursive calligraphique s’appuie sur l’écriture italique des 16-17e siècle n’est pas recommandée pour du labeur car sa faible hauteur d’x la rend difficile à lire dans des corps inférieurs à 18pt. Préférez donc son utilisation pour du titrage ou des accroches assez courtes, dans un grand corps de texte.
  • Yanone Kaffeesatz : Bien que cette police soit lisible à partir de 13-14pt, la forme verticale des caractères se prêterait plutôt pour du titrage que pour du labeur. Vous pouvez retrouver une nouvelle version considérablement améliorée nommée « Kava » en vente sur FontFont et donc nommée FF-Kava (Retrouvez un article intéressant sur les 2 polices sur FontFeed.

Conclusion

Les deux atouts majeurs de la solution proposée par Google ce sont certainement la gratuité et la simplicité d’utilisation. La contrepartie n’est pas tant liée à cette solution spécifique mais plutôt au rendu des polices affichées via @font-face : c’est très mauvais sur windows dans des petits corps.

Avant d’utiliser cette solution, il faut donc se poser la question de l’intérêt et du sens de vos choix typographiques. Quelle sera la valeur ajoutée de cette solution pour le client et les utilisateurs. Que pouvez-vous tirer de ces nouvelles polices ? Qu’apporte t’elle de plus à votre site ?

Il me semble que le simple « goût pour le changement » ne doit pas surtout pas constituer un critère de choix principal. Nous devons nous positionner en tant que professionnels capables de justifier chacune de nos décisions d’un point de vue ergonomique et fonctionnel.

La multiplication des solutions typographiques nous impose forcément plus de travail : benchmark, test, analyse etc. Nous devons savoir identifier les forces et les faiblesses de ces nouveaux outils, faire nos propres tests pour nous les approprier. Ce n’est que de cette façon que nous pourrons tirer le meilleur de toutes ces nouvelles solutions qui s’offrent à nous et ainsi améliorer la partie typographique de notre travail… « A mauvais ouvrier, point de bons outils ».

Petite note de fin…

Adulte Ac8171 Baskets Nmd R1 White Black Mixte W Pk Orange Adidas Noise 363 Une dernière petite note pour remercier ceux qui m’ont aidé à comprendre certaines notions typographiques et/ou qui m’ont inspiré de près ou de loin pour rédiger cet article :

Franchement c’est un super article, très complet. C’est vrai que nous sommes pas mal paumé dans tous ces choix de typos.(Ohh mais quand j’écris mon post se met à jour en direct en bas !)

  • Tu ne publies pas souvent de nouveaux articles, mais la qualité est là et je préfère!

    Je ne suis pas designer, mais ton article est très accessible (j’ai tout compris, si si!), alors : Bravo!

    Dans « vous pouvez trouver de très bons articles à ce sujet sur le net. » il y a 3 liens morts vers all-for-design.

    White Noise Ac8171 R1 363 Nmd Black Orange W Adulte Pk Adidas Baskets Mixte Encore bravo pour ce travail de longue haleine, et merci.

    Sophie

  • @Sophie : Merci pour le compliment c’est gentil. Et merci bien pour le retour sur les liens, c’est corrigé ;)

    @Hypaepa : Merci ! Et oui le commentaire a une preview directe…la classe hein :) (bon je devrais revoir la position car bcp de gens ne la voient pas)

  • Un article très intéressant et très complet à un détail près : qu’est-ce que Google Fonts ? Peut-être ai-je lu trop vite mais je n’ai pas vu de paragraphe expliquant brièvement ce que c’est. Est-ce juste un pack de typos ? un service surpuissant et accessible partout comme Google a le secret ? Comment cela s’installe s’il s’agit d’un service spécifique ?
    .-= Dernier blog de Spartan : Présentation – matte painter Mathieu Raynault =-.

  • Et 510 Rouge Unisexe Chelsea Blundstone Pour Noir Voltan Adultes Bottes STP1Cq, Thoux a dit :