Reference Pixel
Found out something interesting about those that are evangelists for a cause but use the cause for their own ends. In this case, the web site for MG Web Services was held up as not “embracing high resolution” monitors and one of the tutorials was “…not holding well. These screenshots are at 1280 with min font-size at 24px.”
Some thing didn’t seem right about this to me, it would seem most people simply don’t use text at 24 pixels high unless they are reading their monitor from across the room and using a wireless keyboard/mouse. I use a Bluetooth keyboard-mouse myself, but a Ctrl+ once or twice to increase the text size is usually more than enough to make something big enough to read when a little further away from the screen, and my eyes are not good. Having a web site layout get a little mucked up when someone re-sizes the text has never bothered me, but seeing it completely blown out with someone just visiting it was bothersome, but no more.
The answer came from one of the tutorials itself, writing the first two have been an invaluable learning exercise for myself and they are still leading to new stuff. For this one, the CSS 1 Spec had the answer right on page one no less. If you have another look at the screenshot in question, notice where it says “One inch = 160DPI”. The problem is, 160 DPI is not yet a “typical” computer display as far as I know. No problem, the CSS spec has an answer for that too, and it’s called a “reference pixel” and that’s about a 90 DPI one, not 160 and things work just fine at the recommended size. The User-Agent is the one that needs to rescale, not most of the world that is already and still using the 90 DPI reference model.
Pixel units…… are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested reference pixel is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm’s length.
And then I went back and revisited the other comment about it “not holding up well”, and it’s like doh! The reason it’s not holding up well is because the screen shot is of the example site we’re trying to fix, not the sample site that is fixed! Note to myself, always look at the address bar and make sure criticism is coming from where you think it is.
