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
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!