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.
Related Posts Plugin for WordPress, Blogger...

Receive all updates via Facebook. Just Click the Like Button Below

You can also receive Free Email Updates: