Convert PX to EM easily

Convert PX to EM easily

09 January 2010 by jay boodhun Convert PX to EM easily 2 Comments

Converting Pixels to Ems is not always easy. Most front end developers like using pixels because it's easier to get design cut pixel perfect in html. But using pixels in your css can have a few disadvantages.

Styles sheets become harder to maintain if the body font size changes for example. The developer will end up having to change every instance of pixel sized fonts. Also using pixel sizes does not improve accessibility for end users. For example if end users are using hot keys to increase font sizes only relative sized fonts will increase which means ems or percentage sizes.

So here is an online tool that will help converting your pixels to ems pxtoem.com

You need to know your starting base font size which in most cases is 16px.

I usually set a font-size of x-small on the body, which is 10px in the main browsers.

That way, when I want to have a base of 12pt/12px on the rest of the site, I set the em to 1.2 on my main container div.

Works a treat!

You might find this useful as well. http://pixel2em.kleptomac.com
This provides an online pixel to em converter and you can also do a complete CSS file conversion.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Syntax highlight code surrounded by the {syntaxhighlighter OPTIONS}...{/syntaxhighlighter} tags.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.