Saturday, October 5, 2013

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

Check this online tool for easy unit conversions.