QuickUnits

Typographie

Points en pixels

1 pt = 1,33333 px @96

—

Un point correspond à 1,3333 pixels à 96 dpi. La relation est fixée par la spécification CSS plutôt que par un écran physique : un pixel CSS est défini comme 1/96 d'un pouce, et un point comme 1/72, donc le rapport est exactement 96/72.

h2.units

Le point est l'unité traditionnelle de taille de police, exactement 1/72 d'un pouce depuis que PostScript l'a standardisée dans les années 1980. Le pixel en conception web n'est pas du tout un pixel matériel — la spécification CSS définit un pixel de référence comme l'angle visuel de 1/96 pouce à bout de bras, et les navigateurs le mappent ensuite sur ce que l'affichage a réellement. Sur un écran haute densité, un pixel CSS peut être deux ou trois pixels de l'appareil, c'est pourquoi une police de 16 pixels a la même taille physique sur un téléphone et un moniteur de bureau malgré des densités de pixels très différentes.

h2.factor

Le facteur est exactement 96 ÷ 72 = 4/3 = 1,3333. Ainsi, 12 pt équivaut à 16 px, 9 pt à 12 px et 18 pt à 24 px. Le chiffre de 96 dpi provient de la décision de Microsoft dans Windows d'assumer cette densité pour le rendu d'écran, que la spécification CSS a ensuite adoptée comme référence. Cela n'a jamais été vrai pour un moniteur particulier ; c'était une convention choisie pour que le texte spécifié en points apparaisse à une taille lisible sur un écran typique des années 1990.

h2.usage

Conception web et d'interface, où un concepteur travaille en points dans un outil orienté impression et un développeur implémente en pixels. Les guides de style qui spécifient la typographie en points doivent être traduits, et un corps de texte de 12 pt devenant 16 px est la conversion la plus courante dans ce domaine. L'adaptation des directives de marque de l'impression au web passe par là. Notez que la pratique CSS moderne privilégie les unités rem par rapport aux deux, précisément parce qu'elles s'adaptent à la taille de base choisie par l'utilisateur plutôt que d'être fixes.

h2.table

table.from (pt) table.to (px @96)
1 1,33333
2 2,66667
5 6,66667
10 13,3333
25 33,3333
50 66,6667
100 133,333
500 666,667
1 000 1 333,33

approxNote

h2.reverse

1 px @96 = 0,75 pt

Les pixels en points se multiplient par 0,75. L'ensemble à connaître : 16 px équivaut à 12 pt, 14 px à 10,5 pt et 24 px à 18 pt — et si un design spécifie les deux et qu'ils ne suivent pas ce rapport, l'un d'eux a été mesuré plutôt que calculé.

table.from (px @96) table.to (pt)
1 0,75
2 1,5
5 3,75
10 7,5
25 18,75
50 37,5
100 75
500 375
1 000 750

h2.related

seeAllInCategory