Convertisseur de PT en PX

Le Convertisseur de PT en PX convertit les points en pixels — et les pixels en points — pour les usages à l’écran comme à l’impression. La plupart des convertisseurs vous donnent un seul nombre fondé sur le rapport CSS fixe de 1pt = 1.3333px. Cette réponse est correcte dans un navigateur et fausse presque partout ailleurs, car un point est une unité physique et le nombre de pixels qu’il contient dépend de la résolution de sortie. Cet outil vous donne les deux : la valeur CSS qu’un navigateur affichera réellement et la valeur en pixels de l’appareil à 72, 150, 300, 600 ou toute résolution DPI personnalisée, ainsi que la taille physique réelle en millimètres et en pouces sur une vraie règle.

Formule de conversion de PT en PX

Un point est défini comme exactement un soixante-douzième de pouce. Un pouce contient autant de pixels que l’indique la résolution de sortie. En réunissant ces deux faits, on obtient directement la conversion :

Sur le Web, la résolution n’est pas variable. La spécification CSS fixe par définition 1in = 96px, le navigateur utilise donc toujours 96 et la formule se réduit à une constante :

C’est pourquoi 12pt vaut 16px dans tous les navigateurs et sur tous les appareils, qu’il s’agisse d’un écran d’ordinateur portable 1× ou d’un écran de téléphone 3×. Le pixel CSS est une unité de référence, et non un pixel matériel.

Un pouce, trois noms

Pour bien distinguer les unités, retenez qu’elles décrivent toutes la même distance physique. Chaque barre ci-dessous mesure exactement un pouce de large :

Tableau de conversion de PT en PX

La colonne Web est celle qu’il vous faut pour le CSS. La colonne à 300 DPI est celle à utiliser pour exporter un PDF vers une image matricielle, mettre en page un fichier destiné à l’impression ou dimensionner du texte dans une image bitmap qui sera imprimée.

Pourquoi une même taille en points donne des nombres de pixels différents

C’est le point qui prête le plus à confusion, il mérite donc d’être énoncé clairement. La taille physique ne change jamais : 12pt représente toujours un sixième de pouce. Ce qui change, c’est la finesse avec laquelle ce pouce est échantillonné.

• 72 DPI — la résolution historique des écrans Macintosh, choisie précisément pour que 1pt = 1px. Elle reste la valeur par défaut dans certains anciens flux d’images, ce qui explique pourquoi un texte de 12pt est parfois exporté avec seulement 12 pixels.
• 96 DPI — la valeur par défaut de Windows et la résolution de référence sur laquelle le CSS est défini. C’est la réponse du Web et celle qu’utilise votre navigateur.
• 150 DPI — une qualité d’impression brouillon ou un travail grand format destiné à être lu à distance.
• 300 DPI — la norme de l’impression commerciale. Une légende de 12pt dans une exportation à 300 DPI nécessite 50 pixels de hauteur, et non 16.
• 600 DPI — les dessins au trait fins, les travaux d’impression haut de gamme et les sorties laser où l’épaisseur des traits compte.

Si vous avez déjà exporté une illustration à « la bonne taille » et constaté que le texte était flou et pixellisé, ce rapport en est presque toujours la cause : la mise en page était mesurée en points et la trame générée à 72 ou 96 DPI au lieu de 300.

Ce que mesure réellement une taille en points

Une police de 12pt ne correspond pas à 12 points de lettres visibles. La taille en points décrit le carré cadratin — la grille de conception invisible sur laquelle une police est dessinée. La part de ce carré occupée par les lettres dépend entièrement du créateur de caractères, ce qui explique pourquoi deux polices réglées à la même taille en points peuvent sembler très différentes.

Faut-il utiliser pt ou px en CSS ?

Pour les styles d’écran, utilisez px ou rem. Les points sont une unité absolue en CSS, exactement comme px, et présentent donc le même inconvénient en matière d’accessibilité : un texte défini en pt ignore la préférence de taille de police du navigateur du visiteur. Utiliser pt peut également prêter à confusion, car un collègue lisant la feuille de style peut penser qu’il s’agit de points physiques sur le périphérique de sortie, ce qui n’est pas le cas.

L’usage légitime de pt est une feuille de style d’impression, car la sortie est réellement mesurée en pouces :

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

Lors de la génération de l’impression, les navigateurs rapportent ces points au format réel du papier. Un corps de 11pt sort donc réellement en 11pt sur la page — la même taille que celle produite par un traitement de texte.

Convertir un document Word ou InDesign pour le Web

1. Relevez les tailles en points directement dans la feuille de style du document — généralement 11pt pour le corps, 16pt pour les sous-titres et 24pt pour les titres.
2. Collez-les toutes à la fois dans le champ des valeurs, séparées par des virgules, en laissant la résolution à 96.
3. Lisez la colonne des pixels CSS. 11pt devient 14.67px, 16pt devient 21.33px et 24pt devient 32px.
4. Arrondissez à une échelle claire avant la mise en ligne. La typographie imprimée tolère les fractions inhabituelles ; les échelles Web sont plus lisibles avec des pixels entiers ou des demi-pixels, donc 14.67px devient généralement 15px ou 16px.
5. Convertissez les valeurs finales en rem si votre système de conception utilise des unités relatives.

Unités CSS absolues associées

Les points font partie d’une petite famille d’unités absolues que le CSS définit par rapport au même pouce de 96 pixels. Connaître toute la famille rend les conversions triviales :

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (pica) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (quart de millimètre) = 0.945px

Comment utiliser ce convertisseur

1. Choisissez un sens : pt → px ou px → pt.
2. Saisissez vos valeurs : un nombre ou toute une échelle typographique séparée par des virgules ou des espaces (jusqu’à 20 valeurs à la fois). Les unités finales telles que 12pt sont acceptées et ignorées.
3. Définissez la résolution de sortie : laissez 96 DPI pour le CSS et le Web, ou choisissez une pastille pour 72, 150, 300 ou 600 DPI.
4. Cliquez sur Convertir : consultez le résultat, la comparaison des DPI, l’aperçu typographique à taille réelle, la règle millimétrée et l’échelle de référence.
5. Copiez le CSS : un bouton copie toutes les déclarations font-size en conservant la valeur en points d’origine dans un commentaire.

Questions fréquentes

Comment convertir des pt en px ?

Multipliez la valeur en points par la résolution de sortie et divisez par 72, car un point vaut un soixante-douzième de pouce. Sur le Web, la résolution est fixée à 96 DPI, donc px = pt × 1.3333. Par exemple, 12pt vaut 16px.

Combien de pixels font 12pt ?

En CSS et dans n’importe quel navigateur, 12pt vaut exactement 16px. Dans une impression ou une image à 300 DPI, le même texte de 12pt mesure 50 pixels de haut, et à 600 DPI il mesure 100 pixels, car le nombre de pixels varie avec la résolution tandis que la taille physique reste la même.

1pt vaut-il toujours 1.3333px ?

Dans le CSS, 1pt vaut toujours 1.3333px, car la spécification CSS fixe exactement un pouce à 96 pixels. Ce n’est pas vrai pour une sortie matricielle : à 300 DPI, un point vaut 4.1667 pixels d’appareil, et à 72 DPI un point vaut exactement un pixel.

Quelle est la différence entre pt et px ?

Un point est une unité typographique physique égale à un soixante-douzième de pouce, utilisée dans l’impression, les traitements de texte et la publication assistée par ordinateur. Un pixel est une unité d’affichage. En CSS, le pixel est également ancré à une référence physique d’un quatre-vingt-seizième de pouce, c’est pourquoi les deux unités se convertissent selon un rapport fixe sur le Web, mais pas dans les fichiers image.

Dois-je utiliser pt ou px en CSS ?

Utilisez px ou rem pour les styles d’écran et réservez pt aux feuilles de style d’impression. Les points sont une unité physique absolue, donc un texte défini en pt ignore la préférence de taille de police du navigateur du visiteur. Dans un bloc @media print, pt est l’unité naturelle, car la sortie est réellement mesurée en pouces.

Quelle résolution DPI utiliser pour l’impression ?

300 DPI est la norme pour l’impression commerciale et les sorties photo de qualité, 150 DPI convient aux brouillons et aux grands formats destinés à être lus à distance, et 600 DPI est utilisé pour les dessins au trait fins et les travaux d’impression haut de gamme. Saisissez dans le champ de résolution la valeur attendue par votre imprimante ou votre boîte de dialogue d’exportation.

Pourquoi un texte de 12pt ne mesure-t-il pas 12 points de haut à l’écran ?

La taille en points décrit le carré cadratin de la police, c’est-à-dire la grille de conception sur laquelle les lettres sont dessinées, et non la hauteur d’un glyphe particulier. La hauteur des capitales représente généralement environ 70 % du cadratin et la hauteur d’x environ 50 %, donc des capitales de 12pt mesurent environ 8.4pt de haut.

Le ratio de pixels de l’appareil modifie-t-il la conversion de pt vers px ?

Non. Sur un écran 2× ou 3×, le navigateur considère toujours que 12pt valent 16 pixels CSS, puis affiche ces 16 pixels CSS avec 32 ou 48 pixels matériels. Le pixel CSS est une unité de référence : les nombres de votre feuille de style ne changent jamais, les pixels matériels supplémentaires rendent seulement la même taille plus nette.

Ressources supplémentaires

• Unités de longueur CSS – MDN
• Longueurs absolues – CSS Values du W3C