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 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.
– 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%
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.