HTML EM, PX, PT, CM, IN... Reference

❮ Previous Reference Next ❯


PX to EM


The CSS offers a number of different units for expressing length.

Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in).

And there is also a unit that was invented specifically for CSS: the px.

Q: Does that mean different properties need different units?

Ans: No, the units have nothing to do with the properties, but everything with the output media: screen or paper.

There is no restriction on which units can be used where. If a property accepts a value in px (margin: 5px) it also accepts a value in inches or centimeters (margin: 1.2in; margin: 0.5cm) and vice-versa.

The following table gives the recommended use:

Point Screen Print
Recommended em, px, % em, cm, mm, in, pt, pc, %
Occasional use ex px, ex
Not recommended pt, cm, mm, in, pc -

Absolute units

The following are all absolute units — they are not relative to anything else, and are generally considered to always be the same size.

Unit Name Equivalent to
cm Centimeters 1cm = 38px = 25/64in
mm Millimeters 1mm = 1/10th of 1cm
Q Quarter-millimeters 1Q = 1/40th of 1cm
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Points 1pt = 1/72th of 1in
px Pixels 1px = 1/96th of 1in

Relative units

The relative units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page.

The most useful units for web development are listed in the table below:

Unit Relative to
em Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
ex x-height of the element's font.
ch The advance measure (width) of the glyph "0" of the element's font.
rem Font size of the root element.
lh Line height of the element.
vw 1% of the viewport's width.
vh 1% of the viewport's height.
vmin 1% of the viewport's smaller dimension.
vmax 1% of the viewport's larger dimension.

Units Chart

The following is the units chart:

Pixels EMs Percent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.500em 50.0% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.750em 75.0% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1.000em 100.0% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.250em 125.0% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.500em 150.0% 18pt
❮ Previous Reference Next ❯