[thelist] CSS Font Sizes, was one more thing about...

Calum I Mac Leod calum at ciml.co.uk
Sat Feb 24 10:41:32 CST 2001


[ My first post here too.  Hello, Evolt listers. ]

Charles F. Johnson:
> Nyal Bartch <nyalb at zyggher.com> typed:
<snip>
> > Do Netscape and
> > IE versions for Windows and Macs primarily turn out the same results?
<snip>
>
> that depends on a lot of things. font sizes can be *very* different unless
> you use a stylesheet to define fonts in pixel sizes, just for starters.
<snip>

Some time ago, Tod Fahrner posted the following, now infamous, screenshot of
www.microsoft.com in IE on Mac.
http://style.metrius.com/font_size/points/font_wars.GIF

Also, this appeared in "Mozilla News" some time ago:
  "Mac users (and I hear X11 also) are having a = harder and harder
   time reading on the Web as more and more content is authored
   (ignorantly in the general case) assuming MS Windows' default
   logical = resolution of 96ppi"

The main problems are that Mac and Windows have different default logical
resolutions, and authors use crazy CSS units.

  Windows: 96dpi
  Mac: 72dpi
  X11: 74dpi (_I think_)

However, you can start X with the -dpi option, or change the (incredibly
stupidly named) "font size" setting in Win9x.  Mac has a similar method to
change the logical res.  The Windows box I'm using now is set to 82dpi,
which exactly matches my 17" monitor at 1024x768.

Why does this matter?  Well, point measurements are very useful in
typography as they allow the easy expression of exact text sizes.  One point
is _always_ 1/72", early Mac monitors were made with pixels exactly this
size, hence the default.  Unless the user has calibrated their GUI (and very
few do), they're stuck with the default.  If you set text at 18pt then the
browser tries to render it at 1/4", and the windowing environment uses the
"logical resolution" setting to decide how many pixels to use.

In a default Mac that's 18 pixels (18/72*72) and in a default Windows it's
24 pixels (18/72*96).  On the same size and resolution of screen, the pt
sized text is 25% smaller on a Mac (and generally similar on X).  This is co
nsidered a Bad Thing.

One day, output devices will be well calibrated (as printers largely are
now).  Either pt settings will be ignored by browsers (which would be a
shame, as there are times when physical lengths are useful), or the same
page will have a _very_ hard time being legible on a 4" megapixel screen
(>200dpi) and a 96" home-entertainment projection system (<20dpi).

http://www.w3.org/TR/REC-CSS1#length-units
  "Absolute length units are only useful when the
   physical properties of the output medium are known."

px is slightly better for screen use (mainly because a CSS px does *not*
always equal a pixel) but doesn't take into account user preferences.

EMs and keywords should be the answer, but the very horrible IE3.0 unit bug
breaks EM sized text (200% sizes font is rendered 2 pixels high).  Also CSS
keywords were misinterpreted in Nav4.

% sizes are nice, except that Nav4 breaks the cascade rules (on headings)
and because the HTML tags need a newline character in the source (completely
at odds with SGML & XML) to close a tag properly (from a CSS POV).  Also, it
can be a nightmare to keep track of the size of a P in an LI in a UL in a TD
in a TABLE in a BODY, where they each have % sizes.

While % are fine with very careful use, <BIG> and <SMALL> are the easiest
way to size fonts safely.  :-(

Calum
--






More information about the thelist mailing list