I keep reading how important it is with responsive web design to have fonts written in em rather than pixels. However, none of the info that I can find on this topic actually works for me in practise. So in its most basic form, if I declare a bass font in the body tag like this:

body { font-size:1em; }
I am told that this will equate to a base font of 10px so if I want my p tags to be 12px all I have to do is this:

p { font-size:1.2em; }
Makes sense when you read it, but in practise 1.2em is nowhere near 12px font-size - it's much bigger.

To make my point I have put together a comparison here - 1.2em in CSS with a base font of 1em and a graphic of 12px in Photoshop. Both are Arial. The sizes are not even close.

So how is this really supposed to work?