1.1 Units in Web Design

Although this is all very interesting, the units most commonly used in web design are relative units such as px, em, ex, and %, and the absolute unit pt.

Pixels

A pixel (or picture element) is the smallest single component of an image (digital or raster). Collectively, pixels are the units of measurement used in screen resolution (the most common one currently being 1024 x 768px). Therefore setting fonts, widths and heights using pixels can cause pages to look slightly different depending upon the resolution of the visitor's monitor; however, they are the most common unit used and the most straightforward to use, especially where images are concerned.

EM Units

Historically based upon the width of the uppercase M (hence "em") in typeface, 1em is equal to the current font-size of the nearest element. If the font-size hasn't been specified (in a html document) then it will be the browser default, which is usually 16px. So by default 1em = 16px (usually). For example, if a font-size of 24px was set in the body tag, then here1em = 24px. The em unit is useful because it can adapt to the fonts that visitors may prefer to use. They also cascade well, and are good for elastic width sites where em values are used extensively to make a site “zoomable” (increasing the font-size increases everything including the width of the site).

A popular method is to set the font-size in the body tag to 62.5%. As the default browser font-size is 16px, this makes it 10px (without actually hard-setting it to 10px, which wouldn’t cascade). Having 10 as a multiplier is much easier than 16. However, using em’s as a substitution for pixel values can cause problems due to how well they cascade. For example, setting values for p and li font-sizes to be 1.5em is fine until a paragraph is placed inside a list item. Those two values will cascade (1.5 x 1.5) and that list item will be bigger than any of the others.

Here is an example using em units:

body		{font-size: 62.5%;}

h1		{font-size: 2em;}

p		{font-size: 1.2em;}

#container	{font-size: 20px;
		border: .05em solid black;}

In this example, the body's font size has been set to 62.5% of the browser's 16px default size, which gives us 10px. The font size for the h2 element is set to 2em, which results in 2 x 10px = 20px. The font size for the p element is set to 1.2em, giving 1.2 x 10px = 12px. Next we have a container div that hard sets the font size to 20px. Any em units in this div will be based upon this, so the border widthg of .05em will be .05 x 20 = 1px.

Ex Unit

Aso defined by the element's first available font, the 'x-height' is often equal to the height of the lowercase "x" (although it is also defined for fonts that do not contain an x). 1ex is the x-height of a font, which is usually about half the font-size, so 1ex = 0.5em. These can be used in much the same way as em units.

Percentages

It is fairly obvious how these work. If a parent element has a width of say 100px and a child element has a width set to 50%, then its actual width would be 50px. Percentages also cascade very well, so the same caution when straight substituting for pixels as in em units should be taken.

Point values

Just as pixels are accurate for sizing on monitors, point sizes are accurate for sizing on paper. A point is an absolute unit of measurement used in typography (72pts = one inch). Therefore point values should only be used for printing, not for screen display, and infact cross-browser results are very different anyway. For the best cross-browser and cross-platform results while printing pages, set up a print stylesheet and size all fonts using point sizes.

When a value is set to zero there's no need to state a unit. For example:

*	{margin:: 0;
	padding: 0;}