CSS Best Practices: Specifying font sizes 1

[mkrausnick]

I'm redesigning a site that uses tables for formatting to use XHTML and CSS. This is my first such effort.

Several sizes of text are present on each page. Currently the pages use size numbers, i.e. <FONT SIZE=x> or <FONT SIZE=+X>.

I'll create a CSS tag for each text size, but should I be using absolutes in px/pt/cm, percentages (each size=120% of prior size), size numbers 1-7, or keywords (xx-large, x-large, medium, etc).

My first priority is standards compliance but cross-browser functionality is also important. The user should be able to enlarge or reduce the text if desired. More than 90% of my site's viewers use IE6, and most of the remainder use NS4.7.

Opinions please?


Mike Krausnick
Dublin, California

 

[tviman]

Use 'px' to size your fonts. It gives you a greater range of sizes and matches the font sizes used by graphics programs.

There's always a better way. The fun is trying to find it!

 

[Vragabond]

If you want users to be able to manipulate the sizes of fonts in IE then the only way is em. They are also recommended by w3 as far as I know. I use em to define all the fonts on my pages and I have no compliance problems on IE6, IE5, Opera, Mozilla, IE Mac and Safari. Haven't tested other browsers. I don't know though how good is the support for em in NN4.7.

 

[ChrisHunt]

To add another alternative...

Vragabond's right about avoiding px, and ems are one way to go - but not the only one. Since you're already working within the framework of seven <font> sizes, consider using font size keywords. Unfortunately there are differences between some browsers as to exactly what size the fonts are - but there's a workaround available at

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

.

I'd also be cautious about creating "a CSS tag for each text size". In general you should resist the temptation to create CSS classes called "small", "big", etc. Better to name your classes after the actual content - "maintext", "footnote", etc. That way, if you decide to change the way those bits of content are presented (which is why you're going with CSS in the first place isn't it?) your class names will still make sense.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[mkrausnick]

As usual, top-flight advice. Thank you all.

Mike Krausnick
Dublin, California