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% |
If you enjoyed this article, please consider sharing it!
[...] 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 [...]
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.
tabla fue publicada originalmente en WorldTechnies y de hecho ellos mencionan que esta tabla puede tener ciertas variaciones, dependiendo del Sistema
[...] 27pt 36px 220% Convert em,px,pt and % in css | getallfix [...]
So, in short:
px = pt*4/3
em = pt/12
% = pt*100/12
Good info. Thanks!
[...] Convert em,px,pt and % in css (conversion table) [...]
[...] http://www.getallfix.com/2011/11/convert-empxpt-and-in-css/ [...]
Thank you so much for this!
Photoshop was always so damn annoying using pt for everything while I coded using px.
[...] Thanks to this site: getallfix.com. [...]
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.
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>