Convertidor de PT a PX

El Convertidor de PT a PX convierte puntos en píxeles — y píxeles de nuevo en puntos — tanto para trabajos de pantalla como de impresión. La mayoría de los convertidores ofrecen un único número basado en la proporción CSS fija de 1pt = 1.3333px. Esa respuesta es correcta en un navegador y errónea en casi cualquier otro contexto, porque un punto es una unidad física y la cantidad de píxeles que contiene depende de la resolución de salida. Esta herramienta te ofrece ambos valores: el valor CSS que realmente representará un navegador y el valor en píxeles del dispositivo a 72, 150, 300, 600 o cualquier DPI personalizado, además del tamaño físico real en milímetros y pulgadas sobre una regla real.

Fórmula de PT a PX

Un punto se define exactamente como un septuagésimo segundo de pulgada. Una pulgada contiene tantos píxeles como indique la resolución de salida. Al juntar esos dos hechos, la conversión resulta:

En la web la resolución no es una variable. La especificación de CSS fija 1in = 96px por definición, así que el navegador siempre usa 96 y la fórmula se reduce a una constante:

Por eso 12pt son 16px en todos los navegadores y dispositivos, tanto si se trata de un panel de portátil 1× como de la pantalla de un teléfono 3×. El píxel CSS es una unidad de referencia, no un píxel de hardware.

Una pulgada, tres nombres

La forma más fácil de mantener claras las unidades es recordar que todas describen la misma distancia física. Cada barra de abajo mide exactamente una pulgada:

Tabla de conversión de PT a PX

La columna web es la que necesitas para CSS. La columna de 300 DPI es la que necesitas al exportar un PDF a una imagen rasterizada, diseñar un archivo de impresión o dimensionar texto en un mapa de bits que se imprimirá.

Por qué el mismo tamaño en puntos produce distintas cantidades de píxeles

Esto es lo que más confunde a la gente, así que vale la pena decirlo claramente. El tamaño físico nunca cambia: 12pt es siempre un sexto de pulgada. Lo que cambia es con qué precisión se muestrea esa pulgada.

• 72 DPI — la resolución histórica de pantalla de Macintosh, elegida precisamente para que 1pt = 1px. Sigue siendo el valor predeterminado en algunos procesos de imágenes antiguos, por lo que el texto de 12pt a veces se exporta con unos decepcionantes 12 píxeles.
• 96 DPI — el valor predeterminado de Windows y la resolución de referencia con la que se define CSS. Esta es la respuesta web y la que utiliza tu navegador.
• 150 DPI — calidad de impresión de borrador o trabajos de gran formato pensados para leerse desde cierta distancia.
• 300 DPI — el estándar de la impresión comercial. Un pie de foto de 12pt en una exportación a 300 DPI necesita 50 píxeles de alto, no 16.
• 600 DPI — gráficos de líneas finas, trabajos de imprenta de alta gama y salida láser donde importan las líneas muy finas.

Si alguna vez has exportado una ilustración al «tamaño correcto» y has visto que el texto salió borroso y pixelado, casi siempre la causa es esta proporción: el diseño se midió en puntos y la rasterización se generó a 72 o 96 DPI en lugar de 300.

Qué mide realmente un tamaño en puntos

Una fuente de 12pt no equivale a una letra visible de 12 puntos. El tamaño en puntos describe el cuadrado eme — la cuadrícula de diseño invisible sobre la que se dibuja una tipografía. La cantidad de ese cuadrado que ocupan las letras depende por completo del diseñador tipográfico, por lo que dos fuentes configuradas con el mismo tamaño en puntos pueden parecer muy diferentes en escala.

¿Debes usar pt o px en CSS?

Para estilos de pantalla, usa px o rem. Los puntos son una unidad absoluta en CSS, exactamente igual que px, por lo que tienen el mismo inconveniente de accesibilidad: el texto dimensionado en pt ignora la preferencia de tamaño de fuente del navegador del visitante. Usar pt también puede causar confusión, porque un colega que lea la hoja de estilos puede suponer que significa puntos físicos en el dispositivo de salida, cuando no es así.

Donde pt realmente tiene sentido es en una hoja de estilos de impresión, porque la salida de verdad se mide en pulgadas:

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

Los navegadores convierten esos puntos según el tamaño real del papel al generar el trabajo de impresión, por lo que un cuerpo de 11pt realmente aparece como 11pt en la página — el mismo tamaño que produciría un procesador de textos.

Convertir un documento de Word o InDesign a la web

1. Toma los tamaños en puntos directamente de la hoja de estilos del documento — normalmente 11pt para el cuerpo, 16pt para subtítulos y 24pt para títulos.
2. Pégalos todos de una vez en el campo de valores, separados por comas, con la resolución en 96.
3. Lee la columna de píxeles CSS. 11pt se convierte en 14.67px, 16pt en 21.33px y 24pt en 32px.
4. Redondea a una escala limpia antes de publicar. La tipografía impresa tolera fracciones poco habituales; las escalas tipográficas web se leen mejor con píxeles enteros o medios, por lo que 14.67px normalmente se convierte en 15px o 16px.
5. Convierte los valores finales en píxeles a rem si tu sistema de diseño usa unidades relativas.

Unidades CSS absolutas relacionadas

Los puntos forman parte de una pequeña familia de unidades absolutas que CSS define respecto a la misma pulgada de 96 píxeles. Conocer la familia completa hace que las conversiones sean triviales:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (pica) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (cuarto de milímetro) = 0.945px

Cómo usar este convertidor

1. Elige una dirección: pt → px o px → pt.
2. Introduce tus valores: un número o una escala tipográfica completa separada por comas o espacios (hasta 20 a la vez). Las unidades finales, como 12pt, se aceptan y se ignoran.
3. Establece la resolución de salida: mantén 96 DPI para CSS y trabajos web, o pulsa una opción para 72, 150, 300 o 600 DPI.
4. Pulsa Convertir: lee el resultado, la comparación de DPI, la previsualización tipográfica a tamaño real, la regla milimétrica y la escala de referencia.
5. Copia el CSS: un botón copia cada declaración de font-size con el valor de origen en puntos conservado en un comentario.

Preguntas frecuentes

¿Cómo convierto de pt a px?

Multiplica el valor en puntos por la resolución de salida y divídelo entre 72, porque un punto equivale a un septuagésimo segundo de pulgada. En la web la resolución está fijada en 96 DPI, por lo que px = pt × 1.3333. Por ejemplo, 12pt son 16px.

¿Cuántos píxeles son 12pt?

En CSS y en cualquier navegador, 12pt son exactamente 16px. En una impresión o archivo de imagen a 300 DPI, el mismo texto de 12pt mide 50 píxeles de alto, y a 600 DPI mide 100 píxeles, porque la cantidad de píxeles aumenta con la resolución mientras el tamaño físico permanece igual.

¿1pt siempre equivale a 1.3333px?

En CSS siempre equivale a 1.3333px, porque la especificación CSS fija una pulgada exactamente en 96 píxeles. No es cierto para una salida rasterizada: a 300 DPI un punto equivale a 4.1667 píxeles del dispositivo, y a 72 DPI un punto equivale exactamente a un píxel.

¿Cuál es la diferencia entre pt y px?

Un punto es una unidad tipográfica física equivalente a un septuagésimo segundo de pulgada, utilizada en impresión, procesadores de texto y autoedición. Un píxel es una unidad de pantalla. En CSS, el píxel también está vinculado a una referencia física de un noventaiseisavo de pulgada, por lo que ambas unidades se convierten mediante una proporción fija en la web, pero no en archivos de imagen.

¿Debo usar pt o px en CSS?

Usa px o rem para estilos de pantalla y reserva pt para hojas de estilos de impresión. Los puntos son una unidad física absoluta, por lo que el texto definido en pt ignora la preferencia de tamaño de fuente del navegador del visitante. Dentro de un bloque @media print, pt es la unidad natural porque la salida realmente se mide en pulgadas.

¿Qué DPI debo usar para imprimir?

300 DPI es el estándar para la impresión comercial y la salida con calidad fotográfica, 150 DPI es aceptable para borradores y trabajos de gran formato vistos desde cierta distancia, y 600 DPI se utiliza para gráficos de líneas finas y trabajos de imprenta de alta gama. Establece el campo de resolución en el valor que espera tu impresora o diálogo de exportación.

¿Por qué el texto de 12pt no mide 12 puntos de alto en pantalla?

El tamaño en puntos describe el cuadrado eme de la fuente, que es la cuadrícula de diseño sobre la que se dibujan las letras, no la altura de cada glifo. La altura de mayúsculas suele ser aproximadamente el 70 % del tamaño eme y la altura de x minúscula cerca del 50 %, por lo que las mayúsculas de 12pt miden aproximadamente 8.4pt de alto.

¿La proporción de píxeles del dispositivo cambia la conversión de pt a px?

No. En una pantalla 2× o 3×, el navegador sigue mostrando 12pt como 16 píxeles CSS y después representa esos 16 píxeles CSS utilizando 32 o 48 píxeles de hardware. El píxel CSS es una unidad de referencia, por lo que los números de tu hoja de estilos nunca cambian: los píxeles de hardware adicionales solo hacen que el mismo tamaño se vea más nítido.

Recursos adicionales

• Unidades de longitud CSS - MDN
• Longitudes absolutas - Valores CSS de W3C