Choisir une police à chasse fixe pour le web

Le bonheur, c'est simple comme changer de police de caractère principale sur son site.¹

En effet, depuis la mise en ligne de mon site, fin juin, plusieurs personnes m'avaient fait remarquer que mes textes les plus longs étaient difficiles à lire, en particulier sur mobile.

En testant moi-même sur différents périphériques, j'ai dû me rendre à l'évidence : la police Courier New en police principale n'était pas une si bonne idée, même sur un écran d'ordinateur. Sous Webkit en particulier, cette typo était vraiment trop fine pour garantir un confort de lecture optimal. :idea:

Cela ne m'avait pas choquée plus que ça pendant l'intégration, car d'une part, je ne lisais pas mes propres billets, et, d'autre part, même si je le faisais parfois pour mettre à jour certains contenus, je ne les lisais probablement pas dans les mêmes circonstances que celles des utilisateurs de mon site.

Malgré le soin maniaque méticuleux que j'apporte à chaque projet que j'intègre, il est difficile de prévoir absolument tous les cas d'usage, toutes les configurations, tous les viewports, toutes les habitudes, tous les réglages, toutes les versions de navigateurs utilisés pour afficher un site donné.

Et ce qui est vrai pour l'intégration en général est encore plus délicat en ce qui concerne le rendu typographique sur le web : c'est un véritable casse-tête, au bas mot.

Bref, on ne peut faire que de son mieux et rester à l'écoute des doléances de ses utilisateurs une fois que le site est mis en prod' et qu'il commence à vivre sa vie. Dont acte ! :smile:

« Je m'ai trompé »

Histoire classique : dans Photoshop, la Courier New était correctement lissée, assez en tout cas pour que je l'utilise dans ma CSS.

Mes différents tests multi-navigateurs montraient que la Courier New s'affichait correctement partout, même si elle était plus fine sous Windows. Mais rien qui, selon moi, ne pouvait gêner la lecture de mes articles.

Cela dit, je n'avais jamais pris le temps de lire un de mes longs billets sur un périphérique mobile, en fin de journée, dans un éclairage douteux.

Quand bien même, on n'est jamais le mieux placé pour tester sa propre création web. Le design, ça doit avant tout être utile et utilisable – il faut donc vérifier auprès des utilisateurs si, eux, le trouvent bien utile et réussissent à l'utiliser.

Les retours des lecteurs de mon blog ont donc été très précieux, et m'ont fait comprendre que le choix typographique que j'avais fait n'était pas des plus heureux.

Pourtant, on le sait, que les polices à chasse fixe sont plus difficiles à lire que les polices proportionnelles.

Mais je tenais vraiment à utiliser une police monospace sur mon site, car cela confère un petit charme rétro à ma charte graphique, et renvoie à l'informatique (les extraits de code qu'on partage sur le web le sont généralement avec une police monospace).

L'utilisation d'une police à chasse fixe sur mon site peut également être vu comme un subtil rappel à la grille que j'utilise techniquement et graphiquement sur mon site.

L'idée était donc de supprimer Courier New mais de rester dans la gamme des polices à chasse fixe.

Du monospace sinon rien

Une fois n'est pas coutume, j'ai demandé des avis sur Twitter, pour savoir comment pallier ce problème².

Lorsque je changeais mon font-stack "Courier New", Courier, monospace par monospace, j'obtenais déjà un meilleur résultat, même si, réalisé à la va vite dans Firebug, cela impactait beaucoup les dimensions de mon site :

Cela m'a néanmoins permis de voir qu'une meilleure police à chasse fixe que la Courier New était présente sur Mac OS X.

Monaco et Consolas

Ensuite, Florens m'a donné l'idée de tester avec un font-stack composé des polices Monaco (pour Mac OS X), Consolas (pour Windows) et DejaVu Mono (pour Linux).

J'ai testé les différents font-stacks monospace proposés sur CSS Font Stack, jusqu'à jeter mon dévolu sur le font-stack Monaco.

J'ai ensuite fait une batterie de tests, non seulement sous Mac mais aussi sous Windows XP, en particulier dans Chrome, que l'on sait tatillon avec le rendu des polices.

Avec une font-size de 13px et un line-height de 20px, voilà ce que ça donnait dans Chrome sur Mac OS X :

Sous Windows XP, toujours dans Chrome, c'est Consolas qui s'affiche, sans le lissage propre à Mac OS X :

Outre le fait que l'italique soit vilaine – c'était déjà le cas avec la Courier New –, le problème majeur était dû à Chrome sous Mac OS X, dont le « faux bold » sur Monaco n'était pas distinguable de la version regular :

Voici le même texte mais avec de la Courier, ce qui permet de voir où sont situées les expressions sur lesquelles j'attire l'attention grâce à une balise <strong /> :

Ce problème constaté dans Chrome sous Mac OS X ne se produit pas dans Safari sous Mac OS X ni dans Chrome sous Windows XP. Cela étant dit, il est suffisamment bloquant pour que je n'utilise pas Monaco en police principale, en fin de compte.

Utiliser @font-face partout ?

J'étais bien embêtée. Je n'avais toujours pas trouvé de police alternative à la Courier New pour mon site, et je ne me voyais pas baisser les bras – ce n'est vraiment pas mon genre !

On m'a suggéré d'utiliser @font-face pour trouver la police de mes rêves et ne pas m'enquiquiner avec les polices monospace web safe.

En particulier, les font-stacks monospace suggérés par Matthew Butterick me faisaient saliver.

Le problème, c'est que j'utilise déjà deux polices exotiques avec @font-face sur mon site³, et que je suis très moyennement convaincue par l'utilisation d'une typo @font-face sur tous les textes d'un site.

En effet, cela suppose qu'il faille embarquer non seulement la version regular, mais aussi les versions italic, bold voire même bold italic⁴, en tout cas si on veut faire les choses bien.

Cela risquerait de coûter cher en terme de performances.

Et puis, sur mobile, il me semble impensable d'appeler une typo @font-face sur tous les contenus. Sur mon site, j'ai même décidé de n'appeler aucune des deux polices @font-face que j'utilise par ailleurs sur tablette et sur desktop, par égard pour la bande passante des utilisateur de mon site. En outre, une police monospace web safe convient parfaitement sur mobile.

Courier

Aussi, j'ai voulu savoir quelle est la police système qu'affiche Mac OS X quand on écrit font-family: monospace, puisque les fûts de cette police semblaient plus épais que ceux de la Courier New, rendant la lecture plus facile : c'est tout simplement la Courier⁵.

Dans mon fichier SCSS, j'ai ainsi simplement remplacer le contenu de la variable $courier que j'utilisais dans différentes déclarations font-family de mon site.

Ainsi, j'ai remplacé mon précédent font-stack :

$courier: "Courier New", Courier, monospace;

par :

$courier: Courier, "Lucida Sans Typewriter", "Lucida Typewriter", "DejaVu Sans Mono", monospace;

J'ai abouti à ce font-stack en mélangeant le font-stack Courier New proposé par CSS Font Stack (en supprimant Courier New, donc) et un font-stack monospace bien dense trouvé sur SitePoint.

Je ne sais pas si c'est l'idéal, mais vu que la police Courier est web safe, étant disponible à 98,7% sur Mac, Windows et Linux⁶, cela m'a semblé faire l'affaire. Toutefois, si vous avez des conseils à me donner pour améliorer ce font-stack, n'hésitez pas !

Outre le fait qu'elle soit plus facile à lire, je trouve la Courier plus ronde et plus mignonne que la Courier New.

Qu'en pensez-vous ? Trouvez-vous mon site plus agréable à lire avec ce changement de police ?

Si certains d'entre vous sont sous Linux et peuvent m'envoyer des captures d'écran du rendu, cela me rendrait bien service ! ^.^

Pour finir…

La conclusion de cette histoire, c'est qu'un site web n'est jamais terminé : il est toujours perfectible. J'aime l'idée d'améliorer son site au fur et à mesure : ne pas tout refaire, mais trouver une solution qui ménage le design et le confort d'utilisation.

On a beau faire attention à choisir des polices web safe, à respecter les bonnes pratiques en terme de contrastes, de rapport entre taille de typo et interlignage, de tester le rendu des polices sur différents OS et différents navigateurs, rien n'a autant de valeur que les retours des utilisateurs sur le site final.

Aussi, il faut toujours être à l'écoute des doléances des utilisateurs de son site : ce sont eux qui utilisent votre site au quotidien, ils sont donc les mieux placés pour vous dire ce qui ne fonctionne pas et ce qui les gêne pour consulter vos contenus.

De même, n'hésitez pas vous aussi à vous plaindre auprès des éditeurs de sites dont le contenu est difficile à lire : typo trop fine ou trop grosse, contrastes insuffisants, rendu @font-face abominable… Le web, c'est un travail d'équipe ! :wink: (Et encore, là je ne parle que de typo…)

On sait que les fontes affichées grâce à @font-face nécessitent quelques précautions – mais les polices web safe elles aussi doivent être utilisées à bon escient.

Le web, c'est 95% de typographie.

Merci à Vincent, Florens et Anne-So pour leurs précieux conseils !