Convert em,px,pt and % in css

Hi I gone through lot of sites and found a site which showed this chart which was very helpful. I have listed below that chart.

Thanks to this site: http://reeddesign.co.uk/test/points-pixels.html

Conversion from Points to Pixels (and Ems and %)
Here’s a chart that converts points to pixels (and ems and %). It’s an approximation, which will depend on font, browser and OS, but it’s a good starting point.

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

suri

I Am suresh(suresh kumar )a Web developer,Freelancer,webdesigner,UI developer from bangalore. Got 6+ yrs of IT experience . I specialize in standards-based XHTML, CSS and JavaScript web development. Each site I develop is built to be search engine friendly (SEO), using the latest development principles and techniques.

You may also like...

16 Responses

  1. Well today again i found an interesting cheat sheet to have near: a conversion table between ems, pixels, points and percentages for the font size in css.

  2. tabla fue publicada originalmente en WorldTechnies y de hecho ellos mencionan que esta tabla puede tener ciertas variaciones, dependiendo del Sistema

  3. Jonathan says:

    So, in short:

    px = pt*4/3

    em = pt/12

    % = pt*100/12

    Good info. Thanks!

  4. Thank you so much for this!

    Photoshop was always so damn annoying using pt for everything while I coded using px.

  5. Peter Stagg says:

    Very interesting and useful. You need to bear in mind that percentages and ems are relative sizes not absolute take the following:

    p.class-one{
    font-size: 100%;
    }
    p.class-two{
    font-size: 160%;
    }
    span.ems{
    font-size:1.6em;
    }
    span.pxs{
    font-size:16px;
    }

    The qick brown fox jumped over the lazy red dog.
    The qick brown fox jumped over the lazy red dog.

    Paragraph two will be bigger then paragraph one and the word Jump will be bigger in both relative to the size of the paragraph but the word lazy will be the same size in both paragraphs.

    • Peter Stagg says:

      As should happen the code was striped from that reply so try again:
      <style>
      p.class-one{
      font-size: 100%;
      }
      p.class-two{
      font-size: 160%;
      }
      span.ems{
      font-size:1.6em;
      }
      span.pxs{
      font-size:16px;
      }
      </style>
      <p class="class-one">The qick brown fox <span class="ems">jumped</span> over the <span class="pxs">lazy</span> red rog.</p>
      <p class="class-two">The qick brown fox <span class="ems">jumped</span> over the <span class="pxs">lazy</span> red rog.</p>

  6. Miles Peterson says:

    I would avoid using the percent flag. I just resolved a display issue on a clients website where they had:

    body{font-size:62.5%}
    p{font-size:1.2em}

    IE8 (not IE9 emulating IE8) was displaying this section as 62.5% (or 7.5pt).
    IE9 acting as IE7,8,9, Chrome and Firefox were displaying this section as (1.2em * 62.5% = 0.75em, or 9pt).

  7. damu says:

    how about a conversion form?

  8. Hirok says:

    Thank you so much!!!

  1. November 27, 2011

    [...] Hi I gone through lot of sites and found a site which showed this chart which was very helpful. I have listed below that chart. get chart at : click to see the chart [...]

  2. January 16, 2012

    [...] 27pt 36px 220% Convert em,px,pt and % in css | getallfix [...]

  3. February 4, 2012

    [...] Convert em,px,pt and % in css (conversion table) [...]

  4. February 10, 2012
  5. March 6, 2012

    [...] Thanks to this site: getallfix.com. [...]

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>