CSS et font : pitié, soignez un peu vos webdesign

Cet article a été publié il y a 9 ans 2 jours, il est donc possible qu’il ne soit plus à jour. Les informations proposées sont donc peut-être expirées.

Cet article est à la fois un petit conseil à propos des polices de caractères, et un gros coup de gueule envers ces webdesigners qui oublient le monde dans lequel ils vivent, et donc les gens qui ne sont pas équipés comme eux. Un peu de bon sens ne coûte pourtant pratiquement rien de nos jours, nom de dieu.

J’avoue, j’écris vraiment avec les émotions pour une fois. Histoire de voir ce qu’il en sortira aussi, mais vraiment parce que j’en ai un peu ras la casquette.

En dehors des styles italiques, gras… voir du style même de la police utilisée, on distingue deux « modes » en typographie : Serif, et Sans Serif. La très célèbre « Times New Roman » est une police dite Serif, qu’on traduit en français par empattement, et qui désigne les petites extensions aux extrémités des caractères. Je vous laisse avec l’article Wikipedia pour en savoir plus, parce qu’il explique parfaitement la situation, ou une capture pour les plus feignants :

Le Times New Roman est la police par défaut utilisée par Firefox, et probablement aussi par les autres navigateurs. Ce qui veut dire que lorsque l’on affiche du texte, si l’on a pas spécifiquement défini de police pour les caractères de la page, c’est donc une police « Serif » qui sera utilisée. C’est parfois utilisé à dessein, et certains webdesigners s’en contenteront, spécifiant une police différente pour des cas précis de leur design (d’ailleurs hein, vous lisez le texte avec une police Serif).

Mais le plus souvent, on cherche autre chose, et une de ces premières choses est l’utilisation d’une police dite Sans Serif (regardez à nouveau l’image ou l’article de Wikipedia pour comprendre). Cette forme de police est très prisée sur les sites Web parce qu’elle parait plus moderne, plus informatique. C’était notamment le cas pour les visiteurs qui se souviendront de mon précédent thème (qui posait d’autres problèmes, mais ce n’est pas le sujet).

La plupart du temps (et ça m’est arrivé en 2002 quand j’ai écrit mon premier site), les développeurs utilisent les polices de caractères présentes sur leurs machines, et parmi elles, les très répandues Arial et Helvetica. D’ailleurs, il est très courant de définir plusieurs polices différentes, ainsi les navigateurs chercheront les noms des polices une par une sur la machine, et s’arrêteront à la première disponible et l’utiliseront.

Bien, mais que ce passe-t-il quand aucune de ces polices n’est disponible ? Eh bien, quand les développeurs travaillent avec les pieds, le navigateur doit se démerder seul, et donc repasse sur la police par défaut, qui ne correspond pas du tout à ce que veut faire passer leur design : en effet, visuellement, coller une police Times New Roman dans Twitter fait mal par exemple. Donc les blaireaux qui ne font appel qu’à des polices Windows laisseront derrière un site moche pour toux ceux qui n’auront pas lesdites polices parce qu’ils utilisent autre chose que Windows. Et ils sont courants de nos jours : iPhone et autres Android sont maintenant plus nombreux que nos chers PCs, et moi-même avec mon PC je n’utilise plus Windows mais Manjaro Linux, je n’ai donc pas Arial et compagnie parce que ces polices ne sont pas libres d’utilisation (propriété de Microsoft).

Et pourtant les solutions ne manquent pas pour traiter tous les cas à moindres frais. Déjà, il suffirait d’ajouter simplement un « Sans-Serif » dans la liste des polices pour que l’effet principal recherché passe, et évite de casser un design. ça fait 12 caractères en comptant  la virgule pour séparer les différents noms de police, bordel !

Mieux, on est en 2015, à moins d’être une autruche à encore utiliser IE6, tous les navigateurs aujourd’hui savent profiter de cette magnifique technologie des Webfonts. En clair, il s’agit carrément, à l’image des fichiers PDF, d’embarquer la police de caractères de la même façon que n’importe quelle image pour que le navigateur l’utilise pour dessiner le texte du site. C’est le cas ici d’ailleurs, j’en avais parlé lors de l’utilisation du plugin de Laurent Napias. Et c’est pareil, ça prend pas des plombes à implémenter, si même moi qui suis pas une flèche j’y arrive, des webdesigners professionnels formés et payés pour ça devraient aussi savoir le faire non ?

Et bien non, au lieu de ça, j’utilise Stylish sur mon navigateur pour faire le boulot de ces développeurs « professionnels » et corriger les feuilles de style, un travail qui prend une minute et qui ne coûte pratiquement rien. Moralité j’ai une chiée de styles persos qui normalement n’auraient aucune raison d’être.

Et chez Clubic, ça redéfinit la police à chaque div, attention (c’est toujours Verdana, mais peu importe)

Attention, je rappelle bien que je m’attaque principalement à des sites à priori « professionnels ». Il est évident que le blogueur qui a fait son thème dans son coin avec un niveau proche du mien pourra faire éventuellement la boulette, et si je retrouvais mon premier site de 2002, y’aurait certainement de quoi hurler à la mort, même au regard des technologies de l’époque. Et quand on apprend, c’est normal de faire des erreurs. Mais là, allez pas me dire que le design de Clubic (notamment leur section mag, qui est très récente) a été faite par un débutant, parce que j’y crois pas. Regardez plutôt ce qui se passe quand on est sous Windows :

Firefox et Windows 7 : sans empattement partout.

Et quand on arrive sous Linux sans les polices interdites :

Et donc on se retrouve à utiliser des contournements pour retrouver un style propre. Certes ici ce n’est pas non plus ultra choquant, mais le fait est que dans leurs feuilles de style, les seules polices définies sont des polices Sans Serif, mais ils n’ont même pas pris la peine de rajouter cette simple définition à la fin des polices définies. Et les seules polices indiquées ne se retrouvent pas sur tous les systèmes. Une feignantise impardonnable en 2014 (l’année de parution de ce style). La politesse voudrait qu’on fasse attention à tout le monde, mais ça semble échapper au bon sens manifestement.

Utilisation de Bitstream Vera Sans pour corriger le tir, et voilà !

Et Clubic n’est qu’un exemple, il est loin d’être le seul sur lequel je suis tombé. Pire, et là je regrette de pas avoir conservé l’adresse, parce que c’est une perle (si je la retrouve je vous la colle ici, promis), je suis tombé il n’y a pas si longtemps sur un site qui utilisait une police uniquement présente dans Microsoft Office 2013. Impressionnant de bêtise n’est-ce pas ? Microsoft Office 2013 est présent uniquement sur… Windows. Bien. De nos jours Windows ne représente que moins de la moitié de l’audience Web mondiale, grâce (ou à cause de, c’est selon) aux smartphones. Donc le style est cassé pour la moitié des surfeurs. Et là encore, c’était pas un site de débutant, le mec se disait très au point (et pour pondre un thème sur Drupal, j’imagine que c’est le cas).

NB : c’est pareil avec les polices « à chasse fixe », si Courier New n’est pas présente, il suffit d’ajouter « monospace » à la définition, ça prend pas la place de la Concorde…

Et si je râle, c’est parce que comme on l’a vu, ça prend que dalle à corriger (au moins partiellement, à défaut de pouvoir sélectionner un jeu de polices « passe-partout » ou à utiliser les Webfonts). Il est clair que je n’aurais pas écrit un tel article sur l’horreur de la gestion multi-plateforme pour le JavasScript (JS est une horreur à lui tout seul). Là, ça prend une seconde, et ça tue pas le chien !

Enfin bref, du coup, cette feignantise profonde de la part de professionnels PAYÉS pour normalement éviter ce genre de connerie m’a fait découvrir Stylish, et j’attaque la vidéo de présentation dans les prochains jours si tout va bien (ça va être serré du cul question planning). Et vous allez voir, ce n’est pas simplement un outil pour corriger les saloperies, il permet bien plus de choses 🙂

PS : Juste en passant, voilà la seule définition de police qu’on trouve dans le design du très utile touslesdrivers.com :

Segoe, Trebuchet, Verdana, Arial, que de la police Microsoft, qui suit les nouvelles versions (Segoe est celle qu’utilise actuellement Microsoft). Toutes des « Sans-Serif ». Ce que vous voyez au dessus des devtools de Firefox est le résultat de mes corrections nécessaires, au moyen de la toute récente police Selawik, qu’on peut se procurer dans ce dépôt Github.