Benefits and drawbacks of using pixel, point, percent, em units

As a web developer, we may have came across, questions like
- Which unit to use for measurement?
- What is the relevance of each unit?
- Pros anc Cons of using them

Lets talk about each units in detail.

Most commonly used units for measurement are as follows :-

- Points (Absolute measurement unit)
- Pixel (Relative measurement unit)
- em (Relative measurement unit)
- percent (Relative measurement unit)

Points:
This is absolute unit of measurement, and takes the absolute size based on user’s screen. To be more specific, based on resolution of the screen the font may increase or decrease, so this is not good for using in normal web pages.

When to use?
Points are good choice when we want to go for printing. So if you are planning to make a printable version of your page, make use of point units.

Pixels:
Pixels are relative to the screen resolution.This is relative unit of measurement and is good if we want to have better control of the web pages.

When to use?
If control over the look of your Web page is your biggest concern, then you should use pixels. Pixels are the standard unit of measure for screens and monitors, and fonts will be more precisely the size you want on the screen.

em:
This is relative unit of measurement. em is good for accessibility. We should use em when we want to make our application accessible. Drawback of em units is that font size is relative to standard size of browser, so we lose control over the exact look of the web page.

When to use?
If accessibility is your biggest concern, then you should use ems. Ems are sized so that the font size is relative to the parent element. Using ems ensures that your pages will be accessible to most browsers and platforms. Also if your readers choose to change the default font size of the page, your page will scale to that new size.

The problem with ems is that you lose control over the exact look of your page.

Percent:
The percentage value is relative to the surrounding text or the user’s default font, so when you define a font size with the value 50 percent, and the default font size was 16px, you get an 8px font size.