Google fonts : tests de lisibilité

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, Fonts.com, 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)

Google font list

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). (VirtualBox 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.

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é.

Google font tester

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

Molengo rendering Mac Win

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

Google font legibility on Mac

Windows XP-Vista

Cliquer sur l’image pour agrandir

Google font legibility on Win XP - Vista

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.
  • Droid Sans et Droid Serif : 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 Igino Marini 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
  • Lobster : 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…

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 :

36 réflexions au sujet de « Google fonts : tests de lisibilité »

  1. 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 !)

  2. 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.

    Encore bravo pour ce travail de longue haleine, et merci.

    Sophie

  3. @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)

  4. 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 =-.

  5. @Spartan : je pensais qu’avec la communication faite sur le net et les réseaux sociaux autour de cet événement, tout le monde était au courant. Visiblement non, et j’aurais du rappeler le contexte tu as tout à fait raison.

    Je ferai surement un petit update demain pour palier à ce souci.

    Pour faire simple : Google a mis en place une solution qui te permet d’inclure des polices supplémentaires dans tes pages web. Il y a une vingtaine de polices, tu les ajoutes via un JS et un peu de CSS, les polices sont hébergées chez Google, tu ne les ajoute pas sur ton serveur.

    J’avais comme idée de mettre le focus sur la lisibilité de ces polices mais j’aurais du ajouter des explications supplémentaires sur la solution en elle-même (en plus du simple lien renvoyant sur leur page web).

    Merci de cette remarque.

    @Thoux : Merci pour le RT ;)

  6. Merci pour ce très bon article. Il est rare de voir le sujet abordé de manière si profonde et si aboutie. Bravo et encore merci.

  7. Excellent et précieux article !

    Un GROS merci d’avoir fait ce travail de fourmi, je pense même accrocher ce joli récapitulatif pdf à un mur du bureau.

    À noter que même les polices « web-safe » (ou approchantes) n’échappent pas à ces différences d’affichage. Jusqu’à @font-face, personne ne semblait (trop) s’en soucier.

    C’est avec le buzz Typekit que ces histoires de hinting sont apparues sur les blogs, et c’est tant mieux. Parce qu’un certain nombre de fonderies sont en train de retravailler le hinting de leurs polices, voire de les recréer pour l’écran. 2010 aura été l’année de la typographie sur le web, oui. Mais ce point illustre une fois de plus qu’elle sera aussi un sacré catalyseur.

    Plus que jamais, il faut apporter le plus grand soin à la hiérarchie de ses font-stacks CSS. Souvent, les web designers classent les polices par ordre de préférence, alors qu’il est tout aussi impératif de tenir compte de ces différences de rendu. Oui, je préfère Helvetica à Arial. Mais non, je ne la place pas avant dans un font-stack, parce que son rendu sur IE/PC est inacceptable, et ainsi de suite…

    NB : Merci pour la mention, c’est réciproque !

    NB 2 : Sur ton pdf, mettre le nom des polices concernées dans la police concernée, ça aurait été moins joli, mais peut-être encore plus parlant ;)
    .-= Dernier blog de borisforconi : Polices de caractères sur le web – un an après- où en sommes-nous =-.

  8. Article fort intéressant et tests poussés avec un beau récap, parfait.
    Cependant en webdesign on évitera les mesure en pt et px pour privilégier les mesures en em, rendant les polices re-dimensionnables à la volée par le client (dans un soucis d’accessibilité), dommage donc que les tableaux ne soient pas en em, plutôt qu’en pt.
    Personnellement j’utilise les px et les em, tout dépend l’usage, mais les pt c’est + pour le print non ?

  9. Bonjour, et merci pour cet article documenté.
    Les choses évolues vite. Il y a seulement 1 an, tout le monde disait que @font-face était une impasse sans l’engagement des fonderies. Aujourd’hui, ces mêmes fonderies développent parfois leur propres systeme de remplacement propriétaire…

    Sinon n’oubliez pas de prêter une attention toute particulière à la manière dont les services de remplacement de fontes gèrent ou permettent de gérer les droits d’auteurs des typographes ou des fonderies. Certains de ces services utilisent des fontes open source, d’autres pas. Certains permettent l’utilisation de toutes les fontes, d’autres seulement une liste de fontes déterminées.
    .-= Dernier blog de Laurent DEMONTIERS : Et si graphistes et intégrateurs travaillaient enfin ensembles =-.

  10. Excellent article une fois de plus !

    Il ne manque à mon avis qu’une intro à Google Font, comme déjà signalé, et surtout une superposition des deux tableaux pour offrir une synthèse, en gardant la moins bonne note à chaque fois. On fait rarement des sites à destination d’un unique OS, et on ne va pas envoyer des fontes différentes selon le client…
    .-= Dernier blog de Nicolas Hoizey : Liens Maxing out Your Triangle =-.

  11. @borisforconi : merci pour toutes ces précisions et bien vu pour la comparaison Arial Helvetica c’est très parlant. Je n’ai pas compris ton nb2 ?! Peux-tu me re-expliquer rapidement ?

    @LaFabrik : comme tu l’as précisé, les valeurs en « em » sont des valeurs relatives et je préférais avoir des valeurs fixes pour que la base soit la même pour tous. J’aurais pu mettre 0.9 / 1 / 1.1em etc. mais j’aurais alors du spécifier la taille de corps m’ayant servit de base. Avoir des valeurs fixes me semblait peut-être plus « facile » à comprendre pour tout le monde (sans compter que les em restent encore une unité assez floue pour certains). Sur le fond tu as entièrement raison, j’ai juste souhaité simplifier la forme. Merci pour ta remarque.

    @Laurent : je vois d’un bon œil tout cet engouement pour le travail typographique au sens large sur le web, je suis impatient de voir comment cela va évoluer tant au niveau des fonderies, des webdesigner qu’au niveau des usagers. La gestion des licences devient une problématique centrale c’est clair. Sur ce point Typekit semble avoir trouvé un modèle qui convient plutôt bien à tout le monde on dirait non ?

    @Nicolas Hoizey : deux tableaux en un eh eh… très juste. Surement un peu plus dense du coup mais oui… Cela dit, si tu garde la moins bonne note à chaque fois cela reviendrait à utiliser le tableau lié à Windows (OS-X est systématiquement supérieur en qualité).

    @STPo : salut m’sieur merci ;)

    @Spartan : je voudrais effectivement m’orienter sur des articles de fond… Mais vu le temps de travail considérable que demande ce type de billet, la fréquence de parution sera forcément restreinte. Dernièrement j’ai plusieurs lecteurs qui m’ont fait remarquer qu’il était dommage que je ne publie pas plus souvent. Donc si je continue sur cette lancée, c’est un choix qui ne plaira pas à tout le monde je pense. A voir…

  12. Et oui, pour l’Arial/Helvetica, c’est pour ça que la plupart des web designers utilisent plutôt « Helvetica Neue » dans leurs font-stacks, car son hinting est bien meilleur. L’occasion, pour une fois, de saluer Microsoft, qui a toujours porté beaucoup d’attention au rendu de ces polices à l’écran.

    Pour entrer dans le débat em/px/pt, je suis d’accord avec ton choix, il fallait une référence d’échelle solide. Ce qui n’empêche (surtout pas) d’utiliser des em dans ses feuilles de styles.

    Pour le nb2, une imagevaut mieux que de longs discours….
    .-= Dernier blog de borisforconi : Polices de caractères sur le web – un an après- où en sommes-nous =-.

  13. Merci pour cet excellent article, complet et pertinent. Ce PDF me servira de référence pour mes prochains choix de typo web.
    Un autre paramètre dans le choix des typos pourrait aussi être la comparaison du poids des fichiers fontes. Ok, on est à l’heure du haut débit, mais on dépasse facilement 1 Mo pour une fonte en 4 variations (normal, bol, italic, bold italic).

  14. Merci pour cet analyse, ca donne un grand coup de main. et surtout que ca facilite la négociation avec le client lors qu’il veut absolument une fonte comme Tangerine.
    Parce qu’il trouve ca beau… mais que personne ne pourra le lire

  15. Comme d’hab, du super bon boulot. Comme dit plus haut, j’aurais préféré des px à des pt mais bon c’est un detail. Perso je me demande si font-face est dejà bien mature. Des fois, j’hesite a utiliser Cufon ou à rester dans les safe fonts…
    .-= Dernier blog de Francis : Le wdfriday- c’est parti !! =-.

  16. Article très interessant, même si j’ai déjà eu l’occasion de me faire une idée des google font.
    Le tableau est bien utile, merci beaucoup, et bravo pour le courage ^^

  17. Excellent article en effet, dans le cadre d’un projet récent j’ai été amené a faire le même genre de test à bien moindre échelle, je ne sais pas si tu te rend compte que ton boulot monstre vas aider pas mal de professionnels au jour le jour !
    Sur ce je te remercie chaleureusement de ton travail !

  18. Je suis de mon côté vachement emmerdé là. Je voulais utiliser Lobster pour le site d’un client mais une fois la typo intégrée au CSS, je me rends compte qu’elle est vraiment dégueulasse (sur Windows testé sur FF et Chrome, les autres je n’ai même pas essayé…). Pourtant je l’utilise pour des titres en police 26… du coup je risque de devoir me taper chaque titre en background-image.

    Bref, grosse déception sur ce point là. Je souhaitais en faire partager certains car comme tu le dis, le rendu semble tout de même très mauvais, comme beaucoup de custom fonts d’ailleurs.
    .-= Dernier blog de Spartan : Présentation – artiste digital Diftype aka Niklas Lundberg =-.

  19. Merci à tous pour vos encouragements, critiques, liens c’est super sympa :)
    @Spartan ouaip c’est mon souci également… Trouver une police qui s’affiche correctement sur tous les OS / browsers est un vrai travail, long et fastidieux.
    Mais je reste convaincu qu’il y en a ! Lorsque je regarde le blog de Brian Hoff, je me dit que c’est possible :)

  20. @Spartan : alors, pour ma part, dans cet article j’ai orienté mes tests sur la lisibilité et non sur l’aspect esthétique. Ce qui veut dire que ce n’est pas parceque je les ai noté comme étant lisible (couleur verte) que les polices présenteront un aspect esthétique.
    Ex : Sur Win XP, de nombreuses polices affichées via @font-face présenteront des contours pixelisés, très loin d’être esthétiques et ce, même à des corps très grands (donc tout à fait « lisible »).

    Pour être tout à fait franc j’éprouve le plus grand mal à trouver des caractères hors de la liste web-safe dont le rendu est correct quel que soit les OS-Browsers. Pour en avoir testé pas mal sur Typekit récemment (avec Francis Chouquet) j’ai été assez déçu et je me suis rendu compte de l’ampleur du travail pour « trouver » ZE caractère qui va coller au contexte d’utilisation ET dont le rendu sera correct sur tous les OS-Browsers.

  21. Oui Aure, ma critique n’était pas en relation direct avec tes tests de lisibilité ne t’en fais pas !
    Je ne mélange pas tout et je parlais en effet bien de l’aspect esthétique rendu par les navigateurs.

    Et justement j’en ai aussi parlé sur Twitter dernièrement avec entre autre Fran6 pour conclure que Cufon, c’est bien. :p
    .-= Dernier blog de Spartan : Vidéo – Sintel- une magnifique épopée en 3D open source =-.

  22. Ping : Graphisme, le blog » Georgia, Arial, Verdana… les alternatives Web

  23. Ping : Por que usar as políticas do Google? | Blog Marcos Web Master

  24. Ping : Pourquoi utiliser les polices Google ? | WebdesignerTrends - Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels

  25. Ping : Google Web Fonts sur votre site | Création de site internet à perpignan (66) – Lab' Au Gramme

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>