juil

4

La typographie dans l’ergonomie

Catégorie: Ergonomie, Typographie | 793 lectures

Jakob Nielsen nous donne une première instruction: « Utilisez des polices traditionnelles, à une taille de 10 points ou plus ». C’est très embêtant cette histoire de taille. Ceux qui cherchent à connaître une bonne grandeur sont tentés de spécifier directement font-style: 10pt. Or, ce n’est certainement pas une bonne idée. Heureusement, il aborde les valeurs relatives plus loin dans son livre mais cette présentation est trompeuse.

Quelle valeur choisir ?

La réponse est simple: des valeurs relatives. Je ne vais pas vous rabâcher les oreilles avec les avantages, je suppose que vous savez déjà tout ça. Par contre, j’ai été surpris en voyant toutes les possibilités présentes dans Dreamweaver. Ça doit donner des coups de chaleur aux débutants.

  1. pixels (px)
  2. points (pt)
  3. pouces (in)
  4. centimètres (cm)
  5. millimètres (mm)
  6. picas (pc)
  7. cadratin (em)
  8. hauteur d’x (ex)
  9. pourcents (%)

Je me suis amusé à trouver les valeurs communes à toutes en sachant que les unités relatives se réfèrent à la taille par défaut du navigateur: page de test.

J’utilise Firefox avec les réglages de police par défaut, c’est-à-dire Times New Roman 16 pixels. Personnellement, je trouve cette valeur trop grande. Généralement, je définis mon body sur small ou sur un coefficient multiplicateur de 0,8 em. Cette dernière valeur correspond à 80 % de 16 pixels, c’est-à-dire 12,8 pixels. On sait qu’un point représente 0,75 pixels sur Windows. Du coup, 3/4 de 12,8 pixels donnent 9,6 points. Et puisque 1 point égal 0,36 mm alors ma police vaut 3,456 mm à l’impression. La question c’est: « est-ce qu’on utilise toutes ces mesures sur le web ? ». Les néophytes préfèrent les pixels plus faciles à appréhender pour un début. Les autres se tournent vers des valeurs relatives comme les ems ou le pourcentage. Le reste concerne l’impression.

Thierry a une autre méthode tout aussi judicieuse: « Je fixe en général la taille de la police à 62,5 % sur le body, ce qui ramène la taille par défaut à 62,5%×16px = 10px, puis j’indique des valeurs en em, ce qui donne (si l’on se base toujours sur la taille par défaut du navigateur): 1em = 10px , 1.1em = 11px, etc. ».

Valeurs par défaut

Il n’est pas très difficile de trouver la fonte du navigateur puisque c’est indiqué dans les options. Par contre, je viens de trouver les valeurs des titres.

  • H1 a une valeur de 200 % par rapport à la valeur de body
  • H2 a une valeur de 150 % par rapport à la valeur de body
  • H3 a une valeur de 120 % par rapport à la valeur de body
  • H4 a une valeur de 100 % par rapport à la valeur de body
  • H5 a une valeur de 90 % par rapport à la valeur de body
  • H6 a une valeur de 60 % par rapport à la valeur de body

Genèse du point typographique

C’est l’occasion de refaire rapidement l’historique des principales mesures typographiques. Gutenberg est le précurseur de la typographie avec l’invention géniale des caractères mobiles. Il n’existe alors pas d’unité de mesure officielle mais des dénominations tirées du nom des ouvrages dans lesquels ces corps sont apparus pour la première fois. C’est un peu le bordel puisque les “tailles” sont très relatives et varient d’un atelier à un autre.

Il faut attendre 1737 et voir naître une échelle, graduée en points, inventée par le graveur et fondeur Pierre-Simon Fournier. Cette mesure n’arrive pas à s’imposer et disparait.

Vers la seconde moitié du XVIIIe siècle, François Ambroise Didot propose un système sensiblement identique basé sur une toise. Cette règle est divisée en 72 pouces et forme le pouce royal, lui-même divisé en 72 points typographiques. Le point Didot vaut 0,376 mm. Conclusion: 1 pouce = 72 points Didot = 0,376 mm. Cette dernière mesure est encore divisée en 6 ciseros mais là on commence franchement à chipoter. Ce point Didot restera en vigueur jusqu’à la seconde moitié du XIXe siècle.

L’Angleterre ne l’entend pas de cette oreille et rechigne à utiliser cette mesure. Elle préfère imposer au monde une mesure basée sur le pouce impérial: le point Pica dont la valeur vaut 0,3515 mm dans un premier temps puis 0,3526 mm avec l’arrivée des photocomposeuses. C’est ce qu’on a appelé le point PostScript. Il y a 12 points dans un pica et 6 picas dans un pouce.

Aujourd’hui, le point Didot est oublié de tous. Lorsqu’on parle de point il faut comprendre “point Pica”. Nous n’avons pas vraiment de raison d’utiliser cette mesure puisqu’on s’en sort bien avec notre système métrique. Par contre, les typographes et les logiciels utilisent encore cette mesure anglo-saxonne: Arial 12pt. Et comme je l’ai indiqué au début, 1 point vaut 0,75 pixels. Autrement dit, une valeur exprimée en pixels sera toujours plus grande à l’écran que celle en points.

Comment calcule-t-on le corps d’une police ?

Le corps d’une police est la distance entre la partie la plus haute d’une lettre montante (b, d, h) et la partie la plus basse d’une lettre descendante (p,q, y). Pour ceux qui se posent la question, les capitales ne sont pas plus hautes que la plus haute lettre. À cela s’ajoute un espace vierge de part et d’autre de la lettre pour lui assurer une bonne lisibilité et éviter d’entrechoquer la ligne suivante. C’est ce qu’on appelle le talus. Il peut-être mis à mal pour la présence de capitale accentuée. Par exemple, la descendante du p (minuscule) sur la première ligne rencontre un À (capitale accentuée) sur la seconde ligne.

Très bien, si on peut être certain d’une chose c’est que le corps désigne la hauteur. Toutes devraient avoir la même grandeur. Pour en avoir le cœur net, j’ai fait un petit test. J’ai mesuré la hauteur de chaque police dans des corps différents.

Taille des caractères
Taille Arial Times Courier Georgia Verdana
12 pt 11 px 12 px 10 px 13 px 12 px
14 pt 13 px 13 px 12 px 14 px 14 px
16 pt 15 px 14 px 13 px 15 px 16 px
18 pt 17 px 17 px 14 px 18 px 18 px

Les variations vont de 0 à 4 pixels uniquement pour ces 4 mesures. La différence se note franchement pour le Courier. La différence pour les polices prévues pour le web est minime. Elle doit s’expliquer par les valeurs arrondies puisque le pixel est encore trop gros pour permettre un travail de précision.

La taille n’est pas la grosseur

Et si le corps mesure la lettre de haut en bas, elle ne prend pas en compte sa largeur… la chasse du caractère. Encore un mot barbare mais vous allez voir ce n’est pas compliqué.

Approche

La chasse comprend l’œil et l’approche. L’œil c’est simplement la surface imprimable du caractère. L’approche c’est l’espace vierge ajouté de part et d’autre pour éviter aux signes de se coller. Dans l’exemple ci-dessous, les deux polices ont exactement le même corps. Vous remarquez que l’œil du Verdana est bien plus gros que l’œil du Bernhard Modern.

Oeil caractere

La beauté typographique massacrée

Il faut bien reconnaître que sur un écran il est impossible d’apprécier pleinement toutes les subtilités d’une police. A fortiori quand le corps des caractères est petit. Actuellement, la résolution d’écran ne permet pas d’afficher les pleins et déliés, la goutte du F, l’oreille et la boucle du G, la finesse des empattements, l’italique, etc. Malgré toute la bonne volonté des typographes pour adapter les fontes à l’écran, il faut attendre que le support évolue.

D’ici 2025, nous devrions finalement utiliser des écrans d’ordinateur décents, approchant la qualité typographique du papier.

Jakob Nielsen


Commentaires

Laisser un commentaire