Convert em,px,pt and % in css

July 6, 2007 at 5:33 am 124 comments

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

Entry filed under: css.

Css padding and margin shorthands CSS Centering

124 Comments Add your own

  • 1. Vicente Pellegrini  |  July 10, 2007 at 2:08 pm

    Finally the conversion table that I seek makes time!
    Sao Paulo-SP-Brazil

    • 2. Edson Andrade  |  June 5, 2011 at 5:34 pm

      Vicente, nem em sonho falo o ingles fluente mesmo apos 12 anos vivendo aki, mas so um esclarecimento: o ingles nao tem o nosso famoso “faz tempo” (makes time) e vc deveria usar esta frase desta forma:
      There’s the conversion table I’ve been looking for so long and I finally found it!!
      Da forma q a lingua e estruturada faz com q frases como esta fikem sem sentido ou soem estranho na lingua inglesa quando escritas exatamente como as usamos em portugues.
      Por favor nao tome como ofensa, mas eu tbm tenho minhas dificuldades e so estou tentando ajudar.
      Espero que isto venha a ajuda-lo no futuro.

  • 3. 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.

  • 4. Another handy cheat sheet « Joomla Developer  |  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. […]

  • 5. Tabla de Equivalencias entre %, px, em y pt con CSS  |  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 […]

  • […] el blog WorldTechies han hecho una tabla de equivalencias entre px, %, pt y em en CSS muy útil para darnos una idea de […]

  • […] tabla fue publicada originalmente en WorldTechnies y de hecho ellos mencionan que esta tabla puede tener ciertas variaciones, dependiendo del Sistema […]

  • 9. CoderLab’s Blog » Convert Pixels to Points to Ems  |  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 […]

  • 10. sandman6665  |  January 31, 2008 at 1:29 am

    been looking for this..thank you very much.. great post!

  • 11. 2clicks  |  February 10, 2008 at 2:45 pm

    Exactly what I was looking for!!!! THANKS A LOT! 😀

  • 12. Yokko  |  February 12, 2008 at 12:59 pm

    This makes no sense since em and ex depends on font size.

  • 13. 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?

    • 14. vinay  |  May 2, 2009 at 7:31 am

      no it will be 16.8 pt

  • 16. 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?

  • 17. 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

  • 18. Web design resources |  |  March 5, 2008 at 10:21 am

    […] Convert em,px,pt and % in css […]

  • 19. 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!

  • 20. my so-called blog » links for 2008-03-17  |  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) […]

  • 21. xmulambox  |  May 5, 2008 at 1:42 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 […]

  • […] (Casi) Fácil. Aquí va una pequeña tabla de equivalencia sacada de (Worldtechies) […]

  • […] Conversion table for em, px, pt & % in CSS by Suresh Jain […]

  • 26. 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.

    • 27. Megan  |  March 10, 2010 at 3:15 am

      I completely agreed with Dwayne !
      Thank for this table.

  • 28. Convert em,px,pt and % in css at DCNY BLOG  |  September 16, 2008 at 4:35 am

    […] by Suresh kumar […]

  • 29. Convert em,px,pt and % in css | clearfix  |  September 26, 2008 at 1:59 am

    […] Convert em,px,pt and % in cssに書かれています。 […]

  • 30. Catarina Clemente  |  October 13, 2008 at 8:51 pm

    Very pertinent and honest contribution. Thanks a bunch!

  • 31. Isquare Technologies  |  October 23, 2008 at 11:01 am

    Excellent Tables !! Saved my lot of time 🙂 Thanks Suresh

  • 32. Blog Roundup for the 6th of July 2007 :: Christopher Ross  |  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. […]

  • […] Here’s a conversion table to help explain. […]

  • 34. dtamas  |  November 12, 2008 at 11:08 am

    thanks, thats really helpful!

  • 35. 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.

  • 36. freak  |  November 19, 2008 at 11:33 am

    Typo: it works for 12 pt typefaces only…

  • […] 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 […]

  • 38. Murilo Reinert  |  December 10, 2008 at 1:33 pm

    Many thx bro!!
    You help many!

    Murilo – Joinville/SC – Brazil

  • 39. 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…

  • 40. 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%?

  • 41. 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

  • 42. Typography on the Web  |  March 2, 2009 at 11:39 pm

    […] […]

  • 43. Delhi City India  |  March 17, 2009 at 7:04 am

    I want to know that if td size is 25px then what is the percentage of this size.

  • 44. EnjoyMedia  |  March 17, 2009 at 4:43 pm

    Nice post.

  • 46. vinay  |  May 2, 2009 at 7:34 am

    I like it.
    thnx suresh!

  • 47. 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.

  • 48. 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.


  • […] Conversion from Points to Pixels (and Ems and %) […]

  • 50. Lesbarhet på nett -  |  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 […]

  • […] przydatna tabelka konwersji jednostek wielkości fontów w CSS (zaczerpnięta stąd) – domyślny rozmiar podświetlony […]

  • 53. Rob  |  July 29, 2009 at 9:46 am

    Nice table. Have been searching for ages for something like this 🙂


  • 54. FLiTz  |  August 1, 2009 at 5:33 am

    thanks. this is definitely what i’ve been looking for.

  • 55. Girish  |  August 10, 2009 at 5:00 am

    The table is incorrect. You should atleast specify which font it applies to.

  • 56. Hopelessly, I’ll Love You Endlessly » Audio Rush  |  August 14, 2009 at 9:16 am

    […] Px, em ,pt and % Calculator- This website was very useful when I was converting from px to percentage (%). The reason for converting is because if you use px and pt for your font and line-height measurements and it’s too small; the visitor won’t be able to enlarge your font in their browser. This is why it’s best to use % or em. The calculator isn’t 100% correct and it varies but it’s pretty easy to work out once you know how. […]

  • 57. dean peters  |  August 18, 2009 at 6:01 pm

    Found a nice page that also provides conversions relative to the size you set for the BODY tag:

  • 58. rawraj  |  September 25, 2009 at 4:52 pm

    Thanks a lot m8
    I always thought that pts and pixels displayed differently.(maybe because I never thought of using odd numbers in pixel sizes).
    I would always convert 10pt to 12 pixel and would just assume that the browser is displaying the font “weirdly”
    Well after reading this article i put Hello world wrapped in span tags and inline css next to each other.
    Gave one span 10pt and other 13 px and found it was the exact same size.
    So much for assumption(didnt someone say assumptions are the mother of all f#@#ups :-P)
    Got to print this stuff and keep.
    Helpful I get some stuff designed in corel draw and there they follow the point system.
    I need to read up on why pts are better then pixels or is em the best?

  • 59. Abel Braaksma  |  September 30, 2009 at 5:16 pm

    (my previous tries received a “discarded” message, perhaps your spam bot is set too strictly…, you can email me if you know more)

    Some thoughts: An em is dependent on the specifications in the font itself, there’s no direct relation to pixel size. PPI is pixels per inch, which should be taken into account before doing any calculation (a Mac has 76 PPI, old Windows has 72, newer Windows have 96 ppi), this influences the size of the rendered font by large. Local settings (i.e., for people with bad visuals) can have an even smaller points per inch.

    The best thing is, eventually: test and find the correct factor for your specific font on your specific display and use that factor throughout.

    Perhaps of interest, but not fully related: font matching resolution by browsers which can influence the size of your glyphs unpredictably

  • 60. Nitin  |  October 8, 2009 at 3:05 pm

    There is no clear cut relationship between EMs and pxs, because EM sizes are based relative to the size of the font, whereas px sizes are based relative to the screen resolution. Since those two elements are disparate, no exact correlation can be made.
    There are ways, however, to get fairly close. One method is to set the base font size (the font-size property on the element) to around 62.8%. This makes the base font, or 1.0em, approximately equal to 10px. It’s not exact, and changes from font to font, but generally speaking it’s pretty accurate. With that font setting in the body, you can use EMs as px equivalents like so…

    1.0em = 10px
    1.1em = 11px
    1.2em = 12px
    2.0em = 20px
    5.0em = 50px

    There are a few caveats, however, the major one being that it isn’t a precise conversion so elements that must be EXACTLY Xpx are unlikely to be so. The other big danger is that setting the base font this small makes IE text resizing somewhat problematic, as this 62.8% size becomes the “meduim” setting for IE. Since IE only allows two font-size increases (“large” and “larger”), those who need larger fonts may not get a big enough size to suit their needs. Likewise, sizing down to “small” or “smaller” makes text virtually unreadable.

  • 61. Brightshore Miami  |  October 30, 2009 at 6:18 pm

    Great post, not too many helpful resources on typography and usability on the web!

  • 62. shirley  |  November 9, 2009 at 10:48 am

    It helped me
    Keep it up

  • […] Convert em,px,pt and % in CSS […]

  • 64. izdelava spletne strani  |  November 9, 2009 at 7:58 pm

    Thanx fot this post, been looking around for this a long time. Really helpfull

  • […] и Рубрики:Web-верстка Комментарии (0) Trackbacks (0) […]

  • 67. Jack  |  March 9, 2010 at 9:03 am

    Thanks for the information…

    I am new to em so was badly looking for something like this..


  • 68. Wordpress Guru  |  March 15, 2010 at 8:42 am

    Thanks this is a great time saver, appreciate it

  • 69. fractal-design  |  March 17, 2010 at 4:49 pm

    At least one of the equivalencies is wrong. 10pts equals 0.834 ems (so, 83.4%). This table is inaccurate.

  • 70. Mark Stegman  |  June 2, 2010 at 1:47 am

    Yess, thank you for at least a relative conversion.

  • 71. Burhan  |  June 24, 2010 at 5:47 am

    Hey I Want to know What are the actual value of em and pt if our base is Pixel.

    shayri Sms

  • 72. Dragan Eror  |  June 28, 2010 at 12:35 pm

    This is great post! I reposted this table on my blog as my reminder 🙂

    Thank you!

  • […] и Понравилось? […]

  • 74. huarong  |  September 21, 2010 at 7:08 am

    quite useful.
    thank you.

  • 75. Konvertiranje px, em, pt i % | option-design  |  October 4, 2010 at 12:51 pm

    […] kodiranja Vaših dizajna potrebno je definirati veličine znakova vaših tekstova i naslova i ovdje možete pronaći tablicu prema kojoj veoma lako možete konvertirati pt u em, px ili […]

  • 76. kufre udo  |  November 9, 2010 at 3:17 pm

    thanks for helping me out.

  • 77. CSS怎么转换 em,px,pt 和 % – 刺桐博客  |  December 17, 2010 at 3:00 pm

    […] Convert em,px,pt and % in css […]

  • 78. Convert em,px,pt and % in css | Interactive I.T. Designs  |  January 1, 2011 at 2:27 am

    […] […]

  • 79. kievtestwthd  |  January 27, 2011 at 3:03 am

    Всего самого наилучшего

  • 80. Saurabh  |  February 23, 2011 at 10:31 am

    nice converts chart

  • 81. Наив  |  March 30, 2011 at 4:49 pm

    Нашел интерактивную таблицу для перевода

  • 82. Quae  |  April 1, 2011 at 6:25 pm

    Thanks much for this!

  • 83. FionaIsOgre  |  April 15, 2011 at 11:59 pm

    Its 2011, for a quick cross-browser reset, and setting up your own, check out YUI 3: CSS.

  • 84. Fotomodelki  |  April 16, 2011 at 7:33 am

    Nice designs, a little above my skills for now.

  • 85. Matthew Czastka  |  May 11, 2011 at 1:53 pm

    cheers for this info very helpful.


    • 86. Net guru  |  May 9, 2014 at 8:10 am

      Get affordable website design by netguru. we use HTML5, PHP, .Net, JavaScript, JQuery and CMS Website . Our web designing services included Business Website Designing, Ecommerce Website Design, Blog Designing, Banner Designing, Logo Design and many more services.

  • 87. Mark Wheatley  |  May 18, 2011 at 11:21 am

    Thanks for the very useful table.


    Mark Wheatley

  • […] Font Size Conversion […]

  • 89. Lung Cancer Symptoms Basic facts  |  June 14, 2011 at 6:23 am

    I’m very not too acquainted with this subject but I do prefer to have a look at blogs for layout suggestions and intriguing subjects. You ultimately described a that I generally don’t care substantially about and designed it relatively fascinating. This can be a nice weblog that I’ll take note of. Find out Guide at our website

  • […] Main Text should be no smaller than 12px. Though this is not a hard and fast “rule,” in my experience, everytime I build a site for a client with text less than 12px font, they come back to me at some point and ask me to increase the size. This can degrade clarity, hierarchy and layout if it’s done after the design phase so my suggestion is just to start with 12px as your minimum font size and chose the size for headers, etc. off of that. (And if you were wondering, yes, on the web pt and px are the same.) Here is a link to a site that shows pt to px conversions: […]

  • 91. CSS Ölçü Birimleri Arası Çevrim | Gökhan Turunç  |  August 8, 2011 at 8:56 am

    […] makale: CSScss, css ölçü birimleri, em, pixel, pt, px ← CKEditor “Updated Value” […]

  • 93. Pankaj Gupta  |  August 25, 2011 at 6:10 am

    Thanks for the very helpful table.

  • 94. novelty gifts  |  September 6, 2011 at 5:53 pm

    Sweet website , super design and style , real clean and utilise pleasant.

  • 95. Paul  |  September 26, 2011 at 12:33 pm

    Wrong info.
    You can set the body font to 10pt and then 100% will be 10pt.

  • […] Convert em,px,pt and % in CSS […]

  • 97. Santhosh Pandit  |  November 22, 2011 at 6:14 am


  • 98. seo tools  |  December 27, 2011 at 1:42 am

    Hey There. I discovered your weblog using msn. That is an extremely neatly written article. I’ll make sure to bookmark it and return to learn extra of your helpful information. Thanks for the post. I’ll certainly comeback.

  • 99. picha gorda  |  February 22, 2012 at 11:26 am


  • 100. nettoyeurs de piscines  |  September 29, 2012 at 8:02 pm

    I just like the helpful info you supply to your articles.
    I will bookmark your blog and test again here frequently.
    I am slightly certain I will be informed many new stuff right here!

    Best of luck for the following!

  • 101. stephenecarney  |  October 19, 2012 at 7:56 am

    really good at least honest you are

  • 102. Tony Porto  |  January 5, 2013 at 2:22 am

    Edson e Vicente, voces dos estan muinto scroto.. haha, brincadera, ja pode ver que meu portugues ja esta horrível, muinto tempo aqui. Edson, brigado esta beleza pra usar en EI 6 through EI8.

  • […] Convert em,px,pt and % in CSS […]

  • 104. izrada web stranica cena  |  February 19, 2013 at 7:44 pm

    I’m not that much of a internet reader to be honest but your sites really nice, keep it up!
    I’ll go ahead and bookmark your site to come back later on. Many thanks

  • 105. HTML5 Developer  |  March 21, 2013 at 7:32 am

    its good to seen such information on Convert em,px,pt and % in css. appreciate your efforts.

  • 106. gratis sexkontakt  |  April 27, 2013 at 4:37 am

    Sett penis (eller leketøy) bestemt mot åpningen, men ikke press inn.
    Kos deg i tigerstaden og møt likesinnede mennesker her på knull kontakt.
    Hva som gjør modne single så sexy og attraktive for unge single,
    er at de allerede har sett og opplevd mye mer – det
    gir god inspirasjon til fantasien.

  • […] Convert em,px,pt and % in css […]

  • 108. zebra ceiling fan  |  June 3, 2013 at 8:06 pm

    Choosing the right fan is important because you do not want to waste your money on the purchase of fan from time
    and time again. Of course, given sufficient time, we get used to the switching arrangement.

    While it is easy to get amazed by these advancements in the
    ceiling fan domain, it is not surprising at all – when one considers
    the competition.

  • 109. renovation kitchen cost  |  August 4, 2013 at 4:21 pm

    This is a great reason to stay put. If you aren’t planning on starting your remodel loan rates immediately, check and double-check return policies before buying materials. Whether you choose a pull down sprayer, touch technology or any other feature, you need to use a construction remodel loan rates estimate process. If there are any empty spaces you could put toward the purchase of a recently completed 14-unit building across the street. It remains to be seen how far the Planning Commission and the central government would go in her room.

  • 110. Fermin  |  September 1, 2013 at 4:43 am

    It’s perfect time to make some plans for the future and it’s time to
    be happy. I have read this post and if I could I want to suggest you some interesting
    things or advice. Perhaps you can write next articles referring to this article.

    I wish to read even more things about it!

  • 111. izdelava strani  |  November 1, 2013 at 7:50 pm

    Been looking fot this. Thanks for hard work.

  • 112. Como Obtener Internet Gratis  |  March 4, 2014 at 6:28 pm

    I got this site from my pal who shared with me about this
    website and at the moment this time I am browsing this site and reading very informative posts here.

  • 113. search marketing online  |  March 22, 2014 at 6:36 pm

    click here for top quality academic preparation work anywhere

  • 114. Johng687  |  May 2, 2014 at 1:48 pm

    It is also possible that Zynga’s chosen advertising bbgdddfeeadf

  • 115. denim mini skirt plus size  |  June 26, 2014 at 5:06 am

    Wow, fantastic blog layout! How long have you been blogging
    for? you made blogging look easy. The overall look of your site
    is excellent, as well as thhe content!

  • 116. Convert em,px,pt and % in css | ImDANNY  |  July 10, 2014 at 2:28 pm

    […] by Suresh kumar […]

  • 117. computers and technology articles  |  July 14, 2014 at 10:56 am

    you’re really a excellent webmaster. The site loading speed is amazing.

    It kind of feels that you’re doing any distinctive trick.
    In addition, The contents are masterpiece. you’ve done a magnificent job on this topic!

  • 118. Ffafasd Pasdfafs Yafjsa  |  September 3, 2014 at 11:30 pm

    dasfsffdafasf fasdfasf fasferytuhgjgh jñmasfasp fmzmva

  • 119. cijena web stranice  |  October 8, 2014 at 6:36 pm

    Greetings from Florida! I’m bored at work so I decided to
    check out your blog on my iphone during lunch break. I really like the information you present here and can’t wait
    to take a look when I get home. I’m amazed at how quick your blog loaded on my
    mobile .. I’m not even using WIFI, just 3G .. Anyhow, awesome site!

  • 120. Shoshan  |  August 22, 2015 at 12:55 pm

    Find here, calculator and table.

  • 121. [Recursos] Tabla de equivalencias para medir en la web - 3l0g  |  November 13, 2015 at 7:35 pm

    […] La fuente esta aqui […]

  • 122. Jonny Jordan  |  April 25, 2016 at 11:02 pm

    Try this pt to px converter

  • 123. Tips  Merawat Sandal Kulit Asli  |  March 2, 2017 at 7:15 am

    I’m looking towards that which you ought to share. Pleased to see you blogging once again.

  • […] Conversion table for em, px, pt & % in CSS by Suresh Jain […]


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 )

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

Trackback this post  |  Subscribe to the comments via RSS Feed

Flickr Photos

Top Clicks

  • None

Blog Stats

  • 731,880 hits

%d bloggers like this: