By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Units of Measurement

Reference on pixels, pt, em, percentages, etc. Which is best to use, and why. Includes all the Length Units, and their useful example.

Edited: 2011-07-24 18:58

Units of Measurement are used to define the position of elements, as well as width, height, font-sizes. And more!

About the Length Units

AKA: Units of Measurement.

Pixels (px)

One unit of px, equals one dot on the screen. This is perhaps the most abused unit of measurement, however since browsers began to implement "page zoom", it isn't as bad to use pixels as it used to be.

Ems (em)

Has been the most suited for layouting pages for a long time, until browsers began implementing "page zoom". Used together with percentages, this stands as one of the best choices for web designers.

Exes (ex)

One "ex" equals the size of "X", (similar to em's "M").

Percentages (%)

One of the better choices when dealing with font-sizes and layout. Percentages better fit the Screen Resolution, and is therefor preferred in most layouts. Often used together with a reasonable minimum and max-width.

Inches (in)

Best suited for Print-Media Types.

Centimeter (cm)

Best suited for Print-Media Types.

Millimeter

Best suited for Print-Media Types.

Example:

body {
/* Sets the font-size for all text */
  font-size: 0.8em;
}
div {
/* Sets the min/max width of a division */
  width: 100%;
  min-width: 900px;
  max-width: 1600px;
}

Note. The above are just examples, you would most likely need additional code, depending on the layout you are trying to make.