This article makes some good points but it's missing a bit of history. The reference pixel is defined at 96dpi because that's how Windows treated the screen in the days before high-dpi support. Mac OS treated the screen as 72dpi in the pre-retina days but most early websites were built to look correct on Windows. That's why MS Office fonts look too small on the Mac to this day: 26% too small to be precise.
This explains why CSS uses a human-eye based definition of the reference pixel: to escape from the Windows and Mac OS idea of the having a "logical dpi" which differs from the screen's actual, physical dpi. Indeed, Windows and Mac OS can not agree on what an "inch" is!
Go ahead and open up Word and Pages on the Mac and create a 12pt font - see the difference! This is the mess that the CSS reference pixel fixes.
> This article makes some good points but it's missing a bit of history. The reference pixel is defined at 96dpi because that's how Windows treated the screen in the days before high-dpi support. Mac OS treated the screen as 72dpi in the pre-retina days but most early websites were built to look correct on Windows. That's why MS Office fonts look too small on the Mac to this day: 26% too small to be precise.
The only way I can understand this is backwards -- a Windows "pixel" is 1/96 of an inch. (?) A Mac "pixel" is 1/72 of an inch; much larger. Wouldn't a windows font appear too large if displayed on a Mac?
This explains why CSS uses a human-eye based definition of the reference pixel: to escape from the Windows and Mac OS idea of the having a "logical dpi" which differs from the screen's actual, physical dpi. Indeed, Windows and Mac OS can not agree on what an "inch" is!
Go ahead and open up Word and Pages on the Mac and create a 12pt font - see the difference! This is the mess that the CSS reference pixel fixes.