Convert em,px,pt and % in css
July 6, 2007
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% |
Entry Filed under: css. .
48 Comments Add your own
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed
1.
Vicente Pellegrini | July 10, 2007 at 2:08 pm
Finally the conversion table that I seek makes time!
thanks.
Vicente
Sao Paulo-SP-Brazil
2.
szombat | July 31, 2007 at 5:05 am
yes, but whit what font have you calculated this?
’cause 1em will always be 100% but I’m not sure about the px pt relationship, i think thats strongly depends on the actual font.
3. Another handy cheat sheet&hellip | August 29, 2007 at 8:21 am
[...] 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. [...]
4. Tabla de Equivalencias en&hellip | December 18, 2007 at 9:18 pm
[...] el blog WorldTechies han hecho una tabla de equivalencias entre px, %, pt y em en CSS muy útil para darnos una idea de [...]
5. Actualidad, Entretenimien&hellip | December 18, 2007 at 9:41 pm
[...] el blog WorldTechies han hecho una tabla de equivalencias entre px, %, pt y em en CSS muy útil para darnos una idea de [...]
6. [Recursos] Tabla de equiv&hellip | December 18, 2007 at 9:59 pm
[...] La fuente esta aqui http://sureshjain.wordpress.com/2007/07/06/53/ [...]
7. CSS: Tabla de Equivalenci&hellip | December 19, 2007 at 5:32 am
[...] tabla fue publicada originalmente en WorldTechnies y de hecho ellos mencionan que esta tabla puede tener ciertas variaciones, dependiendo del Sistema [...]
8. CoderLab’s Blog &ra&hellip | January 14, 2008 at 8:54 pm
[...] looking for a way to convert pixels to ems for a website project I was working on, and came across this conversion table which, I’m sure, will be a useful reference to you if you ever need to convert pixels to [...]
9.
sandman6665 | January 31, 2008 at 1:29 am
been looking for this..thank you very much.. great post!
10.
2clicks | February 10, 2008 at 2:45 pm
Exactly what I was looking for!!!! THANKS A LOT!
11.
Yokko | February 12, 2008 at 12:59 pm
This makes no sense since em and ex depends on font size.
12.
penta | February 26, 2008 at 7:03 pm
doesn’t make no sense?
if 1 em is set to 12 pt then 1,4 em will be approximately 16 pt
isn’t it?
13.
vinay | May 2, 2009 at 7:31 am
no it will be 16.8 pt
14. Enlaces 27/02/2008 -- los&hellip | February 27, 2008 at 6:02 pm
[...] http://sureshjain.wordpress.com/2007/07/06/53/ [...]
15.
Z | February 29, 2008 at 1:24 am
From my understanding, em is dependent on parent elements, which often throws a wrench in the works of my employment (laymen terms – suiqshing user code into back end .asp/.net and make it all look purdy)
Why do you say using px is bad?
16.
rey mendoza | March 3, 2008 at 5:49 am
most browsers when no pixel size is declared (in the body) approximately converts 1em=16px so the chart is fairly accurate.
But if a px size is declared, say 12px (on the body) then all this will be in vain, you have to recalculate all of it.
But again, this will work in most browsers
17. Web design resources | gr&hellip | March 5, 2008 at 10:21 am
[...] Convert em,px,pt and % in css [...]
18.
seven | March 14, 2008 at 4:56 am
I want to have the size table like this.
Maybe I’ll use this table many time,Thanks a lot!
19. my so-called blog »&hellip | March 17, 2008 at 2:18 am
[...] Convert em,px,pt and % in css « Worldtechies Convert em,px,pt and % in css July 6, 2007 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 poi (tags: css typography type webdesign) [...]
20.
xmulambox | May 5, 2008 at 1:42 pm
http://www.reeddesign.co.uk/test/points-pixels.html
21. Equivalencias entre pixel&hellip | May 26, 2008 at 9:27 pm
[...] aproximadas entre éstas cuatro medidas que me encontré en webadictos qué a su vez la sacaron de WorldTechies. Ya saben esto de la RED trabajando al [...]
22. sasa eh · Converti&hellip | May 28, 2008 at 6:19 pm
[...] (Casi) Fácil. Aquí va una pequeña tabla de equivalencia sacada de (Worldtechies) [...]
23. DCNY » Blog Archive&hellip | May 31, 2008 at 8:12 am
[...] http://sureshjain.wordpress.com/2007/07/06/53/ by Suresh kumar [...]
24. Cheat Sheets for PHP, Rub&hellip | July 15, 2008 at 6:51 am
[...] Conversion table for em, px, pt & % in CSS by Suresh Jain [...]
25.
Dwayne Charrington | August 12, 2008 at 2:16 am
Thanks for this table. I looked for ages for a table like this, and I was surprised when I didn’t really find anything explained the conversion so simply. I mean I found calculators and whatnot, but it’s not efficient when you’re working on a project.
Why do you think that nobody has made up a table and placed it upon their blog anyway? Some people have, but not many have gone to such extensive conversion.
Your blog has definitely been bookmarked. Thanks again for supplying something I needed so badly.
26. Convert em,px,pt and % in&hellip | September 16, 2008 at 4:35 am
[...] http://sureshjain.wordpress.com/2007/07/06/53/ by Suresh kumar [...]
27. Convert em,px,pt and % in&hellip | September 26, 2008 at 1:59 am
[...] Convert em,px,pt and % in cssに書かれています。 [...]
28.
Catarina Clemente | October 13, 2008 at 8:51 pm
Very pertinent and honest contribution. Thanks a bunch!
29.
Isquare Technologies | October 23, 2008 at 11:01 am
Excellent Tables !! Saved my lot of time
Thanks Suresh
30. Blog Roundup for the 6th &hellip | October 27, 2008 at 1:45 am
[...] leave a comment.July 6th 2007 in review. Don’t forget to look at Release – Grassy Snow Theme. Convert em¸px¸pt and % in css I also took a look at topgold – top professional wordpress theme. I wanted to point to top blogs. [...]
31. Portland Web Development &hellip | October 31, 2008 at 5:44 pm
[...] Here’s a conversion table to help explain. [...]
32.
dtamas | November 12, 2008 at 11:08 am
thanks, thats really helpful!
33.
freak | November 19, 2008 at 11:31 am
This is pretty useless: works for 16 point typefaces only. For example Tahoma is a 14pt typeface, so 14 pt will be 1em, and not 1.2em. A dynamic table would be better where you can set the typeface… Just my 2 cents.
34.
freak | November 19, 2008 at 11:33 am
Typo: it works for 12 pt typefaces only…
35. Mimi Goodies: 100% Origin&hellip | December 1, 2008 at 6:12 am
[...] the user to increase the size. If you need it, I found a really cool conversion table. It shows the equivalents of Em, Px, Pt and %. Way [...]
36.
Murilo Reinert | December 10, 2008 at 1:33 pm
Many thx bro!!
You help many!
Murilo – Joinville/SC – Brazil
37.
convert | January 12, 2009 at 12:13 am
I actually used this table to convert all pixels in my css into em a while ago. Now I created for larger-multiple conversion jobs this handy pixels to em ( or em to px ) converter online if anyone needed an automatic conversion. Thank you…
38.
Cher | January 23, 2009 at 7:31 am
Thanks for the conversion table.
But it didn’t help me.
Even after converting to %, I’m still facing problems with respect to resolution.
Can this conversion be used when body font size is 76%?
39.
Electricspace | February 14, 2009 at 11:31 pm
For those who want to work with em’s: I’ve written a simple program in .NET to a pixel size to em. I use it in my day-to-day work:
You can download the program “Pixel 2 em calculator” from http://electricspace.blogspot.com/2009/02/pixel-2-em-calculator.html
40. Typography on the Web | March 2, 2009 at 11:39 pm
[...] http://sureshjain.wordpress.com/2007/07/06/53/ [...]
41.
Delhi City India | March 17, 2009 at 7:04 am
Hello,
I want to know that if td size is 25px then what is the percentage of this size.
42.
EnjoyMedia | March 17, 2009 at 4:43 pm
Nice post.
43. Wintivity ™ » Blo&hellip | March 19, 2009 at 10:04 pm
[...] http://sureshjain.wordpress.com/2007/07/06/53/ [...]
44.
vinay | May 2, 2009 at 7:34 am
wow!
I like it.
thnx suresh!
45.
jean-jacques | May 6, 2009 at 6:26 am
The conversions table is wrong. this apply only for a display with 96 dpi. On a display with 72 dpi 12pt is equal to 12px with 132 dpi you will have 12pt = 22px.
Use of px as the base of font size is wrong, the same apply to the use of em ( 16px on IE and firefox, 18 on Safari, …) without defining a base font size in pt.
46.
venugopal | May 7, 2009 at 7:13 am
Hi All,
I have one website. That site is currently running in pixels format but now I want to convert my website in liquid designing (percentage). For this I want a tool which convert pixels into percentage format.
One more thing that my website is not working well in all browser. Please give me any suggestion by which my website working properly.
Please give me your valuable suggestion.
Thanks
venugopal
47. Convert em,px,pt and % in&hellip | May 19, 2009 at 3:30 am
[...] Conversion from Points to Pixels (and Ems and %) [...]
48. Lesbarhet på nett - Elef&hellip | June 22, 2009 at 11:20 am
[...] base font size, det er her du skal endre tekststørrelsen. Under size på det grønne feltet er størrelsene oppgitt i em. La den være på 1em i starten og endre heller på base font size. 1em betyr 100%. Hvis [...]