Puntos y em para texto, ¿y el tamaño en html/css no se corresponde con photoshop?

[walvaRo]

Buenas noches o días. Tengo unas preguntas que no logro solventar.
Teniendo en cuenta que 12pt son lo mismo que 16px, que son a su vez equivalentes a 1em, (leer tabla de valores http://reeddesign.co.uk/test/points-pixels.html),
¿porqué un texto a 36pt en Photosop es mas pequeño que un texto a 3em en html/css si se supone que 3em equivalen a 36pt?
¿Tiene algo que ver la resolución de pantalla o la resolución de píxeles por pulgada seleccionada en el documento de photoshop?, ¿se ve un texto a tamaño 3em de manera diferente en cada dispositivo?, ¿Cómo puedo entonces diseñar un tema web en photoshop y que el tamaño de los textos y rotulos creados en photoshop sea equivalente y corresponda exactamente al de los textos posteriores en html/css medidos en em?

Un saludo, ojalá podáis sacarme de dudas u orientarme.

Muchísimas gracias de antemano.

[Rafael]

En pantalla todo es relativo. No se puede afirmar categoricamente que unos X pixeles equivalen a una medida fija como punto (1 pt = 1/72 pulgada).

Pongo un ejemplo. Si tu imagen la estás proyectando en una pared a 2 metros de distancia, mide un tamaño, y si la proyectas a 20 metros medirá bastante más.


Ahora. La em es una unidad relativa. Relativa al tamaño de la fuente usada.

Estos 2 casos son correctos.

M = 1 em
M = 1 em

En una hoja CSS primero defines tu tamaño de fuente base, digamos en pixeles, y de ahí ya relativamente con em, por ejemplo un título 1 como 2 em, o sea el doble de tu letra base.

Ahora, en cuanto al tamaño en Photoshop completamente depende de los dpi marcados. 72 puntos (pt) son una pulgada.

Si haces una letra de 72 puntos (una pulgada) con un doc con 72 dpi, la letra medirá 72 pixeles.

En cambio si tu doc trae asignados 300 dpi, la misma fuente de 72 puntos medirá 300 pixeles.