Quelle est la meilleure police pour le développement Web ?

Lorsque l’on passe un nombre d’heures incalculable devant son écran, le choix de la police de son éditeur de texte est d’une importance capitale. Trop souvent, ce choix est négligé par les développeurs débutants qui se contentent de la police par défaut. Sachez que c’est d’une grossière erreur, car la police que vous utilisez a un rôle essentiel pour faciliter la lisibilité, réduire la fatigue oculaire. Éviter que vos yeux ne se mettent à fondre devrait être votre préoccupation principale, ne pensez-vous pas ?

Comprendre les différents types de polices

Loin de moi l’idée de vous donner un cours de typographie, mais je pense qu’il est essentiel de comprendre certaines notions afin de bien appréhender le choix qui s’offre à vous quand vient le moment de sélectionner votre police.

Les polices à chasse fixe (monospaced)

Les polices dites à chasse fixe sont les polices par défaut de tout IDE. Chaque lettre occupe exactement le même espace horizontal. Chaque petite case est également alignée verticalement dans tout le document. Le résultat se présente sous la forme d’une grille de type bataille navale d’une régularité à toute épreuve. C’est ce type de polices qui était employé historiquement sur les machines à écrire et sur les premières presses à imprimer. De même, les premiers ordinateurs utilisaient cette méthode d’affichage des caractères. Comme on peut le voir dans les polices monospaced, le m prend exactement la même place que le i, espace compris. Ce qui peut donner un m à l’aspect compressé et un i à l’aspect écrasé. La taille de la grille ne peut en aucun cas varier en fonction du poids de la police. Autrement dit, une police en gras aura tendance à paraître un peu boudinée. Un peu comme si vous essayez de rentrer dans un pantalon trop serré… L’effet peut aussi être inverse et donner une impression que les caractères sont trop éloignés les uns des autres. Comme ce peut être le cas pour les polices dites légères qui sont plus fines que les versions classiques. Le défi pour les fonderies de polices est de faire en sorte que l’aspect des versions monospaced reste harmonieux et que l’utilisateur ne ressente à aucun moment la contrainte technique de leur création.

Les polices proportionnelles

Les polices proportionnelles, qui peuvent être notamment sans-sérif, sérif ou script, apportent une flexibilité dans la largeur de la grille qui varie en fonction des caractères. Cela permet d’éviter l’aspect compressé des caractères les plus larges. Le rythme de chaque ligne semble plus naturel, un peu comme si vous lisiez un livre. Sauf si ce dernier a été imprimé sur la vieille presse de Gutenberg bien sûr… ! La différence est particulièrement notable encore une fois au niveau des caractères i et  m. Qui sont un peu les deux extrêmes : Les Laurel et Hardi de l’alphabet. Cela permet à chaque lettre de prendre tout l’espace dont elle a besoin.

Comparaison Monospaced et Sans-Serif

Rien de tel qu’une comparaison en image pour bien voir la différence. La police utilisée est : Input Mono et Input Sans-Serif. Je vous laisse comparer par vous-même.

[caption id=“attachment_768” align=“alignnone” width=“1892”] Police Monospaced[/caption]

[caption id=“attachment_767” align=“alignnone” width=“1892”] Police Sans-Serif[/caption]

Si vous n’avez pas identifié de différence, je vais vous aider un peu. Dans la version monospaced, l’ensemble des lignes partagent la même grille. Aussi il y a une certaine cohérence dans le positionnement des caractères du point de vue global. La grille est aussi bien verticale qu’horizontale. Dans la version sans-sérif par contre, il n’y a pas d’harmonie globale. Chaque grille est propre à sa ligne. D’une ligne à l’autre, il n’y a aucun alignement systématique. Ainsi, on voit clairement que les caractères entre les lignes 2 et 3 ne sont pas alignés verticalement. Chaque case de la grille dépend des caractères qui la composent. Mais je dois bien avouer que cet exemple n’est pas le plus évocateur. La police Input permet de limiter la différence. Prenons l’exemple d’une police où la différence est bien plus flagrante. Que sont ces polices ? Operator Mono SSm et Operator SSm. Je pense que vous aurez tôt fait de deviner où se trouve chaque version !

quoi choisir entre ces deux types de polices ?

Je n’ai pas de réponse absolue, cela dépend beaucoup des goûts et des couleurs. Personnellement, je préfère utiliser des polices monospaced car l’aspect général du code me paraît plus harmonieux, plus aéré et facile à lire dans son ensemble. Certains préféreront troquer l’harmonie du code pour une meilleure lisibilité ligne par ligne. Ce qui peut tout à fait se comprendre.

Ma police gratuite favorite : Input de Font Bureau.

Cette typographie est pour moi la meilleure possibilité gratuite qui soit quand il s’agit de lire et écrire du code. Elle a été conçue spécifiquement pour les développeurs. Le résultat est d’une finesse incroyable, particulièrement pour les affichages à haute densité de pixels. Tous les caractères sont extrêmement lisibles ce qui rend le code très agréable à regarder. Il existe 164 styles différents afin que chacun puisse y trouver son compte. Oui, vous avez bien lu : 164 styles. Rendez-vous sur le site et vous comprendrez vite pourquoi. Sur le site de la police, vous pouvez avoir un aperçu en temps réel de ce qu’elle va rendre concrètement avec les paramètres choisis. Vous pourrez alors l’ajuster à votre convenance et en faire une police à votre image.

[caption id=“attachment_761” align=“alignnone” width=“410”] De quoi faire du sur mesure[/caption]

Ce qui me plaît particulièrement dans cette police, c’est la ponctuation et les symboles ont eu le droit à un travail d’une rare qualité. Les symboles sont très lisibles et la ponctuation est deux fois plus grosse que la moyenne. C’est précisément sur ce point que cette police se classe au-dessus du lot et vous montre à quel point chaque détail a été pensé pour prendre soin de nos yeux. La cerise sur le gâteau ? Elle est gratuite pour un usage personnel ! Vous pouvez néanmoins soutenir l’auteur en achetant une licence. Rendez-vous un service et allez l’essayer sans tarder. Vos yeux vous remercieront. http://input.fontbureau.com/preview/?size=14&language=javascript&theme=solarized-dark&family=InputMono&width=400&weight=400&line-height=1.2&a=0&g=0&i=0&l=0&zero=0&asterisk=0&braces=0&preset=default&customize=please

Fira Code pour les fous de ligatures

Voilà une police dont vous avez très certainement entendu parler. C’est une version modifiée de la police Fira Mono développée par Mozilla. Ceux-là mêmes qui développent Firefox. C’est l’une des polices les plus utilisées. Vous vous demandez pourquoi ? Les ligatures. Rien à voir avec une opération chirurgicale rassurez vous. C’est simplement une façon graphique d’afficher les symboles ACSII utilisés très régulièrement dans tout langage de programmation. Petite image pour comprendre.

[caption id=“attachment_766” align=“alignnone” width=“1692”] Les ligatures avec Fira Code[/caption]

Les ligatures changent complètement l’aspect de votre code et cela permet de mettre en valeur certains éléments importants comme les flèches et les opérateurs d’égalité. Il faut un certain temps pour s’y habituer, mais au final le rendu peut être très agréable et permettre de repérer des erreurs d’étourderies. Si vous voulez des ligatures, cette police est faite pour vous !

Operator Mono SSm : le Graal des polices payantes ?

Cette police a été créée par l’une des fonderies les plus réputées. Je peux affirmer sans crainte qu’elle ne laissera personne indifférent. C’est bien simple, soit on l’adore, soit on la déteste. Moi, je l’adore. Vous avez pu avoir un aperçu un peu plus détaillé plus haut. Son style si particulier a fait de nombreux émules chez les développeurs. Il faut reconnaitre que cette police procure un grand confort de lecture, que ce soit en version monospaced ou proportionnelle. Son style est tout bonnement inimitable. Chaque caractère et symbole est défini avec grand soin et la version italique en mode script est magnifique. Cela permettra de mettre en valeur votre code en fonction de vos paramètres de présentation. Tout le monde n’adhère pas à la version italique, car il faut bien avouer que son style est très marqué et il est peu courant de voir une police script dans un IDE. Son seul défaut c’est son prix. C’est ce qui fera fuir même les plus téméraires. Comptez 179$ pour la version mono et 199$ pour la version proportionnelle. Une bagatelle n’est-ce pas ? Ce prix sera vite rentabilisé vu le nombre d’heures que vous passerez à l’utiliser si l’on y réfléchit, mais la facture initiale est très salée. Si cette police vous tente malgré son prix : faites bien attention à acheter la version ScreenSmart (SSm) qui est spécifiquement étudiée pour un affichage sur écran. Rendez-vous sur le site de Hoafler & Co pour en apprendre plus.

Ajouter des ligatures à Operator Mono

Si vous aimez les ligatures, sachez que cette police n’en propose pas par défaut. Triste vu son prix me direz vous ? Cependant, un utilisateur de cette police a créé un moyen simple et efficace pour vous permettre d’ajouter les principales ligatures. Je vous laisse cliquer sur ce lien et suivre les indications du créateur. A noter que vous devez être en possession des fichiers originaux pour mener à bien l’opération et avoir installé Python sur votre machine. Si vous ne l’avez pas déjà, sachez que c’est indolore.

Ajouter des ligatures à toutes les polices

Si la police que vous utilisez n’a pas de ligatures et que vous ne souhaitez pas en changer pour autant alors que vous rêvez secrètement de ligatures toutes les nuits. Sachez que vous pouvez avoir le meilleur des deux mondes. En effet, des petits malins ont créé un outil qui permet de prendre les ligatures de Fira Code et de les implémenter dans toutes les polices. La méthode n’est pas très user-friendly, mais, le résultat est redoutable. Heureusement, la documentation est suffisamment claire pour vous aider à braver l’apparente difficulté. Prévoyez tout de même plus de 1Go d’espace sur votre disque dur. https://github.com/ToxicFrog/Ligaturizer

En conclusion ?

Si votre budget est sans limites, je vous conseille Operator Mono SSm qui vous comblera de joie. Si votre budget est limité, voire inexistant, je ne peux que vous conseiller Input Mono qui est, à mon humble avis, la meilleure police gratuite. Si vous voulez des ligatures, je vous ai donné tous les outils pour que vous puissiez intégrer celles de Fira Code à votre police favorite et un outil plus spécifique pour Operator Mono SSm. Si vous n’aimez pas les polices que je vous ai partagées aujourd’hui, j’en suis navré. Je vous invite à faire un tour du côté de Source Code Pro, Menlo, Monokai, Consola, Dank Mono, etc.