W3C home > Mailing lists > Public > www-style@w3.org > January 2010

Re: Making pt a non-physical unit

From: Boris Zbarsky <bzbarsky@MIT.EDU>
Date: Wed, 06 Jan 2010 22:57:08 -0500
Message-ID: <4B455B94.20905@mit.edu>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:23 GMT