As someone with poor vision, I don't want "make everything bigger", and I don't want "make all the text bigger", I want "make the small text bigger".<p>(Or, ideally, "make small text and fiddly diagrams bigger, but leave most images alone", but let's walk before we try to run.)<p>So maybe "rems for body text, px for headings" is the way to go.
> <i>1px is equal to a single dot in a computer monitor or phone screen.</i><p>Far from always!<p>“For screen displays, it traditionally represents one device pixel (dot). However, for <i>printers and high-resolution screens</i>, one CSS pixel implies multiple device pixels. 1px = 1/96th of 1in.”<p>— <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/length</a>
This is one of the long form frontend blogs that I greatly enjoy, and learn sometime new every time. So, I am excited anytime a new one comes out. I hope with Josh releasing his own course[1], that the blog continues to provide excellent resources for "free".<p>[1](<a href="https://css-for-js.dev/" rel="nofollow">https://css-for-js.dev/</a>)
It'd be more accurate and illuminating to say that a px is an angle.<p><i>The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).</i>
- <a href="https://www.w3.org/TR/css-values-4/#absolute-lengths" rel="nofollow">https://www.w3.org/TR/css-values-4/#absolute-lengths</a><p>This explains why 1px is small on phones and large on televisions; the physical size varies by expected reader distance. The angle tries to stay constant, though in practice it gets rounded to the nearest multiple of the physical pixel size.
It's quite ironic how the font settings page for Chrome doesn't do well with different font sizes itself. They got the sidebar backwards and appeared to have used px for the font-size but em for the padding.
> <i>In theory, 1px is equal to a single dot in a computer monitor or phone screen.</i><p>Even in theory, this has never been true AFAIK. Pixels (px) are relative to the properties of the viewing device, the user's OS and browser settings, etc. The author appears to be confusing "physical pixel" with "logical pixel".