[thelist] Resizable Fonts

[Anthony Baker]

Hey All,

Wanted to chime in on this thread, and forward you an email
message I received from Douglas Bowman in response to a
similar question I posed to him on the subject. As many of
you may know, he was the key designer behind the Wired News
redesign.

Cheers,

Anthony

----------------------

Originally, "px" was determined to be the most reliable across browsers
(except Netscape 4 and certain versions of Opera). It's been used often
by designers because it seems to give them the most absolute control
over initial text size on the screen. The biggest problem with px units
is actually accessibility-related. IE/Win (even up to version 6.0) does
not allow type set in px to be resized. So if you happen to set type too
small for a user's preference, a good majority of them using IE/Win
won't be able to bump the text up in size.

Em's are generally thought to be more user-friendly because they're
entirely relative, and can be resized at will in any browser. The
problem with em's used alone, is (again) that they're entirely relative.
If they're used relative to the browser's default font size, this
default size can vary in different browsers, not allowing the designer
to at least predict a reliable starting type size.

The general theory that I've seen floating around in our circles over
the last year, is that CSS keywords (x-small, small, medium, etc...)
(http://www.w3.org/TR/CSS2/fonts.html#font-size-props) provide the most
reliable method for sizing type, and still allow resizing by the user.
The only issue with CSS keywords is that IE5/Win is off by one value. If
you specify "small", it gets rendered too large, like "medium" would be
in other compliant browsers. If you want type to be rendered at the
normal "small" size, you have to specify "x-small" for IE5/Win. Thus,
enter Tantek's box-model hack to save the day and correct the keyword
value just for IE5/Win. Todd Fahrner wrote about this for A List Apart:

http://www.alistapart.com/stories/sizematters/

In digging around a few weeks ago, I also discovered some notes from one
of Zeldman's lectures he gave recently about designing with CSS. He's
got a great summary which covers the same thing, albeit zeldman-style
with some notes about accessibility:

http://www.happycog.com/lectures/css/5.html

Actually, if you've dug around my CSS files (either for Wired News or
Stopdesign), hopefully you haven't found any "px" values for font-size.
I tend to use a keyword and percent combo so that I don't have to
constantly use that box-model hack to get the keywords right in
IE5.x/Win. You notice that everywhere that hack is used, it uglies up
the CSS, and requires an additional be-nice-to-Opera5 rule.

I like to set the font-size using keywords just once. Then I use percent
(%) or em values everywhere else to size type relatively to that one
keyword size. As far as I've noticed and tested, % and em are basically
identical. 1em = 100%, 2.5em = 250%, etc.

For instance, on stopdesign, I set the default size for the body element
to "small" (using "x-small" for IE5/Win). Then, for the Right Col or any
of the header elements, I use % values as relative sizes.

You have to be a little more careful using em's and % values since
they're relative to the font-size of their parent element, and not of
some global document size. 1.2em doesn't always mean the same size -- it
just means 1.2 times the size of the parent element's font-size. For
instance, you can imagine that type might get illegibly small in a
nested list scenario where you've sized the list item type with em's as
such:

li li {font-size: .8em;}

meaning that everytime a list item gets nested inside another, the type
size is reduced by another 80%, until it gets too small to read.

hope this helps. cheers,
.....
douglas bowman
http://www.stopdesign.com/