CSS units for measurements

According to W3 Consortium lengths refer to horizontal or vertical measurements and there are two types of length units: relative and absolute. Using relative units means that the scale from one medium to another will be more easily.

Relative units are:

• em: the ‘font-size’ of the relevant font
• ex: the ‘x-height’ of the relevant font
• px: pixels, relative to the viewing device

The absolute units are:

• in: inches — 1 inch is equal to 2.54 centimeters.
• 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.

Absolute length units are only useful when the physical properties of the output medium are known and with this, the discussion about these measurement units is closed.

The most known and used units within CSS style sheets are em and px. One is relative to the relevant font and the other is relevant to the viewing device.

Using em as measurement unit

If we check the properties for our default (or many) web browser we will see that the default font size is set to 16px. A good approach is to define the font-size style attribute for the elements displayed in a web page to 62.5% which means that 1em measurement unit will be equal to 10px (simple calculation 62.5%*16px = 10px), or to directly declare font-size:10px. This is good because if we define a 1.1 em unit it is translated to 11px and so on. On the other hand if we are using values with more than one digit to represent non-integer values, problems may occur because, using values like 1.2345em cannot split a pixel to the desired value (1.2345*10px = 12.345px) and the measurement unit will take the rounded value. The problem comes when the subvalue is half of the value, because there is a different behavior among the top wide-spread web browser on rounding these values. Some of them will round the subvalues up (IE 6 and IE 7) and some of them will round the subvalues down (Opera and Safari) and Firefox tends to round both up and down. With this approach the result will not be the same on different web browsers.

So, a good behavior is to use as much as possible multiplying values that in the end will compute integer values (measured as pixels). Take a look at this application which transforms px to em values and viceversa.

Using px as measurement unit

Because the content of the web pages is mostly served as graphic representation through an user agent to the audience a good reflex might be to set all measurement units using px values. This approach tends to be necessary and most desirable when the width and height style properties are declared, and even the measurement unit is relative to the viewing device, in absolute values the space occupied is the same.

Using a mix of em and px as measurement units

Another option is to use px as a measurement unit to declare some style properties, such as width, height, background-position or letter-spacing, and em measurement unit to declare another style properties like margin, padding, line-height, font-size or text-indent. In the last case, the properties will follow the size of the text font.

Conclusions for what measurement units to use

Based on whatever option we chose and use for measurement units it’s good to follow some practices.

A good start is to declare explicitly the font-size for the body element to a fixed value of 10px. In this case the control of the sizes isn’t influenced by the default font size value on users’ web browser. If we set the value as a percent (62,5%) relative to the default web browser’s font size value, and if this value is different from 16px, problems may occur.

Use px as a measurement unit for width and height of the elements. You may find that in IE7 11em is not equal with 110px when you set the width of an element (assuming that 1em = 10px).

When we use em as measurement unit is better to define subvalues of it with one digit. Using more than one could lead to some unexpected displaying behavior on some web browsers which can make the web site pages look messy.

Also, some attention should be given on inheritance on DOM tree. Changing the font-size value, after the initial declaration of 10px, should be made using the em measurement unit. Using px to declare the font size of an element will also modify the value of em measurement unit.

Today web browsers developers tend to adhere to HTML and CSS standards more accurately than a few years ago, and for a web site developer this represents less time consumed for fixing bugs for old versions of user agents. I hope that one day in the near future, the old versions browser will be gone for ever, and the HTML and CSS standards will be implemented in the same way in all major browsers.