comment 0

Understanding EM, PX, % (percent) and PT

One of the most confusing concept in CSS is, understanding different font-size units and how they work i.e. EM, PX, %age and PT.
Below is the explanation of each with an examples. I hope this will help you understand the concept and it will help you in development as well.

PX (Pixel):

Pixel (px) is a static (fixed) font unit. Pixel is an autonomous unit of screen resolution. One pixel means one dot on screen. Pixel units are useful when you intend to create pixel perfect web page. Pixels are not scalable therefore, they have limitation for responsive web designing.

Example of Pixel:

https://jsfiddle.net/aash1010/a1bos7nb/4/

In demo example above you can verify that changing document font size in body {} tag has no effect.
You have to resize manually each and every element’s font size in media queries to make it work like example below.

https://jsfiddle.net/aash1010/kzxedhfw/

It’s very painful job to resize each and every element. It’s desirable that there should be some solution like when I change document font, font of all elements on the page should adjust accordingly. For that we have to use either EM’s or % (percent) units.

EM (EMs):

EM’s (em) is a scalable unit, its size is relative to document font size. Increasing / decreasing document font size will increase / decrease EM’s size respectively. Let’s say document font size is set to 12px then 1em will be equal to 12px similarly 2em = 24px and so on. EM’s are very useful especially when creating responsive web pages.

What’s cool about EM’s?

EM’s are relative units changing document font will affect all fonts sizes. All you need to do it change document font size in media queries like example below.
https://jsfiddle.net/aash1010/37hcrcgj/

We are just changing font size of document in body {}.

PT (Points):

Points (pt) are used for print media. One point is equal to 1/72 of an inch. They are similar like pixels and are not scalable.
https://jsfiddle.net/aash1010/rperk1q1/

Resizing document font size has no effect on PT (points). Note that they are not mean to be used for non-print media.

% (Percent):

% is scalable unit and they work like EMs with some extra functionality which makes them better than Ems. There scalability makes them best around other CSS font size units. % (percent) width depends on container while em’s not.
https://jsfiddle.net/aash1010/dcjnvddv/

“PX” vs “EM” vs “PT” vs “%” which is the better and why?

Let’s find out by an example:
At body {font-size: 100%} all font units have same behavior let’s try increasing that;

em-vs-px-vs-pt-vs-percent-100precent

At body {font-size: 120%}; EM’s and % (Percent) font changed (increased) while PX & PT are unchanged.

em-vs-px-vs-pt-vs-percent-120precen

You can play around with example above at fiddle link below.
https://jsfiddle.net/aash1010/pqa6m2vm/2/