Using points or pixels for font-size in Web-based output?

[kmiz]

We have a large Help system that we generate as HTML 5. We are updating our CSS which currently specifies font-size in points. The only problem we are aware of is that the Text Resize command in IE doesn't work. I tested switching to ems which did enable the Text Resizing, but it also created enlarged fonts in unwanted places as we have a lot of nested styles in the project.
Since the Zoom feature works with points and pixels and is available in IE, Chrome, and Firefox, I'm thinking that the Text Resize not working is not so important.
I am thinking of switching from points to pixels for font-size.

My question is: Are there any practical advantages of this switch? Or, is it more the principle that points should not be used in a Web style sheet?
Thanks for any advice you might have.

[NorthEast]

Most modern browsers will handle resizing ok, I think it was just IE6 (and 7?) that would only resize if you used scalable (em or %) font sizes.

Regarding using pixels or points, it makes far more sense to use pixels for web-based outputs, as pixels are the actual screen units. Points could be rendered at different pixel sizes between different browsers, operating systems, and devices; since they're based on a nominal DPI.

If it were my project, I'd set the font sizes in ems (where 1em is the smallest size required), and fix/remove the font sizes on nested styles.
This would make it easier to make future changes, as the font size is set in one place (the body font-size).

It also means it is easy to change the font size and unit for different outputs/mediums - e.g. use different pixel sizes for web-based desktop and mobile outputs, or set it as a point size for PDF output.

[kmiz]

Thanks, Dave for your reply. I had been trying to pinpoint all the topics that have nested styles, but reading your post, I realized that just removing the font specification from all but a few styles that vary would be an easier way to tackle the problem.
And thanks for the information about the variability of points.
I am going to make another try at making ems work!

[ChoccieMuffin]

Take care with nested styles when you have font sizes set as percentages other than 100, or you can end up with a complete rats' nest of sizes that is impossible to untangle.

[NorthEast]

Take care with nested styles when you have font sizes set as percentages other than 100, or you can end up with a complete rats' nest of sizes that is impossible to untangle.

I tend to set the font size on the body tag, and set this to the smallest font size I require, as this will equal 1em.
Then all other font sizes are set in ems.

Generally speaking, I use very few font sizes - the majority of text is all 1em, apart from headings (h1-h6).

[ChoccieMuffin]

Dave, when you set the font size on the body tag, how do you set it? Do you, for example, specify Arial 8pt, or some other way?

Also, if the smallest font size you want is 8pt but the bulk of your text is bigger (e.g. 12pt if it were in print), how do you define your standard <p> - 1.5em?

How does that behave when you have nested items, e.g. a list containing list items containing paragraphs and sub-lists. Doesn't the font size get messed up, if you define <p> as 1.5em and <ul> (or <li>?) as 1.5em?

I'd love to do this properly but keep falling over my own feet on this kind of thing.

[NorthEast]

Dave, when you set the font size on the body tag, how do you set it? Do you, for example, specify Arial 8pt, or some other way?

Also, if the smallest font size you want is 8pt but the bulk of your text is bigger (e.g. 12pt if it were in print), how do you define your standard <p> - 1.5em?

How does that behave when you have nested items, e.g. a list containing list items containing paragraphs and sub-lists. Doesn't the font size get messed up, if you define <p> as 1.5em and <ul> (or <li>?) as 1.5em?

I'd love to do this properly but keep falling over my own feet on this kind of thing.

I would set the body font-size in pixels (px) for help and points (pts) for PDF; i.e. set these in each medium.

In my projects, the standard (1em) size is the size of the majority of the text; i.e. that used for paragraphs, lists, etc.
I don't use a smaller font size than this standard; my idea is that you choose a good size for reading, so nothing should be smaller than this.

Most items will inherit from body, so I only need to set font sizes when I need a different size or if a style doesn't inherit; such as:

- headings h1-h6 (for different sizes)
- some MadCap| styles (because they don't inherit)
- the table tag (because it doesn't inherit)
- code sample styles (different size, due to font face)

I don't get any problems with nested font sizes, since I use a standard size throughout and only really change it for headings.

So perhaps in your case, you should set the body font-size to that used by the bulk of your text.

[ChoccieMuffin]

Thanks Dave, that's really helpful, and a very clear explanation.

The reason I might have a smaller font size might be for footers, copyright text, that kind of thing, so I picked THAT as the font size for <body> and made <p> etc a percentage of that, e.g. 110%. (At one stage a long time ago I used to have table text or list text (can't remember which) as half a point smaller but gave that up as a very bad idea.) So that's where I got bitten by the nested font sizes orc.