Convertissez les pixels en points typographiques

Un pixel vaut 0,75 point, car la norme CSS fixe qu’un pouce contient 96 pixels et 72 points [1]. D’où le couple qui revient dans chaque projet : 16 px font exactement 12 pt, et 24 px font 18 pt.

On convertit dans ce sens lorsque le travail est né à l’écran et finit dans le monde de l’imprimerie. Les logiciels de mise en page, les messageries, les tableurs et le format PDF mesurent le texte et les pages en points : une maquette décrite en pixels demande donc une traduction dans leur unité.

Le convertisseur convient à qui envoie chez l’imprimeur un fichier né à l’écran, aux développeurs qui lisent les dimensions de page d’un PDF et aux concepteurs d’interfaces mobiles, où le mot point désigne tout autre chose.

Vous trouverez plus bas un tableau des tailles de texte, un tableau des grandes valeurs, les dimensions de neuf formats de page en points PDF et la comparaison des points et des pixels sur les écrans Apple. Le sens inverse est traité par le convertisseur de points en pixels.

La formule est courte : points = pixels × 72 ÷ 96, c’est-à-dire une multiplication par 0,75. Vingt pixels donnent 15 pt, 40 px donnent 30 pt, et 96 px donnent 72 pt tout ronds, soit un pouce exact.

Le résultat tombe juste chaque fois que le nombre de pixels se divise par quatre : 12 px font 9 pt, 16 px font 12 pt, 20 px font 15 pt, 24 px font 18 pt. Pour les autres valeurs apparaissent des quarts de point : 15 px donnent 11,25 pt et 18 px donnent 13,5 pt. Les logiciels de mise en page acceptent ces fractions sans difficulté.

Le facteur 0,75 vaut à la densité de 96 pixels par pouce que la norme CSS retient pour l’écran et pour l’impression depuis le navigateur [1]. Lorsque vous préparez une image matricielle dans une autre résolution, calculez la taille physique avec le convertisseur px en mm à DPI réglable. Le point reste lié à cette densité quels que soient les réglages du lecteur, tandis que le rem suit la taille de texte du navigateur : pour une base de 16 px, un pixel vaut 0,0625rem, ce que calcule le convertisseur px en rem.

Le format PDF place chaque élément dans l’espace utilisateur, dont l’unité par défaut est 1/72 de pouce, c’est-à-dire précisément un point typographique. L’entrée UserUnit dans la description de page peut modifier cette valeur ; en son absence, 1/72 de pouce s’applique [2]. L’origine des coordonnées se situe dans le coin inférieur gauche de la page et l’axe vertical croît vers le haut.

C’est pourquoi une feuille A4 mesure 595 × 842 pt dans un fichier PDF, tandis que le format Lettre, la norme au Québec comme dans toute l’Amérique du Nord, mesure 612 × 792 pt. Vous croiserez ces nombres dans les bibliothèques de génération de documents, dans les journaux des outils de prépresse et dans le champ de taille de page d’Acrobat dès que vous passerez l’unité en points.

Si vous produisez une facture ou un rapport depuis du code et disposez des dimensions de maquette en pixels, multipliez-les par 0,75 et vous obtenez des coordonnées de page prêtes à l’emploi. Une largeur de 800 px donne 600 pt, soit cinq points de plus que les 595 pt de large d’une A4 : le contenu tient sur la page à partir d’une maquette de 793 px de large. Douze points font un pica, donc ces 600 pt s’écrivent aussi 50 picas, ce que donne directement le convertisseur de pixels en picas.

Apple appelle point l’unité de base de la mise en page dans ses systèmes, mais elle mesure l’écran et non le papier. La propriété scale la décrit mot pour mot comme le rapport entre les points, l’espace de coordonnées logique, et les pixels, l’espace de l’appareil [3]. La valeur 1,0 signifie qu’un point vaut un pixel, la valeur 2,0 le répartit sur deux pixels et 3,0 sur trois.

En pratique, le graphiste dessine un iPhone sur une grille de 402 points de large alors que l’écran affiche 1 206 pixels [4]. Le point iOS se convertit donc par le facteur d’échelle de l’appareil, tandis que le facteur 0,75 de cette page s’occupe du point typographique.

Android a résolu la même question sous le nom de dp, le pixel indépendant de la densité. La référence y est un écran de 160 dpi et la formule s’écrit px = dp × (dpi ÷ 160). La documentation la donne explicitement tout en conseillant de recourir dans le code à TypedValue.applyDimension() plutôt que d’inscrire le calcul en dur [5].