Convierte puntos tipográficos a píxeles

El punto es una unidad de imprenta. Un punto mide 1/72 de pulgada, es decir 0,3528 mm, y esa es la medida que te dan Word, InDesign e Illustrator cuando fijas el cuerpo de letra. El píxel es una unidad de pantalla y en una hoja de estilos equivale a 1/96 de pulgada, o sea 0,2646 mm [1]. Toda la conversión se reduce a la relación entre esos dos números: 96 dividido entre 72 da 1,333.

De ahí sale la pareja que cualquier desarrollador se sabe de memoria: 12 pt son 16 px. Dieciséis píxeles es el tamaño de texto que trae por defecto cualquier navegador y el valor que toma un rem, así que un documento compuesto a doce puntos lleva exactamente el mismo cuerpo a una página web.

El convertidor te sirve si entregas una maqueta a desarrollo, si montas una firma de correo o si recibes una especificación en puntos mientras trabajas en una herramienta que habla en píxeles.

Más abajo encontrarás una tabla con 30 cuerpos de letra, otra con los grosores de trazo, la comparación de cinco sistemas de puntos y las instrucciones para cambiar la unidad en Illustrator, Photoshop, InDesign, Affinity, Inkscape, Figma y Word. El camino inverso lo cubre el convertidor de píxeles a puntos.

La fórmula tiene una sola forma: píxeles = puntos × 96 ÷ 72, es decir multiplicar por 4/3. En sentido contrario basta con multiplicar los píxeles por 0,75. Dieciocho puntos dan 24 px, veinticuatro puntos dan 32 px y 36 pt dan 48 px exactos.

Setenta y dos puntos son exactamente una pulgada, así que 72 pt equivalen a 96 px y a 25,4 mm. Esa igualdad va bien como comprobación cuando echas la cuenta de cabeza. También funciona hacia abajo: 0,75 pt son justo un píxel y 1,5 pt son dos.

¿Y de dónde sale el 96? El W3C fijó que una pulgada en la hoja de estilos tiene 96 píxeles y describió el píxel de referencia como el ángulo visual de un píxel en una pantalla de 96 dpi mirada desde la distancia de un brazo extendido [1]. El número en sí es anterior a la web y viene de una decisión tomada en Microsoft en los años ochenta.

La pantalla del primer Macintosh tenía 512 × 342 puntos de luz y una densidad de 72 PPI, elegida para que un píxel cayera sobre un punto tipográfico. Los monitores de PC andaban por ahí, pero en Microsoft se dieron cuenta de que un monitor está aproximadamente un tercio más lejos de los ojos que una hoja de papel en la mano, de modo que el texto en pantalla tiene que ser más grande. Windows empezó a declarar una densidad aumentada justo en ese tercio: para pantallas de 72 PPI reales anunciaba 96 PPI [2]. El texto se volvió legible, un cuerpo once en Windows equivalía a un ocho en Macintosh, y el 96 se quedó en el sistema, luego en los navegadores y al final en el estándar CSS.

Durante casi toda la historia de la imprenta el punto significó una cosa distinta en cada país y cada fundición tipográfica manejaba sus propias medidas. Pierre Simon Fournier fue el primero en poner orden, en 1737, cortando sus punzones a una escala de 72 puntos por pulgada parisina. Medio siglo después François-Ambroise Didot ató su punto a 1/864 del pie del rey, de donde salieron 0,376065 mm a 20 °C, y esa medida se extendió por toda la Europa continental [3].

Doce puntos Didot forman un cícero, que mide 4,512 mm. El nombre viene de Venecia: en 1469 Juan y Vindelino de Espira imprimieron las Epistolae ad familiares de Marco Tulio Cicerón con un tipo exactamente de ese cuerpo [4]. En el mundo anglosajón la unidad equivalente se llama pica.

El valor redondo llegó con PostScript. Adobe decidió en 1984 que un punto mediría exactamente 1/72 de pulgada y Apple montó sobre eso la tipografía del Macintosh, cuya pantalla tenía entonces 72 píxeles por pulgada. Con ese punto calcula el convertidor de arriba, y es la definición que repite el estándar CSS [1]. Doce de esos puntos forman una pica, que a 96 DPI son 16 píxeles exactos y a 300 DPI son 50 — ese paso lo calcula el convertidor de picas a píxeles.