Units of Measurement

When changing the look of content, you may often need to select a unit of measurement (UOM). Central offers the following relative and absolute UOMs (most definitions are taken from w3c.org).

[Menu Proxy — Headings — Online — Depth3 ]

Relative UOMs

Following are UOMs that are relative. In other words, they might be displayed differently, depending on the circumstance.

Unit of Measurement

Description

px

Pixel units are relative to the resolution of the viewing device (i.e., most often a computer display). If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96 dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.

em

The em unit is equal to the computed value of the font size property of the element on which it is used. The exception is when "em" occurs in the value of the "font-size" property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

ex

The ex unit is defined by the element's first available font. The x-height is so called because it is often equal to the height of the lowercase "x." However, an "ex" is defined even for fonts that don't contain an "x."

The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, the x-height may be determined from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase "o" extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5 em should be used.

%

This is the percentage value of the element. Please be aware that if you are using percentage for the size of an object such as an image, the percentage refers to the block containing that image, not to the image itself. For example, if you have an image in a topic and set the width to 60%, this does not mean that the image will be reduced to 60% of its size. Instead, it means that the image will be resized so that its width is 60% of the "container" where it is inserted.

ch

Relative to the width of the 0 (ZERO, U+0030) glyph in the element's font.

rem

Relative to the font size of the root element.

vw

Relative to 1% of the width of the viewport.1

Viewport

The viewport is the size of the browser window.

  • vw Relative to 1% of the width of the viewport.
  • vh Relative to 1% of the height of the viewport.
  • vmin Relative to 1% of the viewport's smaller dimension.
  • vmax Relative to 1% of the viewport's larger dimension.

vh

Relative to 1% of the height of the viewport.

vmin

Relative to 1% of the viewport's smaller dimension.

vmax

Relative to 1% of the viewport's larger dimension.

1The viewport is the size of the browser window.

Absolute UOMs

Following the UOMs that are absolute. In other words, they are always displayed the same way.

Unit of Measurement

Description

pt

Point

The points used by CSS 2.1 are equal to 1/72nd of an inch.

cm

Centimeter

mm

Millimeter

in

Inch

One inch is equal to 2.54 centimeters.

pc

Pica

One pica is equal to 12 points.