Quel est l'objectif ?
L’objectif de cette règle est de donner des clefs de lecture pour choisir une typographie accessible et lisible pour votre interface numérique.
Comment choisir une typographie pour optimiser la lisibilité d’un texte à l’écran ?
Plusieurs paramètres sont à prendre en compte, (1) la typographie, (2) la lisibilité et (3) la couleur.
Typographie
Pour un texte à l’écran, il est important d’utiliser une police sans serif, telle qu’Arial, Helvetica ou PT Sans. Une police sans serif, également appelé police droite, ne possède pas d’empattement et comporte une épaisseur suffisante et constante sur tout le caractère. Ces polices forment ainsi des caractères plus simples qui facilitent la lecture du texte à l’écran.
On peut noter qu’à l’inverse, ce sont les polices certifiées telles que Times New Roman qui sont privilégiées pour les supports écrits. Leur empattement permet de créer l’illusion d’une ligne horizontale servant à guider la lecture.
Lisibilité
Une fois la typographie choisie, il faut s’assurer de la lisibilité de chacun de ses caractères. Cette lisibilité s’appuie sur deux types de critères: (1) la distinction de ces caractères et (2) les caractères intrinsèques des glyphes.
• La distinction des caractères
Pour analyser la lisibilité d’une police, il est particulièrement pertinent de regarder les différences entre les caractères
Sur l’exemple ci-dessus, on peut remarquer que la distinction entre le caractère “i” et “l” est faible pour la police Helvetica (représentation de gauche): même hauteur, même forme et le point du i est exactement de la même largeur que son corps et que celui du [ l ]. Au contraire, pour la police PT Sans (représentation de droite), les caractères “i” et “l” sont plus distincts, donc facilement identifiables et lisibles.
La police PT Sans présente donc une meilleure lisibilité que la police Helvetica. Ce constat est d’autant plus reconnaissable avec de petits caractères (exemple ci-dessous).
• Les caractères intrinsèques des glyphes
Pour assurer la lisibilité du texte, on peut également se reposer sur les exigences de la norme ISO 9241-3. Selon celle-ci, quatre caractéristiques sont importantes pour respecter la lisibilité du texte.
- La hauteur minimale du caractère
- l’épaisseur du trait
- La largeur du trait
- L’espacement entre caractère
La hauteur minimale du caractère (h) dépend de la distance de lecture du sujet.
Pour une distance de 50 cm, la hauteur minimale du caractère doit être de 9pt (12px, 2,8 mm).
Pour une distance de 60 cm, la hauteur minimale du caractère doit être de 10pt (13px, 3,4 mm).
Pour une distance de 70 cm, la hauteur minimale du caractère doit être de 11pt (15px, 4 mm).
L’épaisseur du trait (e) doit être supérieure à un douzième de la hauteur minimale du caractère (h) et inférieure à un sixième de hauteur minimale du caractère : h/12 < e < h/6
Pour schématiser :
La largeur du trait (l) doit être supérieure à un 0,7 fois la hauteur minimale du caractère (h) et inférieure à 0,9 fois la hauteur minimale du caractère : 0,7 h < l < 0,9 h.
Par exemple :
L’espacement entre caractère (esp)doit être supérieur à l’épaisseur du trait (e) : esp > e.
A titre illustratif :
Choix des couleurs
Pour terminer, il est important de faire attention à la couleur utilisée pour le texte. La couleur choisie va influer sur le rapport de contraste et un bon rapport de contraste assure une bonne lisibilité. Pour en savoir plus sur les caractéristiques d’un bon rapport de contraste, nous vous conseillons de lire notre règle à ce sujet (le ratio de contraste) disponible dans notre blog.
Plusieurs éléments sont à prendre en compte dans le choix de la couleur.
On préfèrera un texte foncé sur un fond clair, cela permet de maximiser la lisibilité du texte.
Le choix de la couleur dépend de la police choisie et en particulier de l’épaisseur du trait.
Si l’on utilise une police avec une faible épaisseur du trait, le rapport de contraste devra être plus élevé afin de garantir une bonne lisibilité du texte. Au contraire, si l’on utilise une police avec une forte épaisseur du trait, le rapport de contraste peut être plus faible, le texte sera toujours lisible.
Références :
Nogier, Jean-françois, Ergonomie du logiciel et design web. Le manuel des interfaces utilisateurs, Dunod, 2008
Latin, Matej, « 5 keys to accessible web typography », Better Web Type, 16/06/19, https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/
