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.
- 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 Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Maybe a little info on why select EM over px?
Maybe because more people are starting to use it now … Web 2.0?
@Nouman: This info is available on the PXtoEM.com website. Click the tab labelled “3. Learn” for a little more info on font sizing.
Brilliant…
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.
Just Perfect ;)
I know something similiar: http://riddle.pl/emcalc/
I’ll rather use this:
#container {
font-size:62.5%;
}
Then 1em = 10px and 2.4em = 24px :D
Oh I love that! Brilliant…
Think im gonna stick with the good old Em Calculator at http://riddle.pl/emcalc/
Why em over px? See here http://www.alistapart.com/articles/howtosizetextincss/
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.
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. :)
That can become very usefull! Thanx.
This is going to be so useful, thanks so much!
I like how the table also shows percentages and points.
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
good
Brilliant,
Many thanks
it’s useful,thanks!
I am always confused with em !!! i prefer to use pixels rather than em
Thanks for this useful tool.
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!
That’s good it will help to the beginners . And thanks .
somebody give me an ideal for the usage of it.
thanks
Yup it is better to use
#container {
font-size:62.5%;
}
Then 1em = 10px and 2.4em = 24px
I always use to.
Very useful app specially the its percentage details.