La diferencia entre el tamaño del texto CSS px y pt

En el diseño web CSS, las fuentes se usan a menudo y hay dos unidades de uso común para configurar el tamaño de fuente: px y pt. ¿Cuál es la diferencia entre estos dos?

px: píxel, píxel, la unidad más pequeña que se muestra en la pantalla;

pt: punto, punto, es una unidad de longitud estándar en la industria gráfica, 1 pt = 1/72 de pulgada;

En Windows, la configuración de visualización predeterminada define el texto como 96 ppp. Esto ilustra: 1 px = 1/96 de pulgada; y 1 pt = 1/72 de pulgada. Se puede concluir que en esta configuración, 1 px = 0,75 pt, la fuente 9 pt = 12 px.

Sin embargo, el usuario puede modificar el tamaño de ppp definido por el texto, por ejemplo, cambiarlo a 144 ppp. De esta manera, 1 px = 0,5 pt y el tamaño de fuente es 9 pt = 18 px. Un texto que originalmente estaba compuesto por 12 píxeles ahora debe estar compuesto por 18 píxeles. Con más píxeles, el texto se vuelve "más grande" y más fácil de leer.

Por lo tanto, la diferencia entre px y pt es que px cambiará con la resolución del monitor y pt cambiará con la configuración del tamaño de fuente del sistema Windows.