The proper use of measurement units?

Question

I've been using px for almost all the measurement related styling, but I wanted to know the best places for the use of pixels (px), percentage (%), points (pt) and em.
I've seen the use of em and (I believe) points in typography, but I don't know the best way to use them.

Where should either be used, and why?

Answer 1

• pt or cm, in, mm etc. are most used for print stylesheets, as they're most fit for measurements on the physical properties of paper sheets, and the render of printers.

• em and en (and the new rem, and more interesting units such as ch) are glyph relative units, and as such are suitable for text styling, in correspondence with absolute units at the root element (e.g. px units at the body). another interesting uses: ex units (the height of the 'x' glyph in the font) to set vertical measures in relation to text, ch to indent lines.

• px are absolutely rendered so one can design a pixel-perfect (or fixed) layout based on these units, applied for containers, or on various widgets demanding fixed size (buttons and the like). disclaimer: absolutely is an over-statement, as pixels are rarely absolute, and has many factors affecting the rendered outcome - see this article about px as an angular measure.

• % are mostly used in conjunction with an absolute unit at the top container, and are applied in various CSS techniques, such as the faux centered container. these units are also very handy for layouts that are fluid by nature. others, like the viewport relative vh, vw and vmin, may be used regardless of the parent's units.

all of the above is based on my personal views, as this subject is open for debate, and CSS techniques will keep evolve and we'll see more uses of the specifications and capabilities we had never thought of. it's mostly the creative use of those tools that scopes or favors the use of one unit over another.