• A la une
  • Catégories
  • Dossiers
  • +

Changez le visage de votre code avec ces fonts optimisées pour le développement et l'intégration

par Benjamin SANCHEZle 24/05/2016

Aujourd'hui, la BlogDuWebdesign voit proposer de découvrir une série de police d'écriture monospace pour personnaliser votre éditeur de texte et vous aider à mieux représenter votre code.

Monospace ? Quésaco ?

Je ne vous apprends rien si je vous dis que les polices d'écritures sont réunies en grandes familles en fonction de leurs caractéristiques. 

Les Serif par exemple ont des empattements, alors que les sans serif n'en ont pas (logique). Les cursives réunissent les polices d'écritures imitant l'écriture manuscrite, et la famille qui nous intéresse aujourd'hui (Monospace, pour les deux du fond qui ne suivent pas) est caractérisée par une largeur de lettre (ou chasse) identique pour toutes les lettres, du "i" au "w" en passant par l'espace " ".

L'appartenance à cette famille est une caractéristique extrêmement importante pour le travail de développeur et intégrateur, car cette fixité permet un alignement des colonnes dans son éditeur de texte, et donc une phase de debug plus simple et une meilleure vision des indentations.

Si vous êtes développeur ou intégrateur (même partiellement) et que cette section vous as appris quelque chose, regardez vite quelle est la police d'écriture configurée dans votre éditeur. Si elle n'est pas monospace, il est temps de télécharger et d'essayer une des polices présente dans cet article !

Hack

J'avais déjà présenté cette ressource lors de mon dernier article, et c'est bien avec elle que j'ai développée sur toutes mes machines ces 9 derniers mois. Verdict : Hack est une police très agréable à l'oeil, aux caractères très reconnaissables même en petite taille (jusqu'à 7, après c'est tout de même vraiment petit).

Si vous avez fait le choix d'un écran de très grande taille et très haute résolution plutôt que du multi écran, cette police peut être un bon point de départ pour votre console et votre éditeur.

Fantasque Sans Mono

Contrairement à ce que son nom peut laisser penser, cette police n'est pas si fantasque que ça ! Son côté rond la rend un peu plus sympathique que beaucoup d'autres poilces monospace, mais l'accent reste mis sur la lisibilité et la réduction du nombre de distractions sur les lettres. Elle me fait personnellement beaucoup penser à consolas.
Cette police possède tous les caractères latins mais aussi cyrilliques et grecs (pratique pour commenter dans une langue étrangère par exemple)

Source code pro

Je pense que cette font n'est pas une découverte pour la majeure partie d'entre vous, mais je ne pouvais pas ne pas la présenter dans cette liste. Ni récente ni originale, cette création d'Adobe n'est tout de même une des polices d'écriture monospaces les plus agréables et neutres possibles.

Un excellent choix par défaut.

Mononoki

Mononoki sera ma police d'écriture sur les 9-12 mois à venir. Claire et lisible même en toutes petites tailles, elle passe à merveille sur console. Rendez-vous dans quelques mois pour un avis plus détaillé après son utilisation un peu plus longue !

Tamzen

Iosevka

Des fonts qui proposent des ligatures prévues pour le développement

Les ligatures typographiques sont des combinaisons de lettres, comme par exemple le œ de cœur. Il en existe bien entendu d'autres, en lettres ou ponctuation (les points de suspension … par exemple).

Ces ligatures peuvent être utilisée en développement aussi avec une des deux typos suivante, en réunissant nos nombreux caractères doubles.

Je ne suis pas un grand fan de cette technique, car elle reste complexe à mettre en place dans une console et qu'elle demande l'installation de paquets sur ses différents serveurs si vous travaillez fréquemment avec SSH.

Fira Code

Hasklig

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir