RE: Text sizing

Sam
Thu, 06 Jul 2006 16:03:45 -0000

> Default font sizes: Firefox 18px, IE 16pt.  This amounts to about 2px of
> difference in the defaults

> Setting body {font-size:12px} (or any fixed size) will set both IE and
> Firefox identical display sizes.  To avoid diminishing the accessibility,
a
> user control should be provided on the page to increase or decrease the
> font-size for IE.

> I don''t quite get it. Why do you care about the 2px difference at
all?
> Your design is scalable (I assume this from the fact that you want to
> use a  font-resize control) and will look good in both cases.

I''ll try to answer as best I can, correct a mistake I made, and mention
another hack solution I came up with.

The point (of not controlling default font sizes) has been argued quite a
bit over the years. At my company, we''re all about designing fluid
layouts.
Most of my work is exactly that.  The 2px difference is normally not a
factor.  I have a couple of instances where the 2px becomes an annoyance.

One is a customer who *requires* a fixed 800x600 layout.  No vertical
scrolling.  We design the text to fit and if the user increases the
font-size because he wants larger text... well, he will get scrolling and
that''s OK.

We design content for this fixed layout , then test in Firefox and get a
surprise vertical scroll (in normal text view).  The Firefox 2px is just
enough to push it over the edge.

This isn''t a major problem, but it does seem like one that should be
controllable.  It would eliminate surprises, and unneeded revisions if the
difference were not present.

I may have a solution.

----------

I have a type-o above--- IE default is 12pt, which is almost exactly 16px.
Interesting that IE uses pts, every other browser I''ve queried using
getStyle shows px...

Every other browser I tested, Opera, Netscape, default to 16px.

Firefox default is 18px.

The hack-fix I had in mind was to continue to use percentages, but adjust
for Firefox as follows...

Body {font-size: 75%} // places browsers with 16px defaults to 12px (Opera,
IE, Netscape)

Body {font-size: 66%} // places Firefox with 18px default to 12px

It takes a couple of lines of JavaScript to set the Body Font-size
accordingly, but the results are very close.  The View Text-Size works well
too, (in all browsers) keeping the accessibility in place.