Ligature : un Procédé Typographique Révolutionnaire pour Coder
La ligature est un procédé typographique très apprécié des développeurs. Mais de quoi s'agit-il exactement ?
5 min
La ligature est un procédé typographique très apprécié des développeurs car il enrichit la manière dont nous percevons le code.
Qu’est-ce que la ligature ?
La ligature est un procédé typographique consistant à combiner deux ou plusieurs caractères en un seul, créant ainsi une fusion harmonieuse entre eux.
Le caractère « esperluette », en est une excellente illustration puisqu’il s’agit en réalité d’une ligature esthétique de la conjonction de coordination « et ». Elle est née de la fusion des lettres E et t pour n’en former plus qu’une : &.
À l’époque de Gutenberg, les imprimeurs utilisaient les ligatures pour économiser de l’espace et améliorer l’esthétique d’un texte, mais si les développeurs se sont rapidement emparés de ce procédé typographique, c’est pour une tout autre raison.
Ligature et programmation
Opérateurs allégés
Les ligatures sont une aubaine en programmation, où de nombreux opérateurs (arithmétiques, comparaison, scope…) sont constitués de plusieurs caractères.
Par exemple, le symbole « non égal » (!=) se transforme en un symbole égal traversé par une barre oblique ≢.
Voici un tableau affichant les principaux opérateurs de programmation avec et sans ligature :
| Caractère | Sans ligature | Avec ligature |
|---|---|---|
| Égal | == | = |
| Identique | === | ≡ |
| Différent | != | ≠ |
| Non identique | !== | ≢ |
| Supérieur ou égal | >= | ≥ |
| Inférieur ou égal | <= | ≤ |
| Double-flèche | => | ⇒ |
| Flèche | -> | → |
Cette représentation permet de visualiser clairement l’impact des ligatures sur la lisibilité et l’esthétique des opérateurs, contribuant ainsi à une expérience de codage plus fluide et agréable.
Notez que cela ne modifie en rien les caractères sous-jacents eux-mêmes, mais uniquement leur aspect, de sorte que cela n’aura aucun impact sur votre code.
3 avantages de la ligature pour coder
Code moins dense
En fusionnant plusieurs caractères en un seul, la ligature réduit le nombre de caractères nécessaires pour écrire du code.
Bref, un IDE moins chargé, que demander de plus ?!
Code plus lisible
Les ligatures contribuent également à améliorer la lisibilité en remplaçant des combinaisons de caractères par des symboles uniques plus esthétiques et faciles à distinguer.
Cela rend la lecture du code plus fluide et permet de repérer plus facilement les expressions et les opérateurs communs.
Réduction de la fatigue oculaire
Vous avez de la fatigue oculaire ou des difficultés à lire votre code après quelques heures de travail acharné ? De nombreux développeurs ajustent la luminosité de leur écran sans vraiment remettre en cause le thème installé ainsi que la typographie utilisée.
En améliorant la lisibilité de certains opérateurs et par extension du code, la ligature est un procédé qui contribue à minimiser la fatigue oculaire et de potentiels maux de tête.
Quelques typographies avec ligature connues
Il existe de nombreuses typographies avec ligatures, bien que certaines d’entre elles se démarquent aujourd’hui, notamment pour coder.
Typographie et Open Source s’accordent généralement plutôt bien, et c’est une bonne nouvelle car de nombreux concepteurs ont publié leurs typographies avec ligature gratuitement, la plupart du temps sur des plateformes comme GitHub.
Parmi les typographies avec ligature connues on retrouve notamment :
FiraCode s’est imposée comme une référence en matière de typographie avec ligature pour le code.
Activer la ligature dans mon IDE
Les IDE ne sont pas toujours livrés avec la meilleure police pour programmer. Généralement, ceux-ci utilisent une police système monospace, et, bien qu’elles puissent convenir à la plupart des développeurs, elles ne font pas toujours l’unanimité.
Bien que la quasi totalité des IDE offrent la possibilité de changer de police en s’aventurant dans les réglages, beaucoup de gens n’en profitent pas.
Car après tout, « ce n’est qu’une typo ». Oui, jusqu’au jour où ils réalisent le gain en confort que cela représente !
Que vous codiez avec Atom, VS Code, Sublime Text, Brackets… il est possible d’activer la ligature en installant la typographie en question, puis en l’activant dans votre IDE.
Voici par exemple la marche à suivre pour activer FiraCode au sein de VS Code (la typo avec ligature la plus répandue dans l’IDE le plus répandu… il y a des chances que ca vous intéresse !) :
- Installer FiraCode sur votre PC
- Activer la ligature en suivant les instructions du repo officiel
Allez, si vous voulez gagnez du temps, je vous donne l’extrait à ajouter/mettre à jour dans votre fichier 📄 settings.json 😉
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
Vous pouvez fermer puis réouvrir VS Code afin de vous assurer que les changements sont bien pris en compte.
La ligature offre aux développeurs un code plus concis et lisible tout en réduisant une possible fatigue occulaire sur de longues sessions de codage. Il serait bête de s’en priver !