Easy CSS font-size pixel to EM conversion trick

Here is a little CSS font-size trick might be new or old to you. I have seen this in a few other places, but thought it would be worth mentioning since it was relatively new to a few guys here in the office. I am not going to get into the differences of Pixels and EMs, maybe another post, but I am going to touch on them during this little trick. If you love to work in EMs and have all the conversions worked out in your head, great! If not and you would like to stick to pixels this trick might help you with the conversion, I am not trying to convince anyone to go either way.

Normally you would use a conversion table to figure out what your font-size should be from pixels to EMs(assuming you’re trying to be accurate to design). Sure you could try to wing it or spend some precious time guessing numbers, but time IS precious and shouldn’t be wasted. If the body is set to 1EM(browser standard: 1EM = 16px), and the font-size you would want is 12px that would be 0.75EMs. e.g. 10px converts to 0.625EMs, 22px converts to 1.375EMs.

You can set the font-size of the body to 62.5%(that is 62.5% of the default of 16px), which equates to 10px, or 0.625EMs. Now you can set your font-size in EMs with an easy to remember conversion, divide the px by 10.

• 12px = 1.2EMs
• 13px = 1.3EMs
• 16px = 16EMs
• 8px = 0.8EMs
• etc…

This makes everything SUPER easy to remember and eliminates the need for conversion tables. Of course, you will still need to use a conversion table for nested elements when using EMs, if you are not being specific in your CSS, which is a whole separate issue.

Hope this helps save some of you some time. Cheers!

Here are some conversion tables for reference:
http://pxtoem.com/
http://jontangerine.com/silo/css/pixels-to-ems/

About the Author: John Botica

John is a web developer at digital-telepathy. He graduated with a Bachelor of Science degree in Media Arts with an emphasis in Web Design from Platt College of Graphic Design, San Diego and graduated with honors at the top of his class. During his education he interned at digital-telepathy as a developer/support specialist, which then lead to a full-time position upon graduation. On a day to day basis he is always learning and growing in his knowledge of the web, which is a must! When not working John enjoys tilting back a pint at the pub, playing games, collecting random pieces of armor and weapons from the past, helping Dave in Azeroth (after all he is a Gnome and needs all the help he can get), and most of all spending time with his wife Amy.