Convertitore da PT a PX

Il Convertitore da PT a PX converte i punti in pixel — e i pixel nuovamente in punti — sia per il lavoro a schermo sia per la stampa. La maggior parte dei convertitori fornisce un unico numero basato sul rapporto CSS fisso 1pt = 1.3333px. Questo risultato è corretto in un browser e sbagliato quasi ovunque altrove, perché un punto è un'unità fisica e il numero di pixel contenuti dipende dalla risoluzione dell'output. Questo strumento fornisce entrambi: il valore CSS che un browser visualizzerà effettivamente e il valore in pixel del dispositivo a 72, 150, 300, 600 o qualsiasi DPI personalizzato, oltre alla dimensione fisica reale in millimetri e pollici su un righello reale.

Formula da PT a PX

Un punto è definito esattamente come un settantaduesimo di pollice. Un pollice contiene tanti pixel quanti ne indica la risoluzione dell'output. Unendo questi due fatti, si ottiene la conversione:

Sul web la risoluzione non è una variabile. La specifica CSS fissa 1in = 96px per definizione, quindi il browser usa sempre 96 e la formula si riduce a una costante:

Ecco perché 12pt equivale a 16px in ogni browser e su ogni dispositivo, sia su un pannello laptop 1× sia su uno schermo del telefono 3×. Il pixel CSS è un'unità di riferimento, non un pixel hardware.

Un pollice, tre nomi

Il modo più semplice per tenere separate le unità è ricordare che descrivono tutte la stessa distanza fisica. Ogni barra qui sotto è larga esattamente un pollice:

Tabella di conversione da PT a PX

La colonna web è quella da usare per il CSS. La colonna a 300 DPI è quella da usare quando si esporta un PDF in un'immagine raster, si impagina un file di stampa o si dimensiona il testo in una bitmap destinata alla stampa.

Perché la stessa dimensione in punti produce conteggi di pixel diversi

Questo è l'unico aspetto che confonde davvero le persone, quindi vale la pena dirlo chiaramente. La dimensione fisica non cambia mai: 12pt è sempre un sesto di pollice. Ciò che cambia è la precisione con cui viene campionato quel pollice.

• 72 DPI — la risoluzione storica degli schermi Macintosh, scelta proprio per fare in modo che 1pt = 1px. È ancora il valore predefinito in alcune pipeline di immagini legacy, motivo per cui il testo da 12pt a volte viene esportato a soli 12 pixel.
• 96 DPI — l'impostazione predefinita di Windows e la risoluzione di riferimento rispetto alla quale è definito il CSS. È la risposta per il web e quella usata dal browser.
• 150 DPI — qualità di stampa di bozza o lavori di grande formato destinati alla lettura da lontano.
• 300 DPI — lo standard della stampa commerciale. Una didascalia da 12pt in un'esportazione a 300 DPI richiede 50 pixel di altezza, non 16.
• 600 DPI — grafica a tratto fine, stampa di fascia alta e output laser in cui le linee sottili sono importanti.

Se hai mai esportato un'illustrazione alla "dimensione corretta" e hai scoperto che il testo risultava sfocato e pixelato, quasi sempre la causa è questo rapporto: l'impaginazione era misurata in punti e il raster era stato generato a 72 o 96 DPI anziché a 300.

Cosa misura davvero una dimensione in punti

Un carattere da 12pt non è una lettera visibile alta 12 punti. La dimensione in punti descrive il quadrato em — la griglia di progettazione invisibile sulla quale viene disegnato un carattere. La parte di quel quadrato occupata dalle lettere dipende interamente dal progettista del carattere, motivo per cui due font impostati alla stessa dimensione in punti possono avere un aspetto molto diverso.

Devi usare pt o px nel CSS?

Per gli stili a schermo, usa px o rem. I punti sono un'unità assoluta nel CSS, esattamente come px, quindi presentano lo stesso svantaggio in termini di accessibilità: il testo dimensionato in pt ignora la preferenza del visitatore per la dimensione dei caratteri del browser. L'uso di pt può anche creare confusione, perché un collega che legge il foglio di stile potrebbe pensare che indichi punti fisici sul dispositivo di output, mentre non è così.

Il contesto in cui pt trova davvero il suo posto è un foglio di stile per la stampa, perché l'output viene realmente misurato in pollici:

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

I browser rapportano quei punti alla dimensione reale della carta quando generano il lavoro di stampa, quindi un corpo da 11pt viene davvero stampato come 11pt sulla pagina — la stessa dimensione prodotta da un programma di videoscrittura.

Convertire un documento Word o InDesign per il web

1. Prendi le dimensioni in punti direttamente dal foglio di stile del documento — in genere 11pt per il corpo, 16pt per i sottotitoli e 24pt per i titoli.
2. Incollale tutte insieme nel campo dei valori, separate da virgole, lasciando la risoluzione su 96.
3. Leggi la colonna dei pixel CSS. 11pt diventa 14.67px, 16pt diventa 21.33px e 24pt diventa 32px.
4. Arrotonda a una scala ordinata prima della pubblicazione. La tipografia per la stampa tollera frazioni insolite; le scale tipografiche web risultano più leggibili con pixel interi o mezzi pixel, quindi 14.67px diventa di solito 15px o 16px.
5. Converti i valori finali in pixel in rem se il tuo sistema di design usa unità relative.

Unità CSS assolute correlate

I punti fanno parte di una piccola famiglia di unità assolute che il CSS definisce rispetto allo stesso pollice da 96 pixel. Conoscere l'intera famiglia rende le conversioni semplici:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (pica) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (un quarto di millimetro) = 0.945px

Come usare questo convertitore

1. Scegli una direzione: pt → px o px → pt.
2. Inserisci i tuoi valori: un numero oppure un'intera scala tipografica separata da virgole o spazi (fino a 20 valori alla volta). Le unità finali come 12pt vengono accettate e ignorate.
3. Imposta la risoluzione di output: mantieni 96 DPI per il CSS e il web, oppure seleziona un chip per 72, 150, 300 o 600 DPI.
4. Fai clic su Converti: leggi il risultato, il confronto DPI, l'anteprima del testo alla dimensione reale, il righello in millimetri e la scala di riferimento.
5. Copia il CSS: un pulsante copia ogni dichiarazione font-size mantenendo il valore originale in punti in un commento.

Domande frequenti

Come converto pt in px?

Moltiplica il valore in punti per la risoluzione di output e dividi per 72, perché un punto è un settantaduesimo di pollice. Sul web la risoluzione è fissa a 96 DPI, quindi px = pt × 1.3333. Ad esempio, 12pt equivale a 16px.

Quanti pixel sono 12pt?

Nel CSS e in qualsiasi browser, 12pt equivale esattamente a 16px. In una stampa o in un file immagine a 300 DPI, lo stesso testo da 12pt è alto 50 pixel, mentre a 600 DPI è alto 100 pixel, perché il conteggio dei pixel cresce con la risoluzione mentre la dimensione fisica rimane invariata.

1pt è sempre 1.3333px?

Nel CSS è sempre 1.3333px, perché la specifica CSS fissa un pollice a esattamente 96 pixel. Questo non vale per l'output raster: a 300 DPI un punto equivale a 4.1667 pixel del dispositivo, mentre a 72 DPI un punto equivale esattamente a un pixel.

Qual è la differenza tra pt e px?

Un punto è un'unità tipografica fisica pari a un settantaduesimo di pollice, usata nella stampa, nei programmi di videoscrittura e nel desktop publishing. Un pixel è un'unità di visualizzazione. Nel CSS anche il pixel è ancorato a un riferimento fisico di un novantaseiesimo di pollice, perciò le due unità si convertono con un rapporto fisso sul web ma non nei file immagine.

Devo usare pt o px nel CSS?

Usa px o rem per gli stili a schermo e riserva pt ai fogli di stile per la stampa. I punti sono un'unità fisica assoluta, quindi il testo impostato in pt ignora la preferenza del visitatore per la dimensione dei caratteri del browser. All'interno di un blocco @media print, pt è l'unità naturale perché l'output viene realmente misurato in pollici.

Quale DPI dovrei usare per la stampa?

300 DPI è lo standard per la stampa commerciale e l'output fotografico, 150 DPI è accettabile per le bozze e i lavori di grande formato osservati da lontano, mentre 600 DPI viene usato per la grafica a tratto fine e la stampa di fascia alta. Imposta il campo della risoluzione sul valore previsto dalla tua stampante o dalla finestra di esportazione.

Perché il testo da 12pt non è alto 12 punti sullo schermo?

La dimensione in punti descrive il quadrato em del carattere, cioè la griglia di progettazione sulla quale vengono disegnate le lettere, non l'altezza di ogni singolo glifo. L'altezza delle maiuscole è in genere circa il 70% della dimensione em e l'altezza x delle minuscole circa il 50%, quindi le maiuscole da 12pt misurano all'incirca 8.4pt.

Il rapporto pixel del dispositivo cambia la conversione da pt a px?

No. Su uno schermo 2× o 3×, il browser continua a riportare 12pt come 16 pixel CSS e poi visualizza quei 16 pixel CSS usando 32 o 48 pixel hardware. Il pixel CSS è un'unità di riferimento, quindi i numeri del foglio di stile non cambiano mai: i pixel hardware aggiuntivi rendono semplicemente la stessa dimensione più nitida.

Risorse aggiuntive

• Unità di lunghezza CSS - MDN
• Lunghezze assolute - Valori CSS W3C