Remplacer le serif par du sans-serif

Bonjour,

Ce débat a déjà fait couler beaucoup d’encre. Mais c’était il y a longtemps, il y a des années. Depuis, les temps ont changés et je pense que c’est pertinent de le relancer.

À mon avis, il y a trop de polices différentes sur Zeste de Savoir. On y trouve :

• La police du logo ;

• Merriweather (la police serif des publications) ;

• Source Sans Pro (la police sans-serif du forum et du reste site) ;

• La police monospace du code et de l’éditeur (ça peut sembler être un petit détail mais quand-même, faut en tenir compte, il y a beaucoup de publications techniques ici).

Et bien que je ne sois absolument pas graphiste et que je n’ai rien contre les polices serif en soi, j’ai toujours trouvé Merriweather un peu étrange dans le cadre de ZdS. Le logo, la mascotte et la charte graphique du site font vraiment jeune et joueur, pourquoi utiliser quelque chose d’aussi classique que Merriweather ? De plus, elle est complètement absente des forums. Je trouve un peu bizarre le fait de différencier le style des forums du style des publications comme ça.

Et quand je regarde les autres sites web que j’ai l’habitude de visiter, ils ont tous pour la plupart deux ou trois polices, pas plus. Si on ne compte pas le logo, on en a également deux ou trois, mais je pense que le joli logo est suffisament particulier et mis en avant pour qu’on le compte un peu comme une sorte de demi-pseudo-police.

Je propose donc de remplacer Merriweather (la police serif des publications) par Source Sans Pro (la police sans-serif du forum et du site). Si vous le désirez, je peux mettre en ligne une espèce de bêta de ZdS pour vous montrer ce que ça donnerait.

Ah, et plus techniquement, enlever une police de ZdS pourrait même faire gagner quelques dizaines de Kio à télécharger sur certaines pages, donc rendre le site un (tout) petit chouilla plus rapide.

Bref, c’est un truc qui me dérange pas mal depuis le début sur ZdS et j’ai toujours trouvé que ZdS a l’air un peu étrange à cause de ça

Qu’en pense-vous ? (Merci !)

Je crois que j’avais déjà soulevé le sujet à une époque : les polices serif sont réputées pour être mauvaises pour la lecture sur écran (mais l’inverse sur papier), notamment à cause des faibles résolutions (ça devient moins vrai sur écrans retina).

Qu’on garde du serif pour les titre, pourquoi pas, ça peut donner un style, mais pour tout le texte c’est vite lourd.

J’approuve également que gagner pas loin de 13 Ko c’est pas un mal (même si pas une priorité).

Tant qu’on est sur le sujet, est-ce qu’on ne pourrait pas aussi garder une taille de texte de base à 16px/1rem plutôt que 14px/1.4rem (équivalence qui n’a d’ailleurs aucun sens) ?

C’est surtout une légende urbaine. En fait, le choix de la police par défaut des contenus de Zeste de Savoir a été étudié, vous pouvez trouver l’explication et les justifications dans ce ticket – qui fait malheureusement référence à un topic qui a disparu. On y trouve entre autres une source sur cette légende de mauvaise lisibilité.

D’autre part, les polices sont en cache (avec une durée très longue), le gain en téléchargement est parfaitement négligeable.

Le problème est que Source Sans Pro est beaucoup moins lisible que Merriweather sur de longs textes. Surtout si on la passe à une taille aussi petite que sur les forums.

Je ne sais pas ce que ça veut dire d’un point de vue technique. Par contre en terme de rendus, le but était d’avoir des lignes d’environ 100-120 caractères sur les contenus, et ça ne devrait pas changer. Là encore pour des raisons de visibilité.

Tant qu’on est sur le sujet, est-ce qu’on ne pourrait pas aussi garder une taille de texte de base à 16px/1rem plutôt que 14px/1.4rem (équivalence qui n’a d’ailleurs aucun sens) ?

Si tu parles de faire en sorte que 1rem soit égal à la taille de la police de base du document (actuellement c’est pas le cas et c’est très étrange), oui, je suis complètement pour, mais c’est plus un problème de refactorisation du CSS que de style à mon avis. C’est pas quelque chose que l’utilisateur verra en soi (enfin, si on retape au passage les tailles de police, ça va se voir, mais c’est un autre sujet à mon avis).

Concernant le 16px vs. 14px, je sais pas. Ça m’est un peu égal personellement. Mais pourquoi pas.

Le problème est que Source Sans Pro est beaucoup moins lisible que Merriweather sur de longs textes. Surtout si on la passe à une taille aussi petite que sur les forums.

Hmmm j’ai pas de sources mais ça me surprendrais, Source Sans Pro ne me dérange absolument pas personnellement (et je ne veut pas spécialement changer la taille de la police). En fait, je ne vois pas comment une police peut être plus lisible sur de longs textes que sur des petits texte (si c’est ça ce que tu veut dire).

Par contre en terme de rendus, le but était d’avoir des lignes d’environ 100-120 caractères sur les contenus, et ça ne devrait pas changer.

+1, et encore, 100~120 caractères par lignes je trouve que c’est trop. Je préfère un peu moins genre 80 caractères par ligne. Mais bon.

Je seconde SpaceFox. La police des forums, Source Sans Pro, est bien… pour les forums, et ses textes relativement courts (encore que ça pourrait limite être améliorable). Mais un contenu, avec du texte souvent au kilomètre, doit être lisible, et ce point devrait passer avant tous les autres.

Je trouve — et je ne suis pas le seul — que Merriweather est bien plus lisible que Source Sans Pro, en particulier sur de longs textes. Le confort de lecture est bien plus grand. D’ailleurs, à titre personnel, je préfère de loin les blogs et autres sites web utilisant des polices similaire.

Cela dit je pense que la taille de la police joue aussi. Mais je reste à préférer les polices serif.

En fait, je ne vois pas comment une police peut être plus lisible sur de longs textes que sur des petits texte (si c’est ça ce que tu veut dire).

Ça peut être le cas si la police implique une fatigue de lecture au bout d’un moment, précisément si elle n’est pas idéalement lisible. Pour des courts textes, ou des textes séparés avec “pause, ça va, la fatigue de lecture ne se ressent pas trop ; cela dit, pour des textes plus longs, l’effet s’accumule et le contenu en devient désagréable à lire.

Ceci étant, disclamer : je n’ai pas fait d’étude rigoureuse sur le sujet, ce que je raconte ne se base que sur mon impression et l’impression d’un échantillon assez empirique de connaissances plus ou moins proches sur le sujet.

C’est un avis purement subjectif. J’ai beaucoup de mal à lire de longs posts, mais aucun à lire de longs contenus – le tout sur ZdS. Peut-être que la taille joue plus que la police, mais en l’état on ne peut pas faire un remplacement bête de la police telle qu’elle est affichée dans les contenus par celle telle qu’elle est affichée dans les forums.

On a essayé mais on s’est heurtés à des contraintes de design : 80 caractères par ligne, ça faisait soit une police gigantesque, soit une colonne de contenu super étroite.

C’est pas qu’une légende urbaine. Sur de bons écrans oui car on obtient un rendu lisse proche du papier auquel notre œil est habitué.

Sur des écrans à faible résolution (en gros, quand on voit les pixels assez facilement) ça peut vite poser des problèmes car ça rend chaque lettre plus compliquée à lire. C’est sans doute même pire pour les dyslexiques (à confirmer).

Je dirais que c’est à rapprocher des études sorties au moment ou iOS sortait ses icône outline : plus il y a de distance à parcourir pour faire le tour complet d’un objet (icône, lettre…), plus il sera complexe à assimiler.

Le cache n’est pas une excuse : on ne peut pas garantir qu’il fonctionne toujours (il est facilement dégagé par le navigateur ou l’utilisateur) et le premier téléchargement est le plus décisif pour un nouveau visiteur (même si, encore une fois, 13 Ko c’est pas énorme, mais quand même). Autant faire en sorte que tout charge plus rapidement quoi qu’il arrive.

Pour le remplacement, je ne propose rien, je n’ai pas testé autre chose.

Pour le coup des tailles, en gros :

1. En forçant des pixels vous empêchez certains utilisateurs de régler leur police comme ils le veulent (exit le zoom de texte)
2. L’équivalence 1px = 0.1rem utilisée est fausse, 1rem correspondant à la taille du texte à la racine du document, soit ici 14px (vu que vous l’avez forcé).
3. Calculer un nombre de caractères sur un ligne ça peut passer sur papier, mais sur écran autant laisser le choix à l’utilisateur.

Perso ma taille de base est à 16px (et c’est pareil pour beaucoup de gens vu que c’est le réglage par défaut de pas mal de navigateurs).

Que le texte soit un peu plus petit par endroits pourquoi pas, mais quand je veux lire un texte sans problème, une typo un peu plus grande c’est vraiment confortable (et pourtant je suis — pas encore — trop vieux).

Comme tout le monde ici, je ne me prétends pas expert, mais je partage à la fois mon ressenti personnel et un condensé de mes lectures au cours de ma veille UX/accessibilité habituelle.

Ben même sur le web, quand c’est bien fait ça marche vraiment bien je trouve. Par exemple ce blog, qui est à environ 70 caractères par ligne. Mais bon, c’est pas vraiment le sujet.

1rem correspondant à la taille du texte à la racine du documentforcé).

Notez que actuellement, ça ne correspond pas à la taille de la police “par défaut” sur ZdS (oui, c’est un sacrilège)

Pour info, un exemple de Merriweather à 80 colonnes environ / même taille que ZdS. Le contenu est vraiment étroit – et du coup ça ne colle pas avec le design de ZdS.

J’ai cité un post qui contient des études qui expliquent pourquoi tout ceci a l’air logique, mais en a l’air seulement. Cf ceci et son complément, sans oublier toutes les sources et commentaires.

PS : les dyslexiques forcent souvent l’utilisation de cette police.

Nos pages sont à 1,5 Mo environ au premier accès. Sérieusement, on s’en cogne de 13 Kio sur un premier chargement uniquement, il y a d’autres améliorations bien plus efficaces à imaginer si on veut améliorer nos temps de chargements.

Pour info, un exemple de Merriweather à 80 colonnes environ / même taille que ZdS. Le contenu est vraiment étroit – et du coup ça ne colle pas avec le design de ZdS.

Pour le coup je compte plutôt 70 caractères par ligne. 80 c’est pas énorme, mais sachant qu’il y a de l’espace autour le rendu n’est pas le même que ton blog. Faut voir s’il y a pas un juste milieu…

Je ne prétends pas être expert et j’ai aussi lu des études qui disent tout et son contraire donc il n’y a pas de vérité absolue.

Perso j’ai beaucoup de mal à lire du serif car je trouve que ça alourdit le texte. Je suis largement plus à l’aise avec la typo du forum que celle des contenus.

Ça fait juste 3 fois que je dis que c’est pas une priorité. C’est juste un bonus (non négligeable), donc à prendre en compte dans la décision (même si ça ne justifie pas le changement de lui-même).

Nos pages sont à 1,5 Mo environ au premier accès. Sérieusement, on s’en cogne de 13 Kio sur un premier chargement uniquement, il y a d’autres améliorations bien plus efficaces à imaginer si on veut améliorer nos temps de chargements.

C’est un peu HS, mais il y a des soucis avec la page d’accueil actuelle, il y a des images nettement trop grosses (il faudrait que je signale le problème d’ailleurs). Ah, et MathJax ne sera pas téléchargé prochainement. On devrait facilement pouvoir descendre à environ 500 Kio.

J’ai pas vérifié : c’était calculé pour donner 80 caractères quand j’ai créé le design, mais je sais que Merriweather a été mise à jour depuis.

Pour le reste, si vous en êtes encore à trouver que c’est non négligeable de gratter 13 Kio sur une première connexion en 2017 alors qu’on a l’un des rares sites que je pouvais utiliser dans le métro quand j’étais à Paris, je crois que je vais arrêter ici la discussion.

Juste pour rappel, on gagne aujourd’hui moins de 1 %, et 2,5 % quand la page sera effectivement à 500 kio. Or, à moins de 20 % d’amélioration, l’immense majorité des gens ne se rendent même pas compte de la différence, sauf effet de seuil – règle valable pour tous les benchmarks.

Pour le reste, si vous en êtes encore à trouver que c’est non négligeable de gratter 13 Kio sur une première connexion en 2017 alors qu’on a l’un des rares sites que je pouvais utiliser dans le métro quand j’étais à Paris, je crois que je vais arrêter ici la discussion.

Alors moi, je trouve depuis le début que c’est négligeable honnêtement

Bon par contre, je suis désolé si j’ai un peu TL;DR sur les liens de SpaceFox mais j’ai pas encore vu vraiment pourquoi les serif seraient plus lisible que les sans-serifs.

Après, si vraiment les serif sont les plus lisibles, pourquoi ne pas utiliser Merriweather sur les forums ?

J’ai pas vérifié : c’était calculé pour donner 80 caractères quand j’ai créé le design, mais je sais que Merriweather a été mise à jour depuis.

En fait ça dépend de plusieurs paramètres, y compris de ton navigateur voire de ton OS : une même typo peut être affiché de plusieurs façons suivant le contexte. Du coup ça sert pas à grand chose de fixer ce genre de règle. Autant faire en sorte que les éléments s’adaptent autour du texte, ça évite pas mal de casse-tête.

Pour la 4ème fois : c’est pas la priorité, c’est juste un paramètre parmi d’autres, hein. Faut pas faire un fixette là-dessus, c’est juste que dans toute argumentation c’est bien d’avoir l’ensemble des éléments en tête.

Pourquoi Merriweather et pas une autre serif ?

Bon par contre, je suis désolé si j’ai un peu TL;DR sur les liens de SpaceFox mais j’ai pas encore vu vraiment pourquoi les serif seraient plus lisible que les sans-serifs.

Les liens ne disent pas ça. Ils disent que ça ne change rien, et que du coup on avait pris du serif pour que ça fasse plus sérieux et pour se démarquer de la concurrence.

C’est bien de lire les liens avant de commenter, en fait.

Après, si vraiment les serif sont les plus lisibles, pourquoi ne pas utiliser Merriweather sur les forums ?

Une sombre histoire de rendu « trop bizarre » sur les forums, de mémoire. Comme c’était pas des contenus et donc pas le plus important en terme de lisibilité, on a pas plus creusé que ça et on a gardé un affichage classique des forums.

Du coup ça sert pas à grand chose de fixer ce genre de règle. Autant faire en sorte que les éléments s’adaptent autour du texte, ça évite pas mal de casse-tête.

Il faut bien faire en sorte que la colonne de contenu ait une largeur par défaut si l’écran le permet (sinon les lignes font 15 km de long et ça c’est vraiment illisible). Le design de mon site a été calculé pour que, dans les conditions normales d’utilisation, ça évite de trop dépasser 80 colonnes. C’est tout. Je ne sais pas ce qui a été magouillé sur ZdS, ça c’est la sauce à Alex-D, je pense.

Pourquoi Merriweather et pas une autre serif ?

On était parti sur la police de LaTeX mais le rendu en ligne était moisi, alors on a fait un doodle avec les polices serif qui semblaient avoir une bonne gueule et qui étaient dispo sur Google Font à l’époque.

En fait c’est là qu’on touche à l’un des principes du RWD : les dimensions des éléments sont principalement fixées en fonction de la taille du texte et non l’inverse.

Donc il faudrait déterminer des largeurs pour le contenu en em ou rem plutôt qu’en px.

Sinon il y a la font Roboto ou Noto (ou Open), qui existe en Serif et en Sans. Elle sont généralement recommandé pour le web (et la serif peut du coup servir pour le « papier »).

Je ne comprends pas l’intérêt de se limiter aux Google Fonts. Je veux dire, quitte à charger des polices distantes, autant les héberger. C’est mieux que d’aller les chercher chez Big Brother, ça charge plus vite et ça limite moins le choix.

Concernant les polices CMU qui rendent mal, je suis surpris. J’utilise leur équivalent amélioré (la famille Latin Modern, d’ailleurs même en LaTeX on utilise de plus en plus souvent cette famille, la fameuse lmodern/lm). Et personnellement ça rends très bien (je bloque les polices customs assez souvent, sur une connexion pourrie, la différence est notable).

C’est mieux que d’aller les chercher chez Big Brother, ça charge plus vite

J’en doute. Chez Google, ils ont une infrastructure monstrueuse qu’on n’a pas. Leurs CDNs permettent de télécharger les polices depuis des serveurs géographiquement proches, sans traverser trois fois l’atlantique. Puiser gérer les différents formats (woff, ttf, …), les différents scripts (pas forcément besion de caractères japonais), les différentes styles (italique, gras, …), c’est à la fois compliqué et nécéssaire pour gagner en vitesse.

Google Fonts gère tout ça très bien, et l’intégration de Google Fonts à ZdS est ridiculeusement simple. Pas besoin de commit des blobs binaires avec une license cheloue dans le dépot et de donner du boulot en plus aux sysadmins.

Mais bien sûr, si tu sais mieux faire que Google Fonts, ton aide est la bienvenue

J’ai écris cela en me remémorant une discussion avec le staff d’un autre site qui devrait être un jour refait.

Du coup, les arguments contre Google Fonts que ce staff a pu me redonner sont simplement que ça rends le site dépendant de Google, en plus d’apporter un moyen de pistage supplémentaire.

Effectivement, ça ne charge pas spécialement plus vite. Ce qui permet de charger plus vite, c’est un CSS bien fait qui permet de charger les polices locales en priorité (je ne sais pas comment vous gérez cela actuellement dans le CSS, c’est peut-être déplacé, mais j’ai trouvé ça, je le mets, on sais jamais).

Concernant les différents formats, je ne comprends pas trop. En effet, une fois la police sur le serveur, elle n’est que dans un seul format.

Après, je ne connais pas le fonctionnement du site d’un point de vue CSS, et je ne m’y connais pas assez non plus, pour me permettre de donner des conseils.

Donc je donne surtout mon avis, à savoir que ça m’embête un peu de voir fonts.googleapis.com passer quand je charge une page de Zeste de Savoir. Et que je ne pense pas (mais là, je peux me tromper) que la différence de vitesse soit assez élevée pour qu’on se limite uniquement au fontes proposées par Google Fonts.