The difference between px, pt, % and em

the-difference-between-px-pt-and-em

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%

cheers!!
Joginder poswal

Tags: , ,

This entry was posted on Friday, November 6th, 2009 at 3:22 am and is filed under CSS, XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “The difference between px, pt, % and em”

  1. john Says: November 6th, 2009 at 3:27 am

    Nice chart. Thanks for publishing good stuff. I would appreciate if you will publish something about what is useful in which condition. waiting for such stuff.

  2. jposwal Says: November 6th, 2009 at 3:59 am

    thanks john.
    I will bck soon with all your answers

  3. gaurav Says: November 6th, 2009 at 4:22 am

    Thanks for font-size: clarification. I always confused of this concept. Now I know the better use of EM and %. Thanks a lot for this useful article. I also want to know more about….

  4. jposwal Says: November 6th, 2009 at 4:29 am

    thanks a lot gaurav..

  5. Lalit Says: November 11th, 2009 at 5:37 am

    Thanks for this Chart

  6. amit Says: November 11th, 2009 at 11:40 pm

    Very nice its useful.
    Thanks….

  7. jposwal Says: November 11th, 2009 at 11:41 pm

    thanks lalit

  8. Ashwani Sharma Says: February 1st, 2010 at 8:45 am

    Thanks a lot Joginder. I was looking for this information from a very long time but unable to find. This is really very useful information to all designers. Thanks for sharing this wonderful inromation.

    Ashwani Sharma.

  9. jposwal Says: February 2nd, 2010 at 12:06 am

    Thanks Ashwani. you’ll get a lot of information on this blog very soon….

Leave a Reply

Anti-Spam Protection by WP-SpamFree

«
»