Font sizes (including "em")

The examples given for font size in the lecture on CSS used a measurement of a pt - a point. As discussed in the lecture on Typography, these are absolute units. Others include:

• in: inches — 1 inch = 2.54 cm.
• cm: centimeters
• mm: millimeters
• pt: points — the points used by CSS 2.1 are equal to 1/72nd of an inch.
• pc: picas — 1 pica is equal to 12 points.

We can use measurements such as these in our style sheets like (for example), this:

h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */

We can also specify relative units in style sheets. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).

Relative units include:

• em: the 'font-size' of the relevant font
• ex: the 'x-height' of the relevant font (the height of an 'x' character in the font)
  
• px: pixels, relative to the viewing device

We might use these as follows:

/* em
* this margin will be half the size of the h1 font
*/
h1 { margin: 0.5em }

/* ex
* this margin will be the size of the h1 font x height
*/
h1 { margin: 1ex }

/* px
* the paragraph font will be 12 pixels high
*/
p  { font-size: 12px }

These notes are sourced from http://www.w3.org/