- From: Boris Zbarsky <bzbarsky@MIT.EDU>
- Date: Wed, 06 Jan 2010 22:57:08 -0500
- To: Ambrose LI <ambrose.li@gmail.com>
- CC: www-style@w3.org
On 1/6/10 10:08 PM, Ambrose LI wrote: > If you complain about text being unreadable because the font sizes > become too small when the screen resolution is too high The main issue right now is font sizes that are too _big_ when the screen resolution is high and the viewing distance is small. Simple example: The iPhone screen is 480px high and 320px wide, at 160dpi (so 3in high and 2in wide). Typical viewing distance for the iPhone is about 12-18 inches, right? So the visual angle subtended by an iPhone device pixel is between 0.93 and 1.4 of a reference CSS pixel as currently defined. Thus the obvious mapping of CSS pixels to device pixels on the iPhone is 1:1. Now a 12pt font on the iPhone, if pt is implemented as a physical unit, is 1/6 of an inch, so 27px or so. At the same time, IE and Webkit render a 12pt font always as 16px high, as does Gecko on most desktops. So web designers are using "12pt" when they really mean "16px", and in particular when they are ALSO using various absolute positioning hacks, margin hacks, etc, all sized in px. The best case scenario, then, is that your phone will show you 17 lines of text instead of the 30 it could show if the font were actually set to 16px. Note that here the combination of small screen size and high dpi makes the results particularly unfortunate... The more likely scenario you can experience by finding your typical website and using Gecko's text zoom (not full zoom) on it. In my experience, about 50-75% of sites break somewhat (text overlapping other text, backgrounds covering up some text, etc). About 30% of sites break badly (essential features like submit buttons or parts of videos the site is trying to show or whatnot not clickable due to being covered up by something else). > If the complaint is that we are ignoring mobile users, this means we need to > educate people (including myself) that we need to make a separate > style sheet for mobile devices that does not declare sizes. Or that doesn't declare sizes in nonsensical physical units, at least... Note that it never makes sense to use physical units for font sizes, as far as I can tell, if you don't know the approximate viewing distance of the target device. "12pt" fonts are just as broken on a projection screen, if implemented correctly (can you really read 12pt font from 15 feet away?). Note that the whole point of defining CSS pixels as a more or less constant viewing angle is that a font "looks" about the same size if it's sized in px, no matter what the output device. Note that viewing distance is not actually queryable via media queries, though you can probably approximate it by a combination of resolution, width, and device-width or some such... But viewing distance is what determines the ratio between a CSS px and a pt. > If you really ask me, I see it as illogical to drop or change the > definition of either pt or px. I don't think anyone is claiming this is ideal. It would be nice if CSS had better units for expressing resolution-independent and viewing-distance-independent lengths; unfortunately there are no such units. CSS attempted to correct for this by making px into such a unit, but there was backlash against using px for font sizing for various reasons and the use of pt for font sizing was too deeply ingrained without people _really_ thinking about what pt actually _means_ (which is not "a font that looks about this big", though that's how people treat it). If you have a better suggestion for resolving the above issues, I'd love to hear what it is. -Boris
Received on Thursday, 7 January 2010 04:11:10 UTC