Echa un vistazo a este excelente artículo en CSS-Tricks:

• px – em – % – pt-keyword

Tomado del artículo:

Pt

La unidad de medida final en la que es posible declarar tamaños de fuente es el valor de puntos (pt). Los valores de punto son solo para imprimir CSS! Un punto es una unidad de medida utilizada para la tipografía de tinta sobre papel en la vida real. 72pts = una pulgada. Una pulgada = una pulgada de la vida real como-en-una-regla. Ni un centímetro en una pantalla, que es totalmente arbitraria en función de la resolución.

Al igual que los píxeles son precisos en los monitores para el tamaño de la fuente, los tamaños de puntos son precisos en el papel. Para obtener los mejores resultados entre navegadores y plataformas al imprimir páginas, configure una hoja de estilo de impresión y ajuste el tamaño de todas las fuentes con tamaños de punto.

Para una buena medida, la razón por la que no usamos tamaños de puntos para la visualización de la pantalla (aparte de que sea absurdo), es que los resultados entre navegadores son drásticamente diferente:

Px

Si necesita un control detallado, el tamaño de las fuentes en valores de píxel (px) es una excelente opción (es mi favorita). En una pantalla de computadora, no es más preciso que un solo píxel. Con el tamaño de las fuentes en píxeles, literalmente le estás diciendo a los navegadores que rendericen las letras exactamente ese número de píxeles en altura:

Windows, Mac, aliased, anti-aliased, cross-browsers, no importa, una fuente establecida en 14px tendrá 14px de altura. Pero eso no quiere decir que todavía no habrá alguna variación. En una prueba rápida a continuación, los resultados fueron ligeramente más consistentes que con las palabras clave, pero no idénticos:

Debido a la naturaleza de los valores de píxel, no se producen en cascada. Si un elemento padre tiene un tamaño de píxel de 18px y el hijo es de 16px, el hijo será de 16px. Sin embargo, la configuración de tamaño de fuente se puede usar en combinación. Por ejemplo, si el padre se establece en 16px y el hijo se establece en más grande, el hijo de hecho saldría más grande que el padre. Una prueba rápida me mostró esto:

"Larger" cambió los 16px del padre a 20px, un aumento del 25%.

Los píxeles han recibido un mal ajuste en el pasado por problemas de accesibilidad y usabilidad. En IE 6 y siguientes, los tamaños de fuente establecidos en píxeles no pueden ser redimensionados por el usuario. Eso significa que nosotros cadera jóvenes diseñadores saludables pueden establecer el tipo en 12px y leerlo en la pantalla muy bien, pero cuando la gente un poco más en el diente ir a subir el tamaño por lo que pueden leerlo, no pueden. Esto es realmente culpa de IE 6, no nuestra, pero tenemos lo que tenemos y tenemos que lidiar con ello.

Establecer el tamaño de fuente en píxeles es el método más preciso (y me parece el más satisfactorio), pero tenga en cuenta el número de visitantes que aún usan IE 6 en su sitio y sus necesidades de accesibilidad. Estamos justo en el borde de la sangría de no tener que preocuparnos más por esto.

px ≠ píxeles

Todas estas respuestas parecen ser incorrectas. Contrario a la intuición, en CSS la px no es pixels . Al menos, no en el simple sentido físico.

Lea este artículo del W3C, EM, PX, PT, CM, IN {, sobre cómo px es una unidad "mágica" inventada para CSS. El significado de px varía según el hardware y la resolución. (Ese artículo es fresco, última actualización 2014-10.)

Mi propia forma de pensar sobre ello: 1 px is the size of a thin line intended by a designer to be barely visible.

Para citar ese artículo :

La unidad px es la unidad mágica de CSS. No está relacionado con la fuente actual y tampoco con las unidades absolutas. La unidad px se define como pequeña pero visible, y de tal manera que se puede mostrar una línea horizontal de 1px de ancho con bordes afilados (sin anti-aliasing). Lo que es afilado, pequeño y visible depende del dispositivo y de la forma en que se usa: ¿lo sostienes cerca de tus ojos, como un teléfono móvil, a la longitud de los brazos, como un monitor de computadora, o en algún lugar intermedio, como un libro? Por lo tanto, el px no se define como una longitud constante, sino como algo que depende del tipo de dispositivo y su uso típico.

Para tener una idea de la apariencia de un planeta x, imagine un monitor de computadora CRT de la década de 1990: el punto más pequeño que puede mostrar mide aproximadamente 1/100 de pulgada (0.25 mm) o un poco más. La unidad px obtuvo su nombre de esos píxeles de pantalla.

Hoy en día hay dispositivos que podrían en principio muestra puntos agudos más pequeños (aunque es posible que necesites una lupa para verlos). Pero los documentos del siglo pasado que usaban px en CSS siguen siendo los mismos, sin importar el dispositivo. Las impresoras, especialmente, pueden mostrar líneas nítidas con detalles mucho más pequeños que 1px, pero incluso en impresoras, una línea 1px se ve muy igual que se vería en un monitor de computadora. Los dispositivos cambian, pero el px siempre tiene la misma apariencia visual.

Ese artículo da alguna orientación sobre el uso de pt vs px vs em, para responder a esta Pregunta.

Un pt es 1/72 de pulgada y es una medida inútil para cualquier cosa que se representa en un dispositivo que no calcula el DPI correctamente. Esto hace que sea una opción razonable para la impresión y una opción terrible para el uso en la pantalla.

Un px es un píxel, que se asignará a un píxel de pantalla en la mayoría de los casos.

CSS proporciona un montón de otras unidades, y cuál debe elegir depende de lo que está configurando el tamaño de.

Un píxel es genial si necesita dimensionar algo para coincidir con una imagen, o si desea un borde delgado.

Los porcentajes son excelentes para los tamaños de fuente ya que, si los usa de manera consistente, obtiene tamaños de fuente proporcionales a las preferencias del usuario.

Los Ems son excelentes cuando desea que un elemento se dimensione en función del tamaño de la fuente (por lo que un párrafo podría ampliarse si el tamaño de la fuente es mayor)

And y así sucesivamente.

Pt es una derivación (abreviatura) de "punto" que históricamente se usó en caras de tipo de impresión donde el tamaño se "midió" comúnmente en "puntos" donde 1 punto tiene una medida aproximada de 1/72 de pulgada, y por lo tanto una fuente de 72 puntos sería de 1 pulgada de tamaño.

Px es una abreviatura de "pixel", que es un simple "punto" en una pantalla o una impresora de matriz de puntos u otra impresora o dispositivo que se renderiza en forma de puntos , a diferencia de las viejas máquinas de escribir que tenían un tamaño fijo, sólido delantero que dejó una huella del personaje presionando sobre una cinta, dejando así una imagen de un tamaño fijo.

Estrechamente relacionados con el punto están los términos "mayúscula" y "minúscula" que históricamente tenían que ver con la selección de los caracteres tipográficos fijos donde los caracteres "captital" se colocaban en una caja (mayúscula) por encima de los caracteres no captitalizados que se colocaban en una caja de abajo, y por lo tanto el caso "inferior".

Había diferentes cajas (casos) para diferentes fuentes tipográficas y tamaños, pero todavía y mayúsculas y minúsculas para cada uno de ellos.

Otro término es la "pica" que es una medida de un carácter en la fuente, por lo tanto una pica es 1/6 de pulgada o 12 unidades de punto de medida (12/72) de medida.

Estrictamente hablando, la medición es en computadoras de 4.233 mm o 0.166 in, mientras que el punto antiguo (americano) es 1/72.27 de pulgada y el francés es de 4.512 mm (0.177 in.). Así mi declaración de "aproximado" con respecto a la mediciones.

Además, las máquinas de escribir utilizadas en las oficinas tenían un tamaño "Elite" o "Pica" donde el tamaño era de 10 y 12 caracteres por pulgada repectivly.

Además, el "punto", antes de la estandarización, se basaba en el tamaño del "pie" de los tipógrafos metálicos, el tamaño de la huella básica de un carácter, y variaba un poco en tamaño.

Tenga en cuenta que un "pie" tipográfico fue originalmente de una impresora fallecida pie real. Un pie tipográfico contiene 72 picas o 864 punto.

En cuanto al uso de CSS, prefiero usar EM en lugar de px o pt, obteniendo así la ventaja de escalar sin pérdida de ubicación y tamaño relativos.

EDITAR: Solo para completar puede pensar en EM (em) como un elemento de medida de una altura de fuente, por lo tanto 1em para una fuente de 12pt sería la altura de esa fuente y 2em sería el doble de esa altura. Tenga en cuenta que para una fuente 12px, 2em es de 24 píxeles. Por lo tanto, 10px es típicamente 0.63 em de una fuente estándar como la" mayoría " de los navegadores basados en 16px = 1em como tamaño de fuente estándar.