Basic advice on font-size keywords in CSS

[Doug Eaton]

I'd like to try setting up a CSS using font-size keywords instead of ems. I've found some good info at http://diveintoaccessibility.org/examples/fontsize.html and am looking for very basic guidance on font-size settings for the basic elements (<h1>-<h6>, <ul>, <ol>, <li>, etc.) as well as for complex selectors. This is my first attempt at creating a CSS, and I want to use relative font sizing. This seems like a much more manageable approach than the "ems" method I've been attempting. Basically, I want the items in a numbered list to have the same visible font characteristics as the <p> tag content. Apparently, that is a lot to ask from multilevel lists when one is using the "ems" method.

[SteveS]

Hi Doug,

Relative font sizing is where you use ems or percentage to set a font size relative to the parent font size. If you are setting the font size using an absolute, such as pt or px, you are not using relative sizing.

I have a preferencr for relative sizing, learned from this forum, as it offers scalability of font size to both the designer and the user. This can be an important consideration if you have any users who struggle to read the screen, ie anyone over 40, using 15 inch monitor, and so on.

If you set your absolute font size (eg 12 point) on the body selector and don't specify a font size for your paragraph or lists they should display as 12 point. You can force the issue by defining font size as 1 em if you wish.

Generally I use heading 1 as 2 ems, heading 2 as 1.75 ems and heading 3 as 1.5 ems. If I use lower heading levels I use bold and italic as well, beacause 1.25 ems can start to look very similar to 1em.

For page footers etc you can use .8 or .9 ems.

Remember with complex selectors you are likely to run into problems with the cascade - for example a list within a paragraph in the body might have 3 relative font sizes if you have set font size on each tag. so if the list is .75, the body .9 you end up with your original size (on the body tag) * .9 (paragraph) and * .75 (for the list). In basic design they tell you to keep the fonts to a minimum, and purists include variations on the font as individual fonts.

So, keep it simple. If you do relative font sizing is a great way to go.

[LTinker68]

And if you want to use the small, x-small, large, larger, x-large, etc., instead of ems or %, then you might want to do some research. For instance, unlike with ems or %, "x-small" may be one value in IE6 and another value in Firefox or even IE7. Ems and % are based on the character size of the font selected, so .8ems of Verdana on IE should be the same as .8ems of Verdana on Firefox. But it's up to the browser to determine how much smaller "x-small" is compared to "small". Is it equivalent to 80% in both browsers, or is it 80% in Firefox and 70% in IE? Perhaps someone whose more familiar with using the words instead of numbers will be able to answer those questions.

And I think you'll still have the cascading issue that you're worried about with ems and %. I'm not positive, though, since I've never used the words. For instance, if you set "small" for the <ol> tag, then is the <li> tag also set to "small", or is it by default smaller than the <ol> tag. In other words, is it in reality "x-small" or is it the same size as its parent tag? I glanced at the link you sent, but he didn't go down that many levels in his example. He only went down one level below the body, or to the same level as the <ol>/<ul> tags. He didn't go down to a third level where the <li> tag would reside.