Convertissez les points typographiques en pixels

Le point est une unité de l’imprimerie. Un point mesure 1/72 de pouce, soit 0,3528 mm, et c’est cette mesure qu’affichent Word, InDesign et Illustrator lorsque vous réglez un corps de texte. Le pixel est une unité d’écran et vaut, dans une feuille de style, 1/96 de pouce, soit 0,2646 mm [1]. Toute la conversion tient au rapport entre ces deux nombres : 96 divisé par 72 donne 1,333.

D’où le couple que tout développeur connaît par cœur : 12 pt font 16 px. Seize pixels, c’est la taille de texte par défaut de chaque navigateur et la valeur que prend un rem. Un document composé en douze points garde donc exactement le même corps sur une page web.

Le convertisseur convient aux graphistes qui remettent une maquette au développement, à ceux qui montent une signature de courriel et à quiconque reçoit un cahier des charges en points tout en travaillant dans un outil qui compte en pixels.

Vous trouverez plus bas un tableau de 30 corps de texte, un tableau des épaisseurs de contour, la comparaison de cinq systèmes de points et la marche à suivre pour changer d’unité dans Illustrator, Photoshop, InDesign, Affinity, Inkscape, Figma et Word. Le sens inverse est traité par le convertisseur de pixels en points.

La formule tient en une ligne : pixels = points × 96 ÷ 72, c’est-à-dire une multiplication par 4/3. Dans l’autre sens, multipliez les pixels par 0,75. Dix-huit points donnent 24 px, vingt-quatre points donnent 32 px, et 36 pt donnent 48 px tout ronds.

Soixante-douze points font exactement un pouce : 72 pt correspondent donc à 96 px et à 25,4 mm. Cette égalité sert de vérification commode lorsque vous calculez de tête. Elle vaut aussi vers le bas : 0,75 pt font exactement un pixel, et 1,5 pt en font deux.

D’où vient ce 96 ? Le W3C a fixé qu’un pouce vaut 96 pixels dans une feuille de style et a décrit le pixel de référence comme l’angle visuel d’un pixel sur un écran de 96 dpi regardé à bout de bras [1]. Le nombre lui-même est plus ancien que le web et vient d’une décision prise chez Microsoft dans les années quatre-vingt.

L’écran du premier Macintosh comptait 512 × 342 points lumineux à 72 PPI, une densité choisie pour qu’un pixel tombe sur un point typographique. Les moniteurs de PC en étaient proches, mais chez Microsoft on a remarqué qu’un moniteur se tient environ un tiers plus loin de l’œil qu’une feuille de papier tenue à la main, et que le texte à l’écran doit donc être plus grand. Windows s’est mis à annoncer une densité majorée précisément de ce tiers : pour des écrans réellement à 72 PPI, il indiquait 96 PPI [2]. Le texte est devenu lisible, un corps onze sous Windows valait un corps huit sur Macintosh, et le 96 est resté dans le système, puis dans les navigateurs, et enfin dans la norme CSS.

Pendant l’essentiel de l’histoire de l’imprimerie, le point désignait autre chose dans chaque pays et chaque fonderie de caractères gardait ses propres mesures. C’est un Français, Pierre Simon Fournier, qui y met de l’ordre le premier : dès 1737, il taille ses poinçons à l’échelle de six cicéros, soit 72 points, pour un pouce de Paris. Un demi-siècle plus tard, François-Ambroise Didot rattache son point au pied du roi, l’étalon légal en vigueur dans tout le royaume, et en tire 1/864 de pied, soit 0,376065 mm à 20 °C [3].

Douze points Didot forment un cicéro, qui mesure 4,512 mm. Son équivalent anglo-saxon est le pica, plus étroit de 6,6 pour cent, et le convertisseur de picas en pixels met les deux côte à côte avec le pica typographique de TeX. Le nom vient de Venise : en 1469, Jean et Wendelin de Spire y impriment les Epistolae ad familiares de Cicéron dans un caractère de ce corps exact [4]. Le système Didot s’est ensuite imposé dans toute l’Europe continentale, tandis que le monde anglo-saxon retenait la pica.

La valeur ronde n’arrive qu’avec PostScript. Adobe décide en 1984 qu’un point vaudra exactement 1/72 de pouce, et Apple bâtit là-dessus la typographie du Macintosh, dont l’écran affichait alors 72 pixels par pouce. C’est ce point que calcule le convertisseur ci-dessus, et c’est sa définition que reprend la norme CSS [1].