CSS Font Size Specifics

Question

I have a couple of specific questions about font size:

1. Is pt (I.E. 12pt) standardized? I think I read somewhere that pt = 1/72 of an inch. However, the size of 24pt font in photoshop is significantly different from size 24pt font in css.
2. What exactly does font-size determine? Is it a sort of unstandardized arbitrary description about letter size or does it actually refer to the specific height or width attribute of letters?

Thanks Stack!

Answer 1

font-size is the baseline height of the font (the height of a capital H character) plus a little room above it (the ascender) and larger amount of room below it (the descender).

For a particular font at a particular font-size, the baseline height will always be the same size. Below are some examples, based on measurements of the Arial font:

font-size    baseline height
   10           7
   11           8
   12           9
   14           10

In theory, for CSS, pt is a rough approximation of the baseline height in px. For instance, a font-size:9pt has a baseline height of 9px, which corresponds to font-size:12px. In practice, I've sometimes found that pt is larger than the baseline height by 0.5 to 1.0 px.

Here's a jsfiddle showing a side-by-side comparison of capital H's in px and pt.

In most PSDs I've seen, a font specified as 12pt is in fact 12px. But this may vary. When in doubt, measure the baseline height of the text and convert backwards from that to a font-size in px. For instance, if a capital H has a height of 9px, then the font-size is 12px. Sometimes antialiasing in a PSD makes it difficult to accurately measure the baseline height.