em, px, pt, percent.. and the variants there of; whats the difference between them?

em, px, pt, percent. What is the difference ?

CSS offers a number of different units for expressing length and sometimes its confusing to relate them with each other, Here’s a tiny bit of explanation.

Em’s (em) :
– Scalable unit that is used in web document media.
– 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
– The size can be calculated from pixels to em using this formula: pixels/16=em
– Due to scalability and mobile-device-friendly nature Ems are becoming increasingly popular in Responsive Websites.

Pixels (px) :
– It is not related to the current font and are fixed-size units that are used in screen media.
– Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: 12px;, you’re basically telling the browser that each letter should be 12 pixels high
– Used in web documents in order to produce a pixel-perfect representation of sites as it is rendered in the browser.
– Not scalable

Points (pt):
– Points are traditionally used in print media.
– 1pt (point) is 1 / 72 of an inch. Setting font-size: 12pt; sets the height of your characters to 12 / 72 inches.
– Fixed-size units and cannot scale in size.

Percent (%):
– Much like the “em” unit.
– The current font-size is equal to 100% (i.e. 12pt = 100%), font-size: 50%; sets the font size of your element to 50% of the font size of its parent element.
– Fully scalable for mobile devices and for accessibility.

Relation between the units : 
1em = 12pt = 16px = 100%
i.e.
pt = 3/4*px
em = pt/12
% = pt*100/12

Note: This article and it’s origin hail from em-px-pt-percent-what-is-difference, not a completely elaborate explanation there of but some basic information there of about the differences, and worth having around for reference.