Pixels vs. Ems & Font Size
Response to “Pixels vs. Ems: Users DO Change Font Size”, and a look into the science of the CSS px.
Interesting article Evan, I came here to look at the data of users who are at the standard 16px default. While this article is a few years old, I wanted to comment on a few things which are part of current research on readability for the web.
Sweet 16px
16px as default is not an accident. This is functionally equivelent to 12pt in print, which has long been considred the "standard" size for 20/20 vision. More recent research such as by Lovie-Kitchin, indicates the critical size for best readability is about 2.4 times the acuity height. Without going into the math, this means an x-height of 9.4px, which depending on the x-height ratio is a font size of between 15.6px (ratio 0.6) to 21px (ratio 0.45).
If the 16px font has an x-height ratio of 0.5875, that's meets the critical size for 20/20. Webfont Verdana has a ratio of about 0.547, so its critical size is about 17px, still very close to the standard 16. Times New Roman though needs to be at 21px because it has a small 0.45 ratio.
In physical printing, 12pt was popular not so much as it was optimum, but it was readable for most and conserving of paper. Conserving paper is why some newspapers print as small as 8pt.
Getting to the pt
In the article you asked why someone would set the font smaller. Here's a good reason: 20/20 is not perfect vision. 20/12 is. And 20/16 is fairly common. Some who have had Lasik have their sight corrected to such levels, and are perfectly happy reading these smaller sizes. With the liited screen real estate of a cell phone, users capable to do so will likely set their phone’s text smaller.
Not to px on you…
But you might be interested regarding that the "px" unit has never meant a device pixel. The px is the canonical CSS unit, tied to the CSS reference px, which is part of the canvas abstraction layer. Back in the "olden days" (I started hand-coding HTML in the mid 90s), earlier versions of HTML would have length units that were indeed device pixels, such as for an image `<img height=600 ... >` notice though that the `px` is not there — in HTML, it was just that bare number, and there the bare number was in device pixels.
The CSS Reference px is specifically defined as the visual angle of 1.278 minutes of arc as subtended on the retina, and this is equal to a 96ppi display 28" from the viewer. But make no mistake, The CSS reference px is tied to the canvas, not to any device in particular.
This is important for setting web font standards as we are working on in WCAG 3, because it is the size as it lands on the retina that is important to readability. The chart below demonstrates the relative relationship to reference view distance.
