A diferença entre o tamanho do texto CSS px e pt

No CSS de web design, as fontes são frequentemente usadas e há duas unidades comumente usadas para definir o tamanho da fonte: px e pt. Qual é a diferença entre esses dois?

px: pixel, pixel, menor unidade exibida na tela;

pt: ponto, ponto, é uma unidade padrão de comprimento na indústria gráfica, 1pt = 1/72 polegada;

No Windows, as configurações de exibição padrão definem o texto como 96 dpi. Isto ilustra: 1px=1/96 polegada; e 1pt=1/72 polegada Pode-se concluir que nesta configuração, 1px=0,75pt, a fonte 9pt=12px.

Porém, o usuário pode modificar o tamanho de dpi definido pelo texto, por exemplo, alterá-lo para 144dpi. Desta forma, 1px=0,5pt, e o tamanho da fonte é 9pt=18px. Um texto que originalmente era composto por 12px agora precisa ser composto por 18px. Com mais px, o texto fica “maior” e mais fácil de ler.

Portanto, a diferença entre px e pt é que px mudará com a resolução do monitor e pt mudará com a configuração do tamanho da fonte do sistema Windows.