pt
versus px
visual test to demonstrate that 1pt = 1.333px
as per CSS Values and Units Module Level 3 - 5.2. Absolute lengths.
as 1pt = 1/72th of 1in
and 1px = 1/96th of 1in
, 1pt = (96/72)px = 1.333px
as an additional exercise, take a ruler and measure the actual physical size the pt
blocks are being rendered at on your particular screen, and see if they match their actual real-world measurement (hint: the 72pt
block should be 1in
wide/high if that was the case). They won't, or at least can't be guaranteed to be across devices, as pt
and other "physical" units are in fact anchored on the reference px
and will vary depending on all sorts of factors, such as actual screen size, screen resolution, viewport settings, browser settings, OS settings, user settings, etc.
note that this page uses <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
to force an "ideal" viewport.