Temps de lecture indicatif : 8 minutes.
Le bonheur, c'est simple comme changer de police de caractère principale sur son site.1
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ème2.
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 site3, 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 italic4, 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 Courier5.
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 Linux6, 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 !
- Oui, j'ai des plaisirs simples ! ↩
- On l'oublie trop souvent, mais le verbe « pallier » est transitif. ↩
- J'explique mes choix typographiques dans le billet Refonte de mon portfolio : créa et design ↩
- Bien que, comme Vincent me l'a appris pendant son atelier Paris Web dédié à la micro-typographie, on ne doit pas cumuler deux emphases sur le même mot. ↩
- Cf. la liste des polices monospace, serif et sans serif par défaut dans Mac OS X. ↩
- Cf. Web Safe Fonts Cheat Sheet v.3 ↩
30 octobre 2013
Aucun soucis à la lecture de ton article, pourtant je viens de manger et j'ai le soleil en pleine face.
Cependant, j'avoue que le 'strong' est assez difficile à différencier.
31 octobre 2013
Bonjour Romain,
Merci pour ton retour ! (J'espère que la digestion s'est bien passée ^.^)
Tu aurais moyen de m'envoyer une capture d'écran ? En m'indiquant ton navigateur et ton OS stp :-) D'avance merci !
30 octobre 2013
Bonjour,
Personnellement, je lis vos articles en zoomant légèrement (110%). Pour autant, je n'ai pas de problème de vue. Peut-être une question de confort...
Par contre je suis d'accord avec Rbwebdev : le bold est difficile à distinguer :)
31 octobre 2013
Bonjour MMC&I,
Merci pour votre retour ! Même question qu'à Romain : pourriez-vous m'envoyer une capture d'écran du problème des
strong
par email svp, en m'indiquant votre navigateur et votre OS ?D'avance merci !
31 octobre 2013
...mais sur mobile (gs2 android chrome), votre blog est un régal pour les yeux !
^^
31 octobre 2013
Cool, ça fait plaisir à lire :-)
8 octobre 2014
Bonjour,
Juste un mot pour vous signaler au passage qu'en vous lisant sur mon écran, les lettres surmontées d'accent circonflexe ont tout simplement disparu! (je suis sous Mac OSX et Safari, même chose sur Chrome)
8 octobre 2014
Bonjour PandaGirl,
Merci de me le signaler !
Quelle est votre version de MacOS s'il vous plaît ?