¿Debo usar pt o px?

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

• px - em - % - pt - palabra clave

Tomado del artículo:

pt

La última unidad de medida en la que es posible declarar tamaños de fuente es en valores de puntos (pt). ¡Los valores de puntos son solo para CSS de impresión! Un punto es una unidad de medida utilizada para la tipografía en papel con tinta de la vida real. 72pts = una pulgada. Una pulgada = una pulgada de la vida real como en una regla. No es una pulgada en una pantalla, que es totalmente arbitraria según la resolución.

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

Por si acaso, la razón por la que no usamos tamaños de punto para la pantalla (además de ser absurdo), es que los resultados entre navegadores son drásticamente diferentes:

px

Si necesita un control detallado, dimensionar fuentes en valores de píxeles (px) es una excelente elección (es mi favorita). En una pantalla de computadora, no puede ser más preciso que un solo píxel. Al dimensionar fuentes en píxeles, literalmente está diciendo a los navegadores que representen las letras exactamente con ese número de píxeles de altura:

Windows, Mac, con alias, sin alias, entre navegadores, no importa, una fuente establecida en 14px será de 14px de altura. Pero eso no quiere decir que no seguirá habiendo 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 propagan. Si un elemento padre tiene un tamaño de píxel de 18px y el hijo tiene 16px, el hijo será de 16px. Sin embargo, las configuraciones de tamaño de fuente se pueden utilizar en combinación. Por ejemplo, si el padre se estableció en 16px y el hijo era más grande, el hijo saldría más grande que el padre. Una prueba rápida me demostró esto:

"Más grande" elevó los 16px del padre a 20px, un aumento del 25%.

Los píxeles han tenido mala reputación en el pasado por preocupaciones de accesibilidad y usabilidad. En IE 6 y versiones anteriores, los tamaños de fuente establecidos en píxeles no pueden redimensionarse por el usuario. Eso significa que nosotros, los jóvenes y saludables diseñadores modernos, podemos establecer el tipo en 12px y leerlo en la pantalla sin problemas, pero cuando las personas mayores intentan aumentar el tamaño para poder leerlo, no pueden. Esto es realmente culpa de IE 6, no nuestra, pero tenemos lo que tenemos y tenemos que lidiar con eso.

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

Un pt es 1/72 parte de una pulgada y es una medida inútil para cualquier cosa que se renderice en un dispositivo que no calcule correctamente los DPI. Esto lo convierte en una elección razonable para impresión y una elección terrible para su uso en pantalla.

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

CSS proporciona una serie de otras unidades, y cuál elegir depende de lo que estás estableciendo el tamaño.

Un píxel es genial si necesitas dimensionar algo para que coincida con una imagen, o si quieres un borde delgado.

Los porcentajes son ideales para tamaños de fuente, ya que, si los usas de manera consistente, obtendrás tamaños de fuente proporcionales a las preferencias del usuario.

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

... y así sucesivamente.

Pt es una derivación (abreviatura) de "punto" que históricamente se utilizaba en tipos de letra impresos donde el tamaño comúnmente se "medía" en "puntos" donde 1 punto tiene una medida aproximada de 1/72 de pulgada, por lo tanto, un tipo de letra de 72 puntos sería de 1 pulgada de tamaño.

EDICIÓN: Nota para aclarar Hay aproximadamente 72 (72.272) puntos en una pulgada o 2.54 cm. El punto fue establecido por primera vez por el tipógrafo milanés, Francesco Torniella da Novara (c. 1490 - 1589) en su alfabeto de 1517, L'Alfabeto. (puedes buscar diversas referencias sobre esto)

px es una abreviatura de "píxel", que es un simple "punto" en una pantalla o en una impresora de matriz de puntos u otra impresora o dispositivo que se representa de forma puntual, a diferencia de las antiguas máquinas de escribir que tenían un golpeador sólido de tamaño fijo que dejaba una marca del carácter al presionar sobre una cinta, dejando así una imagen de 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 "mayúsculos" se colocaban en una caja (case) por encima de los caracteres en minúscula que se colocaban en una caja debajo, y por lo tanto la "minúscula".

Existían diferentes cajas (cases) para diferentes fuentes y tamaños tipográficos, pero siempre una "mayúscula" y una "minúscula" para cada uno de ellos.

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

Estrictamente hablando, la medida en computadoras es de 4.233 mm o 0.166 pulgadas, mientras que el punto antiguo (americano) es 1/72.27 de pulgada y el francés es de 4.512 mm (0.177 pulgadas). Por lo tanto, mi afirmación de "aproximado" con respecto a las medidas.

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

Además, el "punto", antes de su estandarización, se basaba en el tamaño del "pie" del tipógrafo de metal, el tamaño de la huella básica de un carácter y variaba ligeramente en tamaño.

Nota que un "pie" tipográfico originalmente era de un pie real de un impresor fallecido. Un pie tipográfico contiene 72 cicas o 864 puntos.

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.

EDICIÓN: Solo por completitud puedes pensar en EM (em) como un elemento de medida de la altura de una 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. Ten en cuenta que para una fuente de 12px, 2em equivaldría a 24 píxeles. Entonces, 10px típicamente es 0.63em de una fuente estándar ya que "la mayoría" de los navegadores se basan en 16px = 1em como tamaño de fuente estándar.

Me gusta px para tener un control preciso sobre el diseño y em cuando trabajo con sitios que necesitan ser fluidos o escalar con el tamaño del navegador. Los porcentajes son un fastidio para trabajar y pt es para impresión.