Pt vs em, px, etc

[DoTheWriteThing]

I'm setting up a Flare doc for use as a template and my manager suggests we choose 10 pt as the default font size but in Flare this is set in em units by default, and this setting is inherited from somewhere, from where I am not sure. What are members thoughts on setting font-size in the body, to point size as opposed to using the em proportional units, and then setting it with em in child tags, e.g. para, ? Is there any problem with that approach?

[devjoe]

in, mm, pt, etc. are physical lengths. (in is inches, and pt is points, which are 1/72 of an inch.) These are appropriate for a document that is expected to be printed (i.e. a print medium style sheet) or a format like a PDF that represents a printed document. You can also use them in on-screen content where you want the text and images to scale proportionally on different devices.
px is pixel units. This is good if you have help content mixed with small images where you want the images to appear unscaled and need to the text does not scale out of proportion with the images. In print this gets converted to an physical length, typically 1/96 inch.
em is a unit relative to the specified font size. When you use em sizes, you specify a base font size (perhaps in the body element) of one of the other types above (for help, the user's browser settings may determine this if you don't) and every other size is relative to what the font size would otherwise be for that element. So an element which is 2em is twice as large as the base font.

[ChoccieMuffin]

It very much depends what your output is going to be. If you set a size in points, will it make sense if you've got an online output?

My approach is heading this way, though it's taken me a while to get there.
Online outputs
Define this in the DEFAULT medium. (You could have a separately named medium, but then you don't get the benefit of inheritance.)
In the BODY bit, set the number of pixels to, say, 16px (this is generally equivalent to 12pt font) to be the most commonly used size.
For font sizes, line widths, padding, margins, and other size-y bits, use %, or em, or rem (only recently discovered, which helps avoid problems with font sizes in nested lists).
Taking this approach, the end user can decide to increase the font size of their display and it'll change. If you set the font size for <p> at 16 pixels, then even if they decide to make the font larger, it'll actually just stay as 16 pixels.

Printed outputs
In separate mediums for your PDF and print outputs change the font-size setting in BODY to whatever font size you want. You don't need to change the values for your other styles because you have just defined the 100% or 1em setting, so if you have another bit with, say, 80% it'll end up being 10pt.

You can google "font size conversion" to get a table that shows the equivalents.

[NorthEast]

Yeah, I agree with CM - and it's what I use for my projects.

I use units that make sense for the output - so that's pixels (px) for HTML5 (screen) output, and points (pt) for PDF (printed) output.
So to do this, I set a 'default' size/unit on the body tag, and use em units for font sizes on styles.

For example:

Code: Select all

body { font-size: 14px; }

@media print 
{
   body { font-size: 12pt; }
}

p { font-size: 1em;}
h1 { font-size: 2em; }

This would mean paragraph (p) text is 1em=14px/12pt for screen/print outputs, and h1 is 2em=28px/24pt for screen/print outputs.
(Technically, you don't need to specify p as 1em, as it's 1em by default - but it helps illustrate the example.)

The advantage is that you just need to set one font size in ems for all your styles, and set the base/default font size (for 1em) on the body tag for each different output/medium.