March 20th, 2008 | Posted in Blog, Tools & Resources, Web Standards

Convert Pixels to relative Em units

Convert Pixels to relative Em units

Em is generally known as the most effective font unit in CSS content development, because it is relative to the body text size of the page. So, each of your elements is sized relatively according to your current font size. Adding these units to margin and heights of divs will allow a proportional sizing, again according to the text size. In extend, this method will promote accessibility in your page.

A pixel unit on the other hand, is a pixel unit. It is easy to use and remain constant in value, regardless of your body text size. It does require some accurate calculations though (which does make it a bit of pain sometimes). Not to mention that not all users see it the same way. There are many articles online regarding the advantages of em and disadvantages of using pixel units.

Now, the question is how do I proceed to changing my pixel units to relative em units? There’s a great article at clagnut’s blog that will guide you through this process. Again, if you’re new to this (like I am), it can be painful and you might just feel like going back to pixels, since it is much more familiar.

Or, you can just get an online em calculator that will calculate your pixels to em units. I think the most know is Riddle’s Em Calculator.

Recently, I’ve come accross James Whittaker’s calculator that also provides the line height of your text. It gives you the full CSS rule for your element, ready to copy and paste on your stylesheet. You can check it out here. You can also install on your hard drive and have easier access on it. I love it!

4 Responses to “Convert Pixels to relative Em units”

  1. Robert Nesta Says:

    Another nice tool to convert whole stylesheets or HTML-pages with inline styles to em values is: http://www.dieterschnee.com/home/px2emconverter

    Check this!

  2. How to Get Six Pack Fast Says:

    The style of writing is very familiar . Did you write guest posts for other bloggers?

  3. Jai Says:

    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.

  4. Reece George Says:

    Hi, I stumbled upon your blog post on google whilst I was trying to find a blog post. excellent site by the way. Its a good job I located you and i will check back on your site whenever i get the time. Subscribed to your rss feed.

About CSS addict

CSSaddict is the personal space of Vicky Gourgouri, a web designer from Greece who loves the advantages several CSS techniques provide for getting beautiful designs online. She has designed and developed this space so she can exhibit her work, write about the new web trends and provide excellent resources on web design and development.