[WEB4LIB] Fonts & CSS

[Thomas Dowling]

At 09:33 AM 8/7/2002, Jeremy Foster wrote:
>I'm adding CSS to our website but I  am confused about what to do with the 
>old font tags now.
>
>I like the idea of getting rid of all the font tags and just using CSS but 
>the Accesability guidelines say that I should use them but also keep the 
>font tags for older browsers.

What accessibility guidelines are you referring to that suggest keeping 
font tags?  I recommend this one instead: 
<http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#gl-structure-presentation> 
:-)

I would advise losing font tags entirely.  In general, changes to font 
sizes should be handled very gingerly, and always using relative units of 
measurement.  You may need to use some of the tricks of the trade to 
prevent Netscape 4 from misapplying font size changes in nested 
elements--see below.


>By doing this aren't I making it usless to use the CSS tags.. or is this 
>simple one of those things we have to do redundently so that both old and 
>new browsers will view the fonts correctly?


At this point (and I also am not trying to heat up the flames), I do not 
feel terribly compelled to fine tune page presentation for "old" browsers - 
which I take to mean Netscape 4.x.  I'd say, first, to abandon the idea of 
"viewing fonts *correctly*" as there is no such thing on the web.  Think in 
terms of "viewing fonts *as suggested*--barring system limitations and user 
overrides."  Then accept that software that was passe five years ago won't 
always understand the subtleties of your suggestions, but will display your 
content comprehensibly.

What many CSS designers do is to establish a safe base design--a padded 
room where Netscape 4.x won't hurt itself--and put style properties known 
to confuse it in one of several places where it can't find it.  For example:

=========
/* Since NS4 doesn't get imports */
@import fun-stuff.css
/* And the bare bones stuff goes here */
body, th, td {
   font-face: "Trebuchet MS", Arial, sans-serif;
   color: #123;
   background: #FED;
}
=========

Or:

=========
/* Bare bones stuff */
body, th, td {
   font-face: "Trebuchet MS", Arial, sans-serif;
   color: #123;
   background: #FED;
}
media screen, print {
   /* Since NS4 doesn't understand multiple media */
   /* Fun stuff goes here */
   ul li {
     font-size: 95%;
   }...
=========



Thomas Dowling
OhioLINK - Ohio Library and Information Network
tdowling at ohiolink.edu