CSS offers several types of units of measurement as part of your web design, i.e. for font sizes, spacing etc.

px (pixels)

If you’ve come from any other UI development you’ll probably be used to using pixels to define window sizes etc. Pixels allow us to specify positioning and sizes specifically, however these are not scalable, i.e. a 10px * 10px button might look fine on a lower resolution monitor but for a high resolution look tiny.

1px = 1/96th of an inch

cm

Centimetres, and absolute measurement, 1cm equals 37.8px, which equals 25.2/64in

mm

Millimeters, 1mm = 1/10th of 1 cm

Q

Quarter-millimeteres, 1Q = 1/40th of a cm

in

Inches, 1 in = 2.54cm = 96px

pc

Picas, 1pc = 1/6th of an inch

pt

Points, 1pc = 1/72nd of an inch

em

This is a unit which is relative to the font size of the parent element. So for example 3em will be twice the size of the parent element’s font size. In other words let’s assume the font size is 32px then 3em would be 3 * 32px, i.e. 96px.

rem (root em)

This is similar (as the name suggests) to em, but it’s relative to the root HTML font size. Otherwise we can calculate things as per em, but using the root font size not the parent element.