RedGrittyBrick

Standards

CSS font-size units

In CSS, font sizes can be specified as "xx-small" through "xx-large", as "larger" or "smaller", as a percentage (e.g. 150%) or in any of the following relative units.

px
Pixels, Size relative to the resolution of the display. Traditionally 1 pixel is the smallest addressable element. On a screen, pixel size depends on physical screen size (e.g. 17") divided by resolution (e.g. 1024 x 768). Note that computer printers often print several dots per pixel. This is so that they can print greyscales or a full range of colour graduations. This is why dots per inch (dpi) is not the same as pixels per inch (ppi).
em
Ems, In CSS this is a scaling factor. The base unit is the point size of the parent element. So "1.5em" = "150%" = "larger". In traditional printing, an em was the widest width of any character in the font size (typically the width of the letter "M"). An em-dash is wider than an en-dash (neither of which are a hyphen).
ex
x-height. Height of a lower case "x". In CSS this unit is like em.

CSS font sizes can also be specified in any of the following absolute units:

pt
Points, a measure of the vertical height of a font. For our purposes there are 72 points to the inch. In traditional printing there were approx 72.27 Anglo-American points to the (English) inch. Point size specifies the default or minimum inter-baseline distance. This is slightly larger than the height of the font from ascender to descender.
in
Inches
cm
Centimetres
mm
Millimetres
pc
Picas. One pica = 12 points

Thoughts

The state of the art?

Another messy area in CSS interpetation by web browsers.

I'd like to use ems so that viewers can choose a zoom factor but I'd like some control over the relative sizes (i.e. h1, h2 base sizes) and I'd like something that works consistently across Mac and PC without using ugly kludges that depend on specific bugs in browsers.

In an ideal world?

Many people say that "points" are for print stylesheets only. However, points are no different from inches or millimetres. Ideally, when I specify a font size of 72pt I should be able to go to any combination of Mac or PC, any phystical monitor size (15", 17", 21"), any resolution setting (640x480, 1024x768), and hold a ruler to the screen and measure the baseline spacing as 1". The fact that 72pt is not always 1" is a failing of the computer industry. the result is that point sizes only make sense when text is printed on paper.