• Shyamala Prayaga

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.

#webdesign #standard #W3C #Webdevelopment #typography #Usability #HTML

PRAYAGA
SHYAMALA
  • LinkedIn Social Icon
  • Twitter Social Icon

A little something about me!

 

My name is Shyamala pronounced as shaa-ma-la and I am a UX evangelist with 19 years of experience as a UX designer with hybrid skills of UI and UX. I have experience in UX and UI designing on both mobile and desktop applications and have been part of designing some award-winning mobile applications. 

I am a civil engineer by education and before moving into user experience I worked as an architect with a construction firm for 2 years. My passion for design and building great things for users pushed me into the UX domain. I am a self-made UX designer with no formal educational background into UX, but my passion helped me enter and succeed in user experience.