Un invité d’honneur sur Design et Typo… Estève Gili qui commente ici depuis les tous débuts de D&T… et porte aujourd’hui un regard sans complaisance sur la typographie de cette édition «branchée» du site de Libé.
NEXT de Libération.fr une lisibilité bien malmenée, par un contraste trop violent et une mise en page étrange.
_
Dans la foulée d’une nouvelle formule censée re-dynamiser les ventes du célèbre quotidien co-fondé par Serge July et dont Laurent Joffrin a repris les reines depuis peu, Libération se cherche de nouveaux territoires d’expression et de communication sur le web. Next en est une illustration depuis le mois de juin dernier, avec les différents Blogs de journalistes et autres “sous” sites.
Je n’aborderais pas le sujet du contenu de Next Libération mais du contenant. Laissant ce premier à la libre appréciation de chacun.
Ce site n’étant pas signé, je suppose que c’est l’équipe de développement web de Libération qui a oeuvré en créant une charte graphique empreinte de minimalisme et de simplicité. L’association des images avec des titres ayant des masse équivalentes est très dynamique et moderne. La typographie utilisée n’est pas sans nous évoquer le travail de Neville Brody pour le magazine Actuel (Cf le billet de Peter sur Actuel).
Au premier coup d’oeil général on remarque l’inversion du code couleur du site “maître” Libération.fr, le blanc/noir/rouge (en ordre décroissant) devient le noir/blanc/rouge. Code couleur d’une redoutable efficacité est très courant et très utilisé. Donc un fond noir, des textes blancs et des petites touches de rouge par-ci par-là. L’article “Leader” est dans une autre couleur pour mettre l’accent dessus et capter directement le regard du lecteur.
_
La lecture sur fond foncé, sujet abordé par Peter précédemment, est sujette à quelques règles élémentaires. La lecture sur écran est très fatigante pour l’oeil. Cette fatigue à pour origine plusieurs facteurs. Le principal est la gestion du contraste. Un fond noir avec une écriture en blanc est un des pires cas de figure pour l’oeil, il provoque une vibration “éblouissante” qui zèbre la vue et rend “aveuglant” ce site. La taille, la graisse, l’interlignage et l’interletrage sont aussi des facteurs de fatigue visuelles lorsqu’ils sont mal réglés. Donc la lisibilité n’est pas optimisée et nuit donc gravement à la lecture de ce site.
Pour casser ce contraste il serait pourtant simple et même élégant de travailler sur des gris. Un fond gris sombre et un texte en gris très clair seraient beaucoup plus digeste. L’oeil et le cerveau identifient comme noir et blanc les parties les plus sombres et les plus claires d’une surface (subjectivité de l’interprétation mentale) même si elle ne sont pas en Noir 100% ou en blanc pur. Pour dire la même chose en plus simple, en utilisant un gris très foncé on ment à l’oeil et au cerveau, qui décrypte l’information, car instinctivement (quasi réflexe) il analyse cette teinte comme la plus foncée et elle devient le référent du Noir, et même processus pour le gris très clair qu’il interprétera comme le blanc.
L’avantage est qu’en plus d’adoucir le contraste et de rendre digeste la lecture, les photographies sont valorisées car ses dernières contiennent du “vrai” Noir et du “vrai” Blanc et sembleront donc plus lumineux, plus nerveux et plus attirants.
_
Autre facteur de la pénibilité de la lecture sur le site de Next Libération est la gestion des caractères typographiques. Les textes courants sont souvent en Bold avec un interlignage resserré et in interlignage idem. La règle fondamentale veut qu’on ne lise pas le caractère typographique mais l’espace autour. Il serait bon que cette règle soit appliquée, même sur le web grâce aux miraculeuses CSS qui nous permettent des réglages de plus en plus fins sur la typographie. Dans le cas qui nous préoccupe il serait bon d’augmenter l’interlignage, de mettre un pixel d’interletrage et surtout de n’utiliser le Bold qu’avec parcimonie quand c’est nécessaire pour indiquer un mot clé par exemple. Je viens de refaire un tour sur le site et je m’aperçois que le Bold est plus ou moins gommé et le site est déjà beaucoup plus digeste… Et lisible, tant mieux.
Coté mise en page du site, je suis surpris. je me demande si il n’a pas été construit comme un Blog. L’étrange gestion de la verticalité me pousse vers ce choix d’outil. Un rapide tour dans le code me le confirme. Je pense personnellement que c’est une erreur dans le sens ou ce n’est pas le bon outil qui a été utilisé pour créer le site. Car c’est un site et non un Blog. Le principal défaut est cette colonne centrale sans fin et sans intérêt qui se retrouve orpheline après un ou deux clics dans l’ascenseur de la page. On perd les repères de navigation, le menu et ect…
_
Autre maladresse dans la mise en page: comme la typo est fatigante à lire sur son fond noir, l’idée de l’agrandir peut sembler naturelle. Bien mal vous en prendra, car même si le résultat (cf photos jointes) peut être graphique sur la home page, il n’en reste pas moins illisible ;-)
Donc, pour dire les choses comme elle sont, une copie à revoir complètement en terme de lisibilité et de mise en page.
Petite parenthèse sur le “contre journal” autre “sous” blog/site contributif de Libération.fr au nom très évocateur et très motivant. Un contre journal c’est un peu comme un contre-festival, ce dont des dissidents qui le montent. Dans le cas de Libé, il existe déjà un contre-Libé qui est rue89.com. Ce contre journal a pour devise “Les informations ou les débats chassés de l’actualité”. Comprendre “ce que Libé ne vous dit pas, nous vous le disons… Une bien étrange démarche car c’est une confession d’auto-censure qui est la maladie première des journalistes de l’hexagone. Fin de la Parenthèse.
Liens Design et Typo:
https://blog.typogabor.com/2006/10/17/2006_10_typographie_noi/
Figurez-vous que Next et rue89 sont fait par la même personne.
Donc mal documenté.
ps
Le fond du site Next est au choix, noir ou blanc, plutot nouveau comme gimmick…
http://next.liberation.fr/