Audrey Gheorghe

Audrey Gheorghe — 7 novembre 2017

Hinting : quand la typographie se fait une beauté !

Vous le savez, sur un ordinateur un dessin est composé de pixels, petits carrés qui côte à côte forment une image.

Lorsque l’on souhaite représenter une ligne horizontale ou verticale, pas de problème puisqu’il suffit de suivre l’alignement naturel des pixels. Mais ça se complique lorsque l’on essaye de représenter autre chose : lignes obliques, arrondis ou courbes. À ce moment là, il y a un effet d’escalier qui apparaît puisque le dessin ne correspond plus à l’orientation des pixels : c’est l’aliasing.

Qu’est-ce que l’anti-aliasing ?

Pour contrer cet effet et tenter de mieux s’approcher de la réalité, il existe un procédé qui permet de lisser cet effet de crénelage : on parle d’anti-aliasing. Cette technique consiste à utiliser des dégradés pour lisser la transition de couleur. Ainsi une ligne noire tracée sur un fond blanc sera représentée par des pixels de différents niveaux de gris : plus la ligne recouvre un pixel, plus celui-ci est foncé.

Ce procédé génère un léger flou mais donne en contrepartie un dessin beaucoup plus lisse.

Rendu de la lettre N, aliasée et anti-aliasée

Rendu de la lettre N, aliasée et anti-aliasée

L’anti-aliasing et le rendu de texte

La lisibilité du texte sur une calculatrice est évidemment un sujet primordial. Après de nombreux comparatifs, nous avons porté notre choix sur la police Source Code Pro qui combine les avantages suivants :

  • Police à pas fixe, particulièrement adaptée pour la programmation et les environnements scientifiques de manière générale.
  • Un fort dimorphisme : impossible de confondre la lettre O et le chiffre 0 ou l minuscule et I majuscule.

Le dessin d’une lettre — on parle de glyphe — peut être composé de lignes horizontales ou verticales mais également de courbes. Quoi qu’il en soit, cette forme n’a a priori aucune raison de correspondre avec la grille formée par les pixels de l’écran. Ce qui nous laisse donc avec deux solutions : soit un affichage avec un fort crénelage, soit un affichage flou si on applique de l’anti-aliasing.

Le hinting, le compromis malin

L’anti-aliasing c’est très utile, mais dans notre cas on peut faire mieux. Prenons l’exemple d’une lettre avec des lignes droites comme le N majuscule. Si l’on se contente de dessiner le glyphe original de la police Source Code Pro en taille 8 les lignes droites tombent à cheval sur 2 rangées de pixels, et par conséquent la lettre est floue. Et si nous nous arrangions pour que la forme du N corresponde avec la grille de pixels ?

Rendu du N avant et après hinting

Rendu du N avant et après hinting

C’est ce qu’on appelle le hinting : on déforme légèrement le glyphe pour qu’il coïncide parfaitement avec la grille de pixels et avoir ainsi un affichage optimal à l’écran. Nous avons ainsi retravaillé l’ensemble des glyphes affichés sur notre calculatrice pour qu’ils s’affichent de la façon la plus nette possible à l’écran.

Comme vous pouvez le voir, le hinting conserve des zones de flou lorsque c’est nécessaire (courbes ou lignes inclinées par exemple), mais permet de garder la netteté sous contrôle. Le résultat est un rendu de texte optimal : à la fois agréable à l’oeil et très contrasté.

Audrey Gheorghe
Audrey Gheorghe — Directrice artistique

Audrey est diplômée de l'ECV et elle a rejoint l'équipe NumWorks en août 2016 comme directrice artistique. Audrey, c'est l'esprit créatif de NumWorks ! Elle a imaginé et créé tout l'univers visuel autour de la calculatrice, comme les icônes sur la calculatrice ou encore les images sur notre site internet. A l'école, Audrey n'a jamais aimé les maths… Mais l'Univers est joueur et la voilà maintenant pleinement épanouie au milieu de symboles mathématiques et autres courbes paramétriques !