The difference between px, pt, % and em

Posted: January 10, 2011 in html

Many Designer would dispute about the usage of pixel (px), point (pt) and em when it comes to font sizes and line heights.

In CSS, you’re given four different units by which you could measure the size of text as it’s displayed in the web browser.

The most confusing aspects are which of these four units best suited for the web?

First I am showing you the difference in its values & in next article you will get more about all these font-size attributes.

Here’s a chart that shows individual points to pixels, ems and % values.

It’s just an approximation, which will depend on font, browser and OS, but it’s a good starting point.

Pixels Points Ems Percent
8px 6pt 0.5em 50%
9px 7pt 0.55em 55%
10px 7.5pt 0.625em 62.5%
11px 8pt 0.7em 70%
12px 9pt 0.75em 75%
13px 10pt 0.8em 80%
14px 10.5pt 0.875em 87.5%
15px 11pt 0.95em 95%
16px 12pt 1em 100%
17px 13pt 1.05em 105%
18px 13.5pt 1.125em 112.5%
19px 14pt 1.2em 120%
20px 14.5pt 1.25em 125%
21px 15pt 1.3em 130%
22px 16pt 1.4em 140%
23px 17pt 1.45em 145%
24px 18pt 1.5em 150%
26px 20pt 1.6em 160%
29px 22pt 1.8em 180%
32px 24pt 2em 200%
35px 26pt 2.2em 220%
36px 27pt 2.25em 225%
37px 28pt 2.3em 230%
38px 29pt 2.35em 235%
40px 30pt 2.45em 245%
42px 32pt 2.55em 255%
45px 34pt 2.75em 275%
48px 36pt 3em 300%

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s