Easily Convert Pixels to EMs

on Dec 29th 2008 with 29 comments

Cost: Free
Found Via: http://pxtoem.com/

Do you hate having to pull out the calculator every time you want to convert pixels to ems? Sometimes, it’s quicker to simply use pixels because we simply don’t have the time to figure out the correct value. Luckily, an online service called pxtoem.com makes it laughably simple, and more importantly quick, to convert pixels to ems. All that you need to know is your base font size.

PX to EM conversion made simple.




Automatically Convert Pixels to EMs
  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Nouman Saleem

    Maybe a little info on why select EM over px?

  • http://pw-software.com NetOperator Wibby

    Maybe because more people are starting to use it now … Web 2.0?

  • Sprogz

    @Nouman: This info is available on the PXtoEM.com website. Click the tab labelled “3. Learn” for a little more info on font sizing.

  • http://www.ariyoshahry.net Ariyo

    Brilliant…

  • http://www.tirolocoworks.com Los

    EM’s are so flexible where you can add .5em .8em etc. Compared to PX’s where you can only go from 5px to 6px and not 5.5px to 6px.

  • http://www.jauhari.net/ Jauhari

    Just Perfect ;)

  • http://www.dariusztryba.pl Daresh

    I know something similiar: http://riddle.pl/emcalc/

  • Josso

    I’ll rather use this:
    #container {
    font-size:62.5%;
    }

    Then 1em = 10px and 2.4em = 24px :D

    • http://www.webmarmalade.com AndieR

      Oh I love that! Brilliant…

  • http://porre.org roennow

    Think im gonna stick with the good old Em Calculator at http://riddle.pl/emcalc/

  • http://limehat.posterous.com LimeHat
  • http://james.padolsey.com James

    The advantages of using EMs over pixels are mostly accessibility related – if you use EMs then your users are able to re-size the text (this is only true for older browsers, as with newer browsers whole-page magnification is more popular). People should note that a user still has control over things like this, 10px doesn’t necessarily equal .675em … all we can make sure of, as web designers, is that all the different sizes on our sites are correct in their relativity to each other.

  • http://pxtoem.com Brian Cray

    If you go to the “Learn” tab, you’ll find all the info you need about EMs and why you should be using them going forward. :)

  • http://www.xqlusive.nl xQlusive

    That can become very usefull! Thanx.

  • http://kolakube.com/ Alex | Kolakube.com

    This is going to be so useful, thanks so much!

  • http://www.distinctivequality.com/blog/ Ovi Demetrian Jr

    I like how the table also shows percentages and points.

  • Brendan Saunders

    I am currently in the habit of setting the base-font size to 62.5% = 10px in the html, or body element. That way I can use EMs that make sense… Need 12px, 1.2em. 24px, 2.4em… easy peasy… I stole this technique from Elliot Jay Stocks’ Starkers reset-theme for WordPress.

    It also appears that Nettuts does the same… ;P

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  • http://weeking.cn weeking.cn

    good

  • Pingback: PXtoEM: para convertir unidades absolutas en relativas | Cosas sencillas

  • http://www.fatheads.co.uk sean turner

    Brilliant,

    Many thanks

  • http://hi.baidu.com/zhouqicf melodycf

    it’s useful,thanks!

  • http://www.tricksdaddy.com Simran

    I am always confused with em !!! i prefer to use pixels rather than em

  • John

    Thanks for this useful tool.

  • http://www.ravendevelopers.com Anirudh K. Mahant

    You know whats the worst thing in this beautiful world of Web 2.0 -> the spaghetti coded Internet Explorer! Sucks from right down to its grass roots when this over bloated company called MS decided to out run Netscape in the first place.
    Why don’t we all join hands and start a campaign against MS to forbid its spaghetti coded IE to be dragged out of this beautiful market of Web 2.0. And guess what they come up with their new campaign for IE8? Faster & Easier! why dont they say its buggier and more worst than any other browser in the world that exists in the market today?
    While on the other hand you have at least W3C compatible browsers like the Gems of the Web 2.0 like Mozilla Firefox, Opera and Safari!

    Well enough of this rant guys I pray that IE get eradicated with times as a web developer we all know how much of a big enemy this browser is for us!

  • http://www.themeheven.com Themeheven

    That’s good it will help to the beginners . And thanks .

  • kinki_2046

    somebody give me an ideal for the usage of it.
    thanks

  • http://xtendedview.com Tushar

    Yup it is better to use

    #container {
    font-size:62.5%;
    }

    Then 1em = 10px and 2.4em = 24px

    I always use to.

  • http://www.onetech.in/ Ankit

    Very useful app specially the its percentage details.

  • http://www.geeknoob.com Kundan Bhardwaj

    Good to know can be done this way aswell.

  • http://adsenserecord.blogspot.com/ Bill

    I was searching it on Google. Thanks for share.