HTML EM, PX, PT, CM, IN... Reference
Converter
PX to EM
Meaning
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 | |
|---|---|---|
| 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 |